fancbybox pinterest jQuery [英] fancbybox pinterest jQuery

问题描述

我想在我的fancybox图片中添加pinterest按钮

I would like to add the pinterest button to my fancybox images

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

I am putting my getscript function in the beforeLoad and the afterLoad function of fancbyox but I don't know how to set data-pin-hover="true"

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

function() {

});

任何帮助将不胜感激.

推荐答案

pinit.js脚本无法将点击附加到动态注入的HTML.因此，一种变通方法是，固定按钮会简单地在弹出窗口.

pinit.js script wasn't able to attach click to dynamically injected HTML.. So as a workaround, the pin button will simply open the share page in a popup..

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

I used the fancybox template option to add the pin button to image box and added other jquery code to handle the hover on fancybox and click event of the pin button

• 请记住对大图片使用完整的url，以便在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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！