如何创建另一个链接以查看灯箱中的图像 - Galleria插件

Question

I am using the Galleria plugin on my site and all works fine. When the main image is clicked it opens a lightbox so the user can view the images.example

I am trying to create an another link ( apart from the image itself ) lower down the page to achieve the same thing.

Can anyone help?

Thanks in advance. Most appreciated!

Answer 1

After you've called your Galleria.run('#selector') method, you can write your link html, adding a data-imgIndex data-attribute. Give your clickable links a class, like 'show-lightbox.'

HTML

<a href='#' class='show-lightbox' data-imgIndex='1'>Link text here</a> 
<!-- link to first image in galleria set -->

JQuery

$(document).on('click', '.show-lightbox', function() {
    var gallery = Galleria.get(0),
        index = $(this).data('imgIndex');
    index = +index //convert string to int with preceding plus-sign
    gallery.openLightbox(index); // open lightbox to img at specified index
});

Hope this helps!