Simple & Advanced Tutorials to integrate Masonry with MODX
Demo URL = http://masonry.clients.modxcloud.com/
Lightbox URL = http://masonry.clients.modxcloud.com/index.php?id=2
Auto Lightbox URL = http://masonry.clients.modxcloud.com/index.php?id=3
Masonry Repo = https://github.com/desandro/masonry
##Goals
- Basic Starter DIY Tutorials
- Vanilla JS Lightbox [COMPLETED]
- Auto-watch images in a folder [COMPLETED]
- Dropbox API
- Mobile Upload
- More Themes
##Manual Basic Installation
-
Upload -
assets/js/masonry.pkgd.min.js -
Upload -
assets/css/demo.css -
Create -
assets/img(naming convention optional) -
Create Chunk -
MasonryConfig(copy from the repo) -
Add to
<head>-[[$MasonryConfig? &width=`200` &theme=`demo`]] -
Add Container HTML
<div class="container" id="mason"> <div class="masonry-item" style="background-image: url([[phpthumbof? &input=`folder/file.jpg` &options=`&w=400&zc=0&aoe=0&far=0`]]);"></div> </div> <!-- /#mason --> -
the phpthumbof width should be double the width in the chunk