0

我想将 pinterest 按钮添加到我的精美图片中

我将 getscript 函数放在 fancbyox 的 beforeLoad 和 afterLoad 函数中，但我不知道如何设置 data-pin-hover="true"

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

function() {

});

任何帮助，将不胜感激。

4

1 回答 1

1

pinit.js 脚本无法将点击附加到动态注入的 HTML。因此，作为一种解决方法，pin 按钮将简单地在弹出窗口中打开共享页面。

我使用了 fancybox 模板选项将 pin 按钮添加到图像框，并添加了其他 jquery 代码来处理 fancybox 上的悬停和 pin 按钮的单击事件

  • 记得对大图使用完整的网址，这样在 pinterest 上分享图片就可以了

脚本和 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 回答