Try to search your question here, if you can't find : Ask Any Question Now ?

Passing Custom Data to Fancybox Instances

HomeCategory: stackoverflowPassing Custom Data to Fancybox Instances
Avatarrupesh asked 1 month ago

I am trying to integrate Fancybox 3 into my app. In this, I am creating a custom button which process functions based on that instance and it requires additional data about that instance, for example photoId and settingsId for that instance. As an example:

HTML:

In this HTML, I want to pass an object data like {photoId : 1, settingsId: 30}, for each instance that will be used in the custom fancybox button method.

<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"
     ],
   });

How is that possible? How can I pass additional data for each fancybox gallery instances so that data can be used in the custom button for that image?

1 Answers
Best Answer
Avatarnaveen answered 1 month ago
Your Answer

19 + 15 =

Popular Tags

WP Facebook Auto Publish Powered By : XYZScripts.com