MODx Revolution Gallery with Colorbox and jQuery Asynchronous Image Loader (JAIL)
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 JAIL (cause I hate pagination).
Prerequisites:
- MODX Revolution
- Gallery extra for MODX Revolution
- IF extra for MODX Revolution
- Colorbox
- JAIL - 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 data-href="[[+thumbnail]]" class="[[+imgCls]]" src="assets/templates/site/images/loading-thumb.gif" alt="[[+name]]" width="195" height="140"/>
</a>
[[+name]]
</div>
Take note of the data-href and src attributes. First is the thumb path and the second can be a loading gif.
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/JqueryAsynchImageLoader.min.js"></script>
<script src="assets/templates/demo/colorbox/colorbox/jquery.colorbox-min.js"></script>
<script>
$(document).ready(function () {
$('.gal-item img').asynchImageLoader({placeholder : "assets/templates/site/images/loading-thumb.gif"});
$("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: 48
Reply #78 on : Tue February 15, 2011, 04:37:06
Posts: 48
Reply #77 on : Tue February 15, 2011, 04:39:21
Posts: 30
Reply #76 on : Tue February 15, 2011, 07:17:58
Posts: 48
Reply #75 on : Thu February 17, 2011, 13:31:06
Posts: 30
Reply #74 on : Thu February 17, 2011, 13:44:04
Posts: 48
Reply #73 on : Thu February 17, 2011, 13:56:25
Posts: 30
Reply #72 on : Thu February 17, 2011, 14:00:22
Posts: 48
Reply #71 on : Thu February 17, 2011, 14:10:53
Posts: 48
Reply #70 on : Thu February 17, 2011, 14:21:44
Posts: 30
Reply #69 on : Thu February 17, 2011, 14:21:46
Posts: 48
Reply #68 on : Sat February 19, 2011, 07:45:44
Posts: 30
Reply #67 on : Sat February 19, 2011, 07:52:36
Posts: 48
Reply #66 on : Mon February 21, 2011, 09:32:06
Posts: 48
Reply #65 on : Tue February 22, 2011, 07:11:39
Posts: 30
Reply #64 on : Tue February 22, 2011, 08:17:18
Posts: 48
Reply #63 on : Fri March 04, 2011, 16:15:09
Posts: 30
Reply #62 on : Fri March 04, 2011, 17:33:11
Posts: 48
Reply #61 on : Fri March 04, 2011, 23:24:32
Posts: 30
Reply #60 on : Sat March 05, 2011, 07:06:33
Posts: 48
Reply #59 on : Sat March 05, 2011, 19:08:14
Posts: 30
Reply #58 on : Sat March 05, 2011, 19:16:23
Posts: 48
Reply #57 on : Sat March 05, 2011, 20:13:27
Posts: 30
Reply #56 on : Sat March 05, 2011, 21:53:51
Posts: 48
Reply #55 on : Sun March 06, 2011, 11:46:34
Posts: 48
Reply #54 on : Sun March 06, 2011, 19:09:26
Posts: 48
Reply #53 on : Fri March 11, 2011, 07:11:32
Posts: 48
Reply #52 on : Fri March 11, 2011, 12:20:16
Posts: 48
Reply #51 on : Fri March 11, 2011, 13:18:31
Posts: 30
Reply #50 on : Fri March 11, 2011, 13:49:26
Posts: 48
Reply #49 on : Mon March 28, 2011, 08:18:37
Posts: 30
Reply #48 on : Mon March 28, 2011, 08:32:14
Posts: 48
Reply #47 on : Mon March 28, 2011, 08:59:47
Posts: 30
Reply #46 on : Mon March 28, 2011, 09:13:13
Posts: 48
Reply #45 on : Mon March 28, 2011, 10:23:55
Posts: 30
Reply #44 on : Mon March 28, 2011, 10:32:26
Posts: 48
Reply #43 on : Mon March 28, 2011, 10:52:59
Posts: 30
Reply #42 on : Mon March 28, 2011, 11:26:11
Posts: 48
Reply #41 on : Mon March 28, 2011, 11:57:27
Posts: 30
Reply #40 on : Mon March 28, 2011, 12:07:19
Posts: 48
Reply #39 on : Mon March 28, 2011, 12:26:29
Posts: 30
Reply #38 on : Mon March 28, 2011, 12:34:40
Posts: 48
Reply #37 on : Mon March 28, 2011, 12:40:35
Posts: 48
Reply #36 on : Mon March 28, 2011, 12:59:32
Posts: 30
Reply #35 on : Mon March 28, 2011, 13:04:00
Posts: 48
Reply #34 on : Tue April 05, 2011, 03:57:31
Posts: 48
Reply #33 on : Mon April 18, 2011, 18:03:09
Posts: 30
Reply #32 on : Mon April 18, 2011, 18:29:40
Posts: 48
Reply #31 on : Wed June 01, 2011, 00:04:17
Posts: 48
Reply #30 on : Wed June 01, 2011, 22:12:38
Posts: 30
Reply #29 on : Thu June 02, 2011, 07:29:40
Posts: 48
Reply #28 on : Thu June 02, 2011, 10:40:36
Posts: 48
Reply #27 on : Fri June 10, 2011, 03:46:57
Posts: 30
Reply #26 on : Mon June 27, 2011, 18:29:03
Posts: 48
Reply #25 on : Fri July 15, 2011, 14:15:44
Posts: 48
Reply #24 on : Sat July 16, 2011, 06:07:20
Posts: 30
Reply #23 on : Wed July 20, 2011, 13:19:06
Posts: 48
Reply #22 on : Fri July 29, 2011, 02:48:49
Posts: 30
Reply #21 on : Fri July 29, 2011, 07:43:19
Posts: 48
Reply #20 on : Fri July 29, 2011, 22:12:19
Posts: 30
Reply #19 on : Sat July 30, 2011, 08:22:35
Posts: 48
Reply #18 on : Sat July 30, 2011, 13:23:37
Posts: 30
Reply #17 on : Sat July 30, 2011, 13:25:33
Posts: 48
Reply #16 on : Sat July 30, 2011, 14:55:45
Posts: 48
Reply #15 on : Wed August 17, 2011, 18:37:08
Posts: 48
Reply #14 on : Thu August 25, 2011, 12:24:57
Posts: 30
Reply #13 on : Fri August 26, 2011, 08:20:57
Posts: 48
Reply #12 on : Tue September 06, 2011, 12:29:59
Posts: 48
Reply #11 on : Thu September 08, 2011, 06:36:39
Posts: 30
Reply #10 on : Thu September 08, 2011, 07:28:53
Posts: 48
Reply #9 on : Thu September 08, 2011, 10:13:33
Posts: 48
Reply #8 on : Fri September 23, 2011, 08:11:35
Posts: 30
Reply #7 on : Fri September 23, 2011, 08:34:07
Posts: 48
Reply #6 on : Fri September 23, 2011, 10:15:37
Posts: 48
Reply #5 on : Thu October 13, 2011, 01:24:19
Posts: 48
Reply #4 on : Sat October 15, 2011, 07:29:18
Posts: 30
Reply #3 on : Sat October 15, 2011, 07:37:38
Posts: 48
Reply #2 on : Tue November 29, 2011, 09:19:28
Posts: 30
Reply #1 on : Tue November 29, 2011, 09:27:04