CODEWITHSUNDEEP
javascriptjqueryfancybox-2
Andy Holmes
Andy Holmes

Reputation: 8077

Utilising .data() with FancyBox 2

I'm using fancy box 2 and trying to use some custom data inside the .fancybox() call. Below is my HTML:

<a title="TEST" data-album-id="5" class="fancybox" href="galleries/paris/originals/paris_001.jpg">';

and this is my call:

<script>
    $('.fancybox').fancybox({
        beforeShow: function () {
            alert($(this).data('album-id'));
            if (this.title) {
                // New line
                this.title += '<br />';

                // Add tweet button
                this.title += '<a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-url="' + this.href + '">Tweet</a> ';

                // Add FaceBook like button
                this.title += '<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2F'+'www.tommyreynolds.co.uk%2Fgallery.php%3Fgallery%3D'+ 5 +'%23image1'+'&amp;width&amp;layout=button_count&amp;action=like&amp;show_faces=true&amp;share=true&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:21px;" allowTransparency="true"></iframe>';
            }
        },
        afterShow: function () {
            // Render tweet button
            twttr.widgets.load();
        },
        helpers: {
            title: {
                type: 'inside'
            }, //<-- add a comma to separate the following option
            buttons: {} //<-- add this for buttons
        },
        closeBtn: false, // you will use the buttons now
        arrows: false
    });
</script>

But the alert() on returns undefined. Any ideas?

Upvotes: 0

Views: 59

Answers (1)

marathonman
marathonman

Reputation: 452

instead of 

alert($(this).data('album-id'));

use

alert($(this.element).data('album-id'));

fiddle

fancybox set content types like image, ajax, etc to element

fancybox Tips & tricks section have good samples and all fiddled

Upvotes: 1

Related Questions