Featherlight Gallery?

Archive
1

Has anyone successfully created a featherlight gallery? I would like visitors of my site to be able to flip through a gallery of photos. I’ve used {{ page.media[‘sample-image.jpg’].lightbox(1024,768).cropResize(200,200).html(‘Sample Image’) }} to successfully add a lightbox to a page. It opens fine. When I load featherlight.gallery.min.js onto the page (the JS required for a gallery) something odd happens. The gallery will open, but so too does the original lightbox. So after I close the gallery, there’s another lightbox. I have to close both of them. Then I use
{% for image in page.media.images|sort %}
{{ image.lightbox(400,400).cropResize(350,350).html() }}
{% endfor %}

to loop through the page’s images. Every picture will appear on the page, rather than just clicking one image on the page and then scrolling through all the photos, like a gallery is suppose to. And I still have the issue of double windows popping up. Does anyone know how to create a gallery with multiple images, and has anyone run into the problem of double windows?

2

Have you looked at this gallery cookbook entry in the docs?

3

Yes. That does the same thing that I’m doing now. It displays all of the images on the page. I’m trying to use featherlight’s gallery function. I’m attempting to show just one picture on the page, but after clicking and opening it, the user can sort through a collection of photos as a gallery.

4

Using

{% for image in page.media.images %}

{% endfor %}

with

$(document).ready(function(){
$(‘a.gallery’).featherlightGallery();
});

in the javascript almost works correctly. Clicking on any of the images will load a working gallery that can sort through all images. I also fixed the issue of doubling loading. However, all of the images appear on the page, instead of just one.

5

I found a solution, although I’m not sure if this is the correct way to do it. It works nonetheless.

<div>
<a class="gallery" href="{{ page.media.images|first.url }}"><img src="{{ page.media.images|first.url }}"></a>
{% for image in page.media.images if image != page.media.images|first %}
      <a class="gallery" href="{{ image.url }}"></a>
{% endfor %}
</div>

with

$(document).ready(function(){
    $('a.gallery').featherlightGallery();
});

in javascript. The reason each picture would appear on the page is the

<img src="">

section. So I just have one for the first image, then iterate over all images that are not the first without including . All of this assumes you have featherlight.min.js and featherlight.gallery.min.js loaded on the page.