fancbybox pinterest jQuery

Question

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

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() {

});

Any help would be appreciated.

Answer 1

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..

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

• remember to use Full urls for the large image so sharing image on pinterest will work

Script and 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>