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

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 gallery 实例传递附加数据，以便可以在该图像的自定义按钮中使用数据？

Answer 1

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

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

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

Passing Custom Data to Fancybox Instances

javascript

jquery

fancybox

angularjs

fancybox-3