How to add Pinterest to social media icons in prettyPhoto

just follow this step:

1.dont delete anything from jquery.prettyPhoto.js

2.Open your page and write your customize script, here

<style type=”text/css”>
.pp_social .pinterest {float: left;margin-left: 5px;overflow: hidden;width: 60px;}
</style>

<script type=”text/javascript” src=”http://assets.pinterest.com/js/pinit.js”></script>

<script type=”text/javascript”>

$(document).ready(function(){
$(‘.prettyPhoto’).prettyPhoto({

});
</script>

3. this is existing script used in script.js, now we are editing this script.

<script type=”text/javascript”>

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

4. and, finally do this stuff.

<script type=”text/javascript”>

$(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>”);

}
</script>

5. important point is to be notice, :

media=”+$(‘#fullResImage’).attr(‘src’)

this #fullResImage  image tag will be found in jquery.prettyphoto.js in pp_settings
image_markup: ‘<img id=”fullResImage” src=”{path}” />’,

6. thats it for now.

7. hope you all would understand.

thanks for view this post, and also keep comment, its give me energy to write this kind of useful  blogs.

4 thoughts on “How to add Pinterest to social media icons in prettyPhoto

  1. webadmin Post author

    Hi,

    you can add this code into your script.js file.
    where you can find this code,

    $(document).ready(function(){
    $(“a[rel^=’prettyPhoto’]”).prettyPhoto();
    });

    or

    $(document).ready(function(){
    $(‘.prettyPhoto’).prettyPhoto({

    });
    });

    just edit this code as per given instructions.

    if you need any email support by us then please tell.

    we will provide.

    thanks

  2. Anonymous

    Thank you for sharing your code. Unfortunately I can’t get it to work. In exactly what files do the code snippets go? Where should they be added? Btw, you have a small typo here: “<img border=’0′" it should be "<img border=’0’" (it doesn't close properly due to a missing apostrophe). Keep up the good work! 🙂

    1. webadmin Post author

      Thanks for your comment.I dont think why its not working at your side.
      anyway, the above code you have to use in your main script.js that has your all js codes in it.

      hope you understand.

      if any issue we can solve it on PM.

Comments are closed.