Question

I have a link to open Fancybox box as follows:

<a class="fancybox" rel="gallery" href="<?php echo $image_src; ?>" data-id="<?php echo $post->ID; ?>">

The link has data attribute populated with an id as above. I want to make the data attribute available inside the Fancybox helper function. I have tried using $(this.element).data('id') in the code below:

helpers: {
    title: {
        type: 'over'
    },
    buttons: {
        position: 'bottom',
        tpl: '<div id="fancybox-buttons"><ul> \
                                            <li class="button"><a class="test-btn" data-id="' + $(this.element).data('id') + '" href="#"></a></li> \
                                        </ul></div>'
    }
}

However it does not work. Fetching the data attribute always returns undefined within the helper function. How do I get this working.

Answer 1

@meagar presented a great solution that normally would work for most people. However, since the links that were used to call Fancybox were loaded on the page via an Ajax request, his solution did not work for me. I resolved it by declaring a global variable and then passing the value of $(this.element).data('id') to the global variable in Fancybox afterLoad callback.

afterLoad : function() {
    my_global_var = $(this.element).data('id');
}

Then I simple used the global variable inside of the helper options.