【问题标题】:Inserting a caption into the Twitter 'tweet' or Facebook 'like' for Fancybox?为 Fancybox 的 Twitter 'tweet' 或 Facebook 'like' 插入一个标题?
【发布时间】:2014-12-04 02:52:28
【问题描述】:

当我单击图像并单击 Twitter 或 Facebook 共享按钮时,它会共享页面标题以及指向照片的链接。有没有办法可以在其中插入图像的标题? Fancybox 抓取图像的title 属性(即“第一个标题”、“第二个标题”),但我不知道如何将其放入实际的推文中。我在Fancybox docs 中找不到任何相关信息。

小提琴:http://jsfiddle.net/G5TC3

HTML

<a title="1st title" class="fancybox" href="http://fancyapps.com/fancybox/demo/1_b.jpg"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/></a>

<a title="2nd title" class="fancybox" href="http://fancyapps.com/fancybox/demo/2_b.jpg"><img src="http://fancyapps.com/fancybox/demo/2_s.jpg" alt=""/></a>

JS

$(".fancybox")
    .attr('rel', 'gallery')
    .fancybox({
        beforeShow: function () {
            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=' + this.href + '&amp;layout=button_count&amp;show_faces=true&amp;width=500&amp;action=like&amp;font&amp;colorscheme=light&amp;height=23" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:23px;" allowTransparency="true"></iframe>';
            }
        },
        afterShow: function() {
            // Render tweet button
            twttr.widgets.load();
        },
        helpers : {
            title : {
                type: 'inside'
            }
        }  
    });

【问题讨论】:

    标签: javascript jquery facebook twitter fancybox


    【解决方案1】:

    这是答案的一半。

    对于 twitter,在添加任何社交媒体按钮之前,您可能需要在变量中捕获原始 title。然后使用 twitter 的 data-text 属性设置该值,如:

    beforeShow: function () {
        if (this.title) {
    
            var _title = this.title; // capture original title
    
            // New line
            this.title += '<br />';
    
            // Add tweet button WITH data-text parameter
            this.title += '<a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-text="' + _title + '" data-url="' + this.href + '">Tweet</a> ';
    
            // Add FaceBook like button
            this.title += '{facebook iframe}';
        }
    },
    

    JSFIDDLE

    注意:我不确定 Facebook 是否允许您传递该信息(这将是答案的另一半)

    【讨论】:

    • 八大饼八大棒!谢谢你。对于 Facebook 按钮,我决定通过在参数中添加 &amp;amp;share=true 来添加“分享”按钮。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-04-05
    • 2011-02-22
    • 2018-05-09
    • 2020-11-30
    • 2013-03-10
    相关资源
    最近更新 更多