fancbybox Pinterest的jQuery的

我想對Pinterest的按鈕添加到我的fancybox圖片fancbybox Pinterest的jQuery的

我把我的getScript加入功能在beforeLoad和fancbyox的後負荷功能，但我不知道如何設置數據引腳hover =「true」

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

function() { 

});

任何幫助，將不勝感激。

來源

2013-09-01 Mat Kay

可能這有助於http://stackoverflow.com/a/12943117/1055987 – JFK

pinit.js腳本無法連接點擊動態HTML注入..因此，作爲一種解決方法，圖釘按鈕只會在彈出打開頁面份額..

我用的fancybox模板選項到銷按鈕添加到圖片框，並增加了其他jQuery代碼來處理的fancybox懸停，然後點擊圖釘按鈕的事件

記得使用完整的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>

來源

2013-09-01 06:14:58

fancbybox Pinterest的jQuery的

回答

相關問題