利用FancyBox 2的.data()

时间:2014-06-27 21:14:54

标签: javascript jquery fancybox-2

我正在使用精美的方框2并尝试在.fancybox()调用中使用一些自定义数据。以下是我的HTML:

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

这是我的电话:

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

alert() on返回undefined。有什么想法吗?

1 个答案:

答案 0 :(得分:1)

而不是

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

使用

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