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:


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="" data-caption="Image 1">
<img src="" />
<!-- Want to pass: {photoId : 1, settingsId: 30} -->

<a class="fbelements" href="" data-caption="Image 2">
<img src="" />
<!-- Want to pass: {photoId : 2, settingsId: 41} -->


// Create template for custom button
$.fancybox.defaults.btnTpl.custombutton = '<button data-fancybox-custombutton class="fancybox-button fancybox-button--download" title="Download" >' +
              '<svg xmlns="" 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>' +

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


     selector : '.fbelements',
     closeExisting: true,
     fullScreen: true,
     thumbs: false,
     touch: true,
     infoBar: true,
     buttons: [

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 :