2

我已经为我网站上的图片库安装了 fancybox，我即将添加社交媒体按钮（twitter 和 facebook）的功能，如下所述http://jsfiddle.net/G5TC3/

$(".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'
        }
    }  
});

我还想为 pinterest 添加一个“固定”按钮 - 有没有办法扩展这个脚本以包含 pinterest？

谢谢

乙

4

3 回答 3

0

这可能对您有帮助：http: //jsfiddle.net/BK6h4/

不要忘记在页面标题中添加一个 Jquery（可能是 1.8.3）。

$(".fancy")
.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 Pinterest button
            this.title += '<a href="//pinterest.com/pin/create/button/?url=pageUrl&media=imgUrl&description=myDescription" data-pin-config="above"  data-pin-do="buttonPin" data-url="' + this.href + '"><img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" /></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 : {
        titlePosition       : 'inside',

        }
    }  
});
于 2013-04-10T20:08:14.533 回答
0

您快到了，您需要做的就是将 pin it 按钮添加到标题，就像您添加其他按钮一样。这里有如何做到这一点的完整大纲：http: //scottgale.com/using-pinterest-with-fancybox/2012/08/15/

查看您的脚本，您需要做的就是将其添加到您在脚本中进行标题修改的位置：

//add pinterest button for title
this.title += '<a href="<a class="vglnk" title="Link added by VigLink" rel="nofollow" href="http://pinterest.com/pin/create/button/?url='+"><span>http</span><span>://</span><span>pinterest</span><span>.</span><span>com</span><span>/</span><span>pin</span><span>/</span><span>create</span><span>/</span><span>button</span><span>/?</span><span>url</span><span>='+</span></a>
    encodeURIComponent(document.location.href)+
    '&media=http%3A%2F%2Fwww.homesburlingtonvermont.com'+
    encodeURIComponent(this.href)+
    '&description=Pin from <a class="vglnk" title="Link added by VigLink" rel="nofollow" href="http://ScottGale.com"><span>ScottGale</span><span>.</span><span>com</span></a>" class="pin-it-button" count-layout="horizontal">'+
    '<img border="0" src="<a class="vglnk" title="Link added by VigLink" rel="nofollow" href="http://assets.pinterest.com/images/PinExt.png"><span>http</span><span>://</span><span>assets</span><span>.</span><span>pinterest</span><span>.</span><span>com</span><span>/</span><span>images</span><span>/</span><span>PinExt</span><span>.</span><span>png</span></a>" title="Pin It" /></a>';
于 2014-03-12T13:21:45.397 回答
0

您的 Twitter 按钮对我来说是正确呈现的，但从您给定的来源来看，您似乎不必要地链接到 Twitter 的widget.js. 只需将以下内容添加到您的<body>.

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

至于 Pintrest，只需加载他们的脚本：

<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>

建立链接有点困难。这是基本结构：

<a data-pin-config="above" href="//pinterest.com/pin/create/button/?url=pageUrl&media=imgUrl&description=myDescription" data-pin-do="buttonPin" >
  <img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" />
</a>

因此，您可以href动态加载，也可以自己硬编码。

于 2013-03-26T19:54:45.063 回答