Question

我想将pinterest按钮添加到我的fancybox图像

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

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

function() {

});

任何帮助都将不胜感激。

Answer 1

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

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

请记住为大图片使用完整网址，以便在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>

fancbybox pinterest jQuery

1 个答案: