0

ファンシーボックスの画像にピンタレストボタンを追加したい

getscript 関数を fancbyox の beforeLoad および afterLoad 関数に入れていますが、 data-pin-hover="true" を設定する方法がわかりません

$.getScript('//assets.pinterest.com/js/pinit.js',

function() {

});

どんな助けでも大歓迎です。

4

1 に答える 1

1

pinit.js スクリプトは、動的に挿入された HTML にクリックをアタッチできませんでした..そのため、回避策として、ピン ボタンはポップアップで共有ページを開くだけです..

ファンシーボックステンプレートオプションを使用してピンボタンを画像ボックスに追加し、他のjqueryコードを追加してファンシーボックスのホバーとピンボタンのクリックイベントを処理しました

  • ピンタレストで画像を共有できるように、大きな画像には完全な URL を使用することを忘れないでください

スクリプトと CSS

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

<script type="text/javascript" src="../source/jquery.fancybox.js"></script>

<link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css" media="screen" />
<style type="text/css">
/* styling the Pin it button on image */.FancyPinWrap
{
position: relative;
}
.FancyPinWrap a.FancyPinButton
{
display: none;
width: 40px;
height: 20px;
position: absolute;
top: 10px;
left: 10px;
z-index: 9000;
}
.FancyPinWrap a.FancyPinButton img
{
width: 40px;
height: 20px;
border: none;
}
</style>

<script type="text/javascript">
$(document).ready(function() {
    // handle mouse over/out of any fancybox to be added to page
    $(document).on('mouseover', '.fancybox-outer', function(){
        $('a.FancyPinButton', this).show().click(FancyPinButtonClick);
    }).on('mouseout', '.fancybox-outer', function(){
        $('a.FancyPinButton', this).hide();
    });

    // handle click on pin button to get the src of image and open in popup
    $(document).on('click', 'a.FancyPinButton', function(e){
        var a = $(this);
        var img  = a.next('img.fancybox-image');
        var pinUrl = a.attr('href') + '?url='+ encodeURIComponent(location.href) + '&media='+ encodeURIComponent( img.attr('src') );

        var winWidth=750, winHeight= 320, winLeft = (screen.width/2)-(winWidth/2), winTop = (screen.height/2)-(winHeight/2);
        window.open( pinUrl,'PinIt','toolbar=no,width='+ winWidth +',height='+winHeight+',top='+winTop+',left='+winLeft);

        e.preventDefault();
    });

    // Loading fancybox with a template for images and add the pin button 
    $('.fancybox').fancybox({
         type : 'image'
         ,tpl: { image: '<div class="FancyPinWrap">'+
                            '<a class="FancyPinButton" target="_blank"'+
                                ' href="//pinterest.com/pin/create/button/">'+
                                '<img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" />'+
                            '</a>'+
                            '<img class="fancybox-image" src="{href}" alt="" />'+
                        '</div>' }
    });
});
</script>

HTML

<!-- Smaple Image: use Full url for large image in href of the fancybox link!   -->
<a class="fancybox" href="//placehold.it/300x300" title="Etiam quis mi eu elit temp">
<img src="//placehold.it/100x100" alt="" /></a>
于 2013-09-01T06:14:58.923 に答える