grav-plugin-featherlight icon indicating copy to clipboard operation
grav-plugin-featherlight copied to clipboard

featherlight gallery shows images of all page folders?

Open axel-rank opened this issue 9 years ago • 3 comments

Hi, I have a modular page. My images in different page folders using lightbox effect. I activated gallery mode in featherlight plugin. So this works. Now all images of all page folders with lightbox effect are shown in gallery. I want only to show those images in gallery that are in one page folder. So the gallery should work for a single page folder and not for all page folders. Is this possible? Another point: On a modular page it is not possible to override featherlight settings in page headers. Not working, no effect.

axel-rank avatar May 13 '16 07:05 axel-rank

You would have to manipulate the script that initializes the featherlight gallery. That's a quite easy task as soon as pull request https://github.com/getgrav/grav-plugin-featherlight/pull/11 is approved ;-)

Then you just would have to make sure to identify the links that belong together and work with a init script like this:

$('#elementWrapper_1 a[rel=lightbox]').{pluginName}({
        openSpeed: {openSpeed},
        closeSpeed: {closeSpeed},
        closeOnClick: '{closeOnClick}',
        root: '{root}',
});

Setting a different rel attribute than 'lightbox' when creating a lightbox link would make it even easier, I think. But that's currently not possible with the grav core since the rel attribute is hard coded at the moment.

kitzberger avatar Jun 01 '16 06:06 kitzberger

I am also trying to create a gallery template but I think I'm not quite there. I have created a folder with images and metadata

01.Images
       |- gallery.md
       |- image1.jpg
       |- image1.jpg.meta.yaml
       |- image2.jpg
       |- image2.jpg.meta.yaml

gallery.md has the following template gallery.html.twig:

{% extends 'partials/base.html.twig' %}

{% block content %}
    {{ page.content }}

     {% for image in page.media.images %}
         {{ image.lightbox(1024,768).cropResize(200,200).html(image.meta.title) }}
     {% endfor %}

{% endblock %}

This sort of works, each image is shown sequentially and activates the lightbox However, I'd like to be able to then proceed to the next image in a gallery. How would one do this?

Ideally, I'd like to have the featherlight gallery working on and image collage like https://github.com/petrgrishin/grav-plugin-image-collage

zeigerpuppy avatar Dec 12 '16 02:12 zeigerpuppy

However, I'd like to be able to then proceed to the next image in a gallery.

Your code works for me well. The next image button appears when you hover the mouse over the edge of the image.

Tamriel avatar Dec 24 '16 22:12 Tamriel