Get individual image src and title for Pinterest in prettyPhoto plugin?

Pinterest is for individual photo images rather than web page URLs. Twitter and Facebook are fine with just the page URL but for Pinterest, each and every individual image URL should be supplied to the "Pin It" button link instead of the page URL.

I'm trying to add Pin It button to the prettyPhoto plugin and thus far everything's set except I don't know how to get the img src and title of each of the individual images in the slide so as to attach them in the "Pint It" link.

What I currently have immediately after the facebook code in jquery.prettyPhoto.js:

<div class="pinterest">
    <a href="http://pinterest.com/pin/create/button/?url='+window.location.href+'&media='+$('#fullResImage').attr('src')+'&description='+$(this).attr('title')+'" class="pin-it-button" count-layout="horizontal" target="_blank">
        <img border="0" src="http://assets.pinterest.com/images/PinExt.png" title="Pin It" />
    </a>
</div>

But neither $('#fullResImage').attr('src') nor $(this).attr('title') are working correctly for some reason. You can view the page here, the script is here. They are 'undefined' and empty.

Can someone please help me get them working? Thanks a lot!

Solution

as you all knows that Pinterest is for individual photo images rather than web page URLs, so we need to do something different like this,

<a href="http://pinterest.com/pin/create/button/?url='+encodeURIComponent(location.href.replace(location.hash,""))+'&media={path}&description={title}" class="pin-it-button" count-layout="horizontal" target="_blank">
    <img border="0" src="http://assets.pinterest.com/images/PinExt.png" title="Pin It" />
</a>

this will not work here on prettyphoto gallery, so now here is the solution,

we have to use the code in script.js when we initialize the prettyphoto.

like this, code

$(document).ready(function(){
    $(‘.prettyPhoto’).prettyPhoto({
        changepicturecallback: onPictureChanged,
    });

    function onPictureChanged() {

    var href= “http://pinterest.com/pin/create/button/?url=”‘+ encodeURIComponent(location.href.replace(location.hash,”")) +’”&media=”+$(‘#fullResImage’).attr(‘src’);

    jQuery(‘.pp_social’).append(“<div class=’pinterest’ ><a href=’”+ href +”‘ class=’pin-it-button’ count-layout=’horizontal’ target=’_blank’><img border=’0′ src=’http://assets.pinterest.com/images/PinExt.png’ title=’Pin It’ /></a></div>”);
}

for complete description, please visit my tutorial page.

Add Pinterest to social media icons in prettyPhoto

i am sure it will help you a lot.

Thanks