javascript - 将 .data() 与 FancyBox 2 结合使用

标签 javascript jquery fancybox-2

我正在使用 fancy box 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() 返回 undefined。有什么想法吗?

最佳答案

而不是

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

关于javascript - 将 .data() 与 FancyBox 2 结合使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24460863/

相关文章:

javascript - Canvas 和物体

javascript - 对全景旋转实现阻尼(惯性)

javascript - 如何为网站的所有 3 个维度制作 3D block 动画

javascript - 如何使 fancybox href 动态化?

jquery - 更改 fancybox 中的 "Next"/"Previous"链接标题

javascript - 使用 2 个按钮在 2 个 div 之间切换

javascript - SharePoint 2013 在显示窗体中打开文档

javascript - 使用外部链接 fancybox 定位制表符内联内容

javascript - IE js 与 event.target 发生错误!==

jquery 验证 onchange