Select data properties from gallery html elements in Fancybox using jQuery

Question

I've created a gallery using Fancybox https://fancyapps.com/fancybox/3/. The thumbnail images that are clickable (to show the larger images) have data properties I want to get to (flip-h, flip-v etc.) after loading the main image (the larger image in the anchor-tag, not the thumbnail in the img-tag).

Consider this HTML:

<a data-lightbox="gallery" href="some_image.jpg">
    <img src="some_image_thumb.jpg" data-rotation="90" data-flip-h="180" data-flip-v="0">
</a>

And this javascript/jQuery code:

$().fancybox({
    selector : '[data-lightbox="gallery"]',
    afterLoad: function ( instance, slide ){
        var flip-h = ?;
        var flip-v = ?;
        var rotation = ?;    
    }
});

It doesn't matter to me if the data properties are found within the anchor element like this:

<a data-lightbox="gallery" href="some_image.jpg" data-rotation="90" data-flip-h="180" data-flip-v="0">
    <img src="some_image_thumb.jpg">
</a>

All I want to achieve is to get these properties ("afterLoad"). Help is much appreciated.

Spoonie Spoonie · Accepted Answer · 2019-09-27T22:35:43

I think I found the solution:

<a data-lightbox="gallery" href="some_image.jpg" data-rotation="90" data-flip-h="180" data-flip-v="0">
    <img src="some_image_thumb.jpg">
</a>


$().fancybox({
    selector : '[data-lightbox="gallery"]',
    afterLoad: function ( instance, slide ){
        var flip_h = instance.current.opts.$orig.data('flip-h');
        var flip_v = instance.current.opts.$orig.data('flip-v');
        var rotation = instance.current.opts.$orig.data('rotation');    
    }
});

Select data properties from gallery html elements in Fancybox using jQuery

1 Answers