sekFancyBox & Gallery
Last updated Oct 27th, 2020 | Page history | Improve this page | Report an issue
Support the team building MODX with a monthly donation.
The budget raised through OpenCollective is transparent, including payouts, and any contributor can apply to be paid for their work on MODX.
Backers
Budget
$306 per month—let's make that $500!
Learn moresekFancyBox & 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: https://modx.com/extras/package/sekfancybox.
- Gallery, which can be downloaded via Package Management, or from the MODX Extras Repository, here: https://modx.com/extras/package/gallery.
- getPage, which can be downloaded via Package Management, or from the MODX Extras Repository, here: https://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.