Question

我已为我网站上的图片库安装了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添加一个'pin it'按钮 - 有没有办法扩展这个脚本以包括pinterest？

由于

电子

Answer 1

您的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，也可以自行加密。

Answer 2

这可能对您有所帮助：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',

        }
    }  
});

Answer 3

你几乎就在那里，所有你需要做的就是将它按钮添加到标题，就像你添加其他标题一样。这里有一个完整的概述：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>';

添加Pinterest按钮到fancybox

3 个答案: