2

サイトの画像ギャラリー用にファンシーボックスをインストールしました。ここで概説されているように、ソーシャルメディアボタン (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'
        }
    }  
});

ピンタレスト用の「ピン留め」ボタンも追加したいのですが、このスクリプトを拡張してピンタレストを含める方法はありますか?

ありがとう

え

4

3 に答える 3

0

あとは、他のボタンを追加したのと同じように、ピン留めボタンをタイトルに追加するだけです。これを行う方法の完全な概要は、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

これはあなたに役立つかもしれません: 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

あなたの 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 に答える