Question

我正在尝试将Fancybox 3集成到我的应用程序中。在此，我正在创建一个自定义按钮，该按钮将基于该实例处理功能，并且需要有关该实例的其他数据，例如该实例的photoId和settingsId。例如：

HTML：

在此HTML中，我想为自定义fancybox按钮方法中将使用的每个实例传递{photoId : 1, settingsId: 30}之类的对象数据。

<a class="fbelements" href="http://example.com/img1.jpg" data-caption="Image 1">
<img src="http://example.com/thumb/img1.jpg" />
<!-- Want to pass: {photoId : 1, settingsId: 30} -->
</a>

<a class="fbelements" href="http://example.com/img2.jpg" data-caption="Image 2">
<img src="http://example.com/thumb/img2.jpg" />
<!-- Want to pass: {photoId : 2, settingsId: 41} -->
</a>

jQuery：

// Create template for custom button
$.fancybox.defaults.btnTpl.custombutton = '<button data-fancybox-custombutton class="fancybox-button fancybox-button--download" title="Download" >' +
              '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">' +
                '<path d="M18.62 17.09V19H5.38v-1.91zm-2.97-6.96L17 11.45l-5 4.87-5-4.87 1.36-1.32 2.68 2.64V5h1.92v7.77z"></path>' +
              '</svg>' +
'</button>';

// Make button clickable using event delegation
$('body').on('click', '[data-fancybox-custombutton]', function() {
                  // Here I need to access the object data for each of that respective instance
                  // For example: {photoId : 1, settingsId: 30}

 });

$().fancybox({
     selector : '.fbelements',
     closeExisting: true,
     fullScreen: true,
     thumbs: false,
     touch: true,
     infoBar: true,
     buttons: [
        "custombutton",
        "zoom",
        "slideShow",
        "fullScreen",
        "close"
     ],
   });

那怎么可能？如何为每个fancybox画廊实例传递其他数据，以便可以在该图像的自定义按钮中使用这些数据？

Answer 1

使用data-*属性（https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes）在链接上存储自定义数据。
这是您获取当前项目的原始触发元素（例如链接或按钮）的方式：
```
$.fancybox.getInstance().current.opts.$orig
```
然后只需使用.data()（https://api.jquery.com/data/#data-html5）从触发器元素中检索数据。

演示-https://codepen.io/anon/pen/RXbeQL?editors=1010

将自定义数据传递到Fancybox实例

1 个答案: