使用jQuery从Fancybox中的gallery html元素中选择数据属性

Question

我已经使用Fancybox https://fancyapps.com/fancybox/3/创建了一个画廊。可单击的缩略图（以显示较大的图像）具有加载主图像（锚定标记中的较大图像而不是缩略图）后要获取的数据属性（flip-h，flip-v等）在img标签中）。

考虑此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>

以及此javascript / jQuery代码：

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

对我来说，是否可以在锚元素中找到数据属性，就像这样：

<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>

我想要实现的就是获取这些属性（“ afterLoad”）。非常感谢您的帮助。

Answer 1

我想我找到了解决方法：

<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');    
    }
});