sekFancyBox & Gallery
sekFancyBox & Gallery
This is just a simple example of how you might use sekFancyBox with the Gallery addon to create a nice modal window gallery with a slideshow.
Requirements
- sekFancyBox, which can be downloaded via Package Management, or from the MODx Extras Repository here: http://modx.com/extras/package/sekfancybox.
- Gallery, which can be downloaded via Package Management, or from the MODx Extras Repository, here: http://modx.com/extras/package/gallery.
- getPage, which can be downloaded via Package Management, or from the MODx Extras Repository, here: http://modx.com/extras/package/getpage.
The Snippet Call
On the page you wish to display your gallery, place the snippet call using getPage. Don't forget the page.nav.
<ul class="pagination-nav"> [[!+page.nav]] </ul> [[!getPage? &elementClass=`modSnippet` &element=`Gallery` &totalVar=`gallery.total` &limit=`20` &album=`3` &containerTpl=`galContainer.custom` &thumbTpl=`galItemThumb.custom` &thumbWidth=`145` &thumbHeight=`145` &imageWidth=`700` &imageHeight=`500` ]] <ul class="pagination-nav"> [[!+page.nav]] </ul>
In order to make pagination work with Gallery, I had to add the below line to the getPage snippet. I placed it on line 41 as suggested by the helpful people in the forums Revolution Gallery - how to add pagination.
$properties['start'] = $properties['offset'];
Chunk: galContainer.custom
Keeping it simple, the custom chunk is a simple unordered list with a class call to the css.
<ul class="image-container"> [[+thumbnails]] </ul>
Chunk: galItemThumb.custom
The thumbnail chunk has the sekfancybox snippet call. Here I set the buttonhelper to 1, this gives me a little play button at the top of the screen so I can start a slideshow.
<li> [[!sekfancybox? &type=`media` &mousewheel=`1` &buttonhelper=`1` &modalclass=`[[+cls]]` &group=`gal` &title=`[[+description]]` &linktext=`<img class="[[+imgCls]]" src="[[+thumbnail]]" alt="[[+name]]" [[+image_attributes]] />` &link=`[[+image]]`]] </li>
The CSS
I am far from being a css master, but the css below is very handy for this gallery method.
/* gallery images */ ul.image-container{ margin:0; padding:0; } ul.image-container li { list-style:none; display:inline-table; padding:10px; } ul.image-container li ul{ margin:0; padding: 10px 0; } ul.image-container li ul li{ display:block; text-align:center; width:180px; padding: 0; } ul.image-container li ul li h5{ margin: 0 0 2px; font-size: 14px; text-decoration:underline; color: #063144; } ul.pagination-nav li{ list-style:none; display:inline-table; padding:10px; } ul.pagination-nav li a.active{ color:#000000; }
There it is. It doesn't look like much here, but it works great.
Suggest an edit to this page on GitHub (Requires GitHub account. Opens a new window/tab).