I love prettyPhoto. Super easy to install. I needed a Pinterest button, though so I had to add one. Here's the code in case you want to bundle it into the script or someone else needs it. I'm going to add Google+ next and I'll post when it's done.
(Note: This discussion board is rendering any HTML tags I enter so I've replaced the triangular brackets with double square brackets for visibility. To use this code do two global search and replaces to transform [[ into a left triangular bracket and ]] into a right triangular bracket.) Single square brackets stay as they are
First off, at the bottom of the web page you need to add a JavaScript line containing the Pinterest js reference as you do whenever pinning (last thing on the page before the [[/body]] tag is best:
Line 205 ( change - replace multiple instances of {location_href} and delay substituting for now) // Rebuild Facebook Like and Pinterest Buttons with updated href if(settings.social_tools){ facebook_like_link = settings.social_tools.replace(/\{location_href\}/gi, encodeURIComponent(location.href)); //$pp_pic_holder.find('.pp_social').html(facebook_like_link); }
Line 267 just makes the substitutions for image slideshows. You could add the same code later on in the switch(_getFileType(pp_images[set_position])) cases for the different media types.
Hi, looking at your website (http://www.tricksyknitter.com), I see that you have also managed to set it up so that the Facebook like button on each gallery image corresponds to that specific image once in Facebook - how did you manage to set this up? It seems to be a common issue, but struggling to find an answer anywhere..
A great help thanks cmjaimet. I think you could clarify the third step around 267 though. After following your steps, their was already a line of code on 267 and your code needs to be added after that - between…
Hey, sorry for the delay. Summer and kids and stuff. => yuleycat, the Facebook is taken care of natively in the original code. I modified it to handle both Twitter and Facebook on lines 208-211
// Rebuild Facebook Like and Pinterest Buttons with updated href if (settings.social_tools) { facebook_like_link = settings.social_tools.replace(/\{location_href\}/gi, encodeURIComponent(location.href)); //$pp_pic_holder.find('.pp_social').html(facebook_like_link); } This executes every time line 184 is triggered which is when a new image is loaded: $.prettyPhoto.open = function(event) {
You're a lifesaver, cmjaimet. Thanks for figuring this one out. I decided I wanted the description from the image box (i.e., the thumbnail link's title attribute) to serve as the default Pinterest description as well. For anyone who's interested, it went as follows:
I have followed these instructions, and have it working beautifully....I have one small glitch however. If I like an image on facebook, the image that appears on facebook is not the one that I liked...
Website is here, www.bespokebakery.co.uk/birthdaygallery/novelties/index.html
Hi there, I am still trying to implement the pinterest button, but I still get the prettyphoto url instead of the url of the full resolution of the image. You can see the problem on any of my slideshow galleries, here ie: http://www.flyawaytrip.com/destinations_new_york.htm
I appreciate any help. Thank you very much.
I have two files prettyphoto.php which has this code: ---------------- <?php extract(get_option('mt_set'), EXTR_OVERWRITE);?>
jQuery(document).ready(function() { window.mt_lightbox = function() { // add the function to a global object like "window.mt_lightbox" jQuery("a[rel^='prettyPhoto']").prettyPhoto({ slideshow: <?php echo ($mt_glb_sshowtime*1000);?>, /* false OR interval time in ms */ /*autoplay_slideshow: false, /* true/false */ opacity: <?php echo ($mt_glb_opcty/100); ?>, /* Value between 0 and 1 */ show_title: <?php if ($mt_glb_title=="true") {echo "true";} else { echo "false";} ?>, /* true/false */ allow_resize: <?php if ($mt_glb_resize=="true") {echo "true";} else { echo "false";} ?>, /* Resize the photos bigger than viewport. true/false */ theme: '<?php echo $mt_glb_theme; ?>', /* pp_default / light_rounded / dark_rounded / light_square / dark_square / facebook */ social_tools: '
' /* html or false to disable */ }); } if(jQuery().prettyPhoto) { mt_lightbox(); } });
There is a problem with your code: {location_href} will be the current page link, not the image link, so you will Like the page on Facebook, not the photo. BUT if I use {media_src} for both facebook and pinterest link, the first one used in your code will be the image link, but the second one will be "{media_src}" like it's plain text. So, how can I use {media_src} two or more times for two or more buttons?