MODx Revolution Gallery with Colorbox and Lazy Load
Setting a Photo Gallery in MODX Revolution is really easy. For this tutorial, I am going to use Colorbox (a customizable lightbox plugin for jQuery) and Lazy Load (cause I hate pagination).
Prerequisites:
- MODX Revolution
- Gallery extra for MODX Revolution
- IF extra for MODX Revolution
- Colorbox
- Lazy Load - No more pagination for me
I'm not going to go through the process of setting up any of the above, as it's up to you to install them anywhere you please. I personally prefer "assets/templates/site" but for demos I will use "assets/templates/demo". For simplicity I just drag and dropped the folders and files I downloaded in the "demo" folder.
Let's begin!
Upload your images
In the MODX manager go to Components/Gallery and upload your images. Make sure the albums are active.
Chunks
Set up the following 3 chunks:
DemoGalAlbumRowTpl
<div class="albumPreview">
<h3><a href="[[~[[*id]]? &[[+albumRequestVar]]=`[[+id]]`]]">[[+name]]</a></h3>
<div class="thumb">
<a href="[[~[[*id]]? &[[+albumRequestVar]]=`[[+id]]`]]"><img src="[[+image]]" alt="[[+name]]"/></a>
</div>
<div class="desc">
<p>[[+description]]</p>
<a href="[[~[[*id]]? &[[+albumRequestVar]]=`[[+id]]`]]" class="view">View gallery</a>
</div>
</div>
DemoGalItemThumb
<div class="[[+cls]]">
<a href="[[+image]]" rel="colorbox" title="[[+description]]">
<img class="[[+imgCls]]" src="[[+thumbnail]]" alt="[[+name]]" />
</a>
[[+name]]
</div>
DemoGalleryAlbumTpl
<h1>[[+album_name]]</h1> <p>[[+album_description]]</p> [[+thumbnails]]
Template
Here's a simplified template that you can use for your testing purposes. Please make sure the file paths are correct; you can see this in Firebug / Net Tab.
<!doctype html>
<head>
<meta charset="utf-8">
<base href="[[++site_url]]" />
<title>[[++site_name]] - [[*pagetitle]]</title>
<link rel="stylesheet" href="assets/templates/demo/colorbox/example1/colorbox.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="assets/templates/demo/jquery.lazyload.mini.js"></script>
<script src="assets/templates/demo/colorbox/colorbox/jquery.colorbox-min.js"></script>
<script>
$(document).ready(function () {
$("img").lazyload({effect : "fadeIn"});
$("a[rel='colorbox']").colorbox();
});
</script>
<style type="text/css">
body{
font-family: Arial;
font-size: 16px;
}
#Content{
width: 600px;
}
.gal-item{
float: left;
margin: 10px;
text-align: center;
}
.gal-item a{
display: block;
}
.gal-item img{
border: solid 4px #CCC;
}
.gal-item img:hover{
border: solid 4px #666;
}
</style>
</head>
<body>
<div id="Content">
<h1>[[*pagetitle]]</h1>
[[*content]]
[[!GalleryAlbums? &toPlaceholder=`GalleryAlbums` &limit=`0` &albumCoverSort=`rank` &prominentOnly=`0` &rowTpl=`DemoGalAlbumRowTpl` &thumbWidth=`195` &thumbHeight=`140`]]
[[!Gallery? &checkForRequestTagVar=`1` &toPlaceholder=`Gallery` &useCss=`0` &containerTpl=`DemoGalleryAlbumTpl` &thumbWidth=`195` &thumbHeight=`140` &thumbTpl=`DemoGalItemThumb` &imageWidth=`800` &imageHeight=`800`]]
[[!If? &subject=`[[+Gallery]]` &operator=`isempty` &then=`
[[+GalleryAlbums]]
` &else=`
[[+Gallery]]
`]]
</div>
</body>
</html>
DEMO
As always, please post your thoughts below.
Write a comment
Posts: 7
Reply #7 on : Fri February 04, 2011, 19:08:18
Posts: 7
Reply #6 on : Fri May 20, 2011, 10:05:55
Posts: 7
Reply #5 on : Sat July 02, 2011, 14:16:58
Posts: 7
Reply #4 on : Sat July 02, 2011, 14:21:38
Posts: 7
Reply #3 on : Thu October 06, 2011, 17:21:18
Posts: 7
Reply #2 on : Mon October 31, 2011, 01:33:26
Posts: 7
Reply #1 on : Tue November 15, 2011, 03:43:42