prettyPhoto 3.1.1: Deeplinking, social sharing, win

April 13th 2011

Here’s yet another update that I’m quite proud of. This version introduces 2 new features.

Project Page »Support forums »

First new feature, deeplinking

From now on, every time a prettyPhoto window is opened, the url will be updated. That means that you will be able to share a link to a specific picture. Just follow this link for an example: http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/#!prettyPhoto[pp_gal2]/0/

As usual, this feature is customizable and can be disabled if you don’t wish to use it. The setting is called “deeplinking”. A complete list of settings can be found one the documentation page.

Second new feature, social sharing tools

Social is big, we all know it. So I’ve added social sharing tools straight in prettyPhoto. These tools in conjonction with the new deeplinking feature, allow you to share specific prettyPhoto picture all over the social web.

As usual, this feature is customizable and can be disabled if you don’t wish to use it. The setting is called “social_tools”. You can either customize the social tools markup of set it to false to disable the feature. A complete list of settings can be found one the documentation page.

Bug fixes

This version also fixes several bug, here’s the complete list:

  • Fix IE7 overlay_gallery overlay bug
  • Fix bug when opening percent based media then opening normal sized media, the second opened image wouldn’t be resized.

If you need any support, please visit the support forums.

32 Responses to “prettyPhoto 3.1.1: Deeplinking, social sharing, win”


  1. VSE says:

    Thanks for all the hard work!

  2. damu says:

    Nice plugin. I used this to one of my client’s website but found bug in IE8 where “#!prettyPhoto/0/” is carried over to other pages and start loading videos. have posted in forum as well.

    i like the social sharing tools.

    Great work!

  3. Janek says:

    I got that same problem with IE7-IE8, but with IE9 it was working without any problems. For IE7-IE8 you could comment out

    setTimeout(function(){ $(“a[rel^='”+hashRel+”‘]:eq(“+hashIndex+”)”).trigger(‘click’); },50);

  4. Great plugin. I got the latest (3.1.2) and have a couple of issues. If you ‘Like’ a photo, it passes the base URL. So, my ‘Like’ appears on every image. Checking in FB, I see that it shows I had ‘Liked’ the entire gallery page, not just the individual image. This is in both Dev and Production.

    Secondly, when I ‘Like’ the image it shows the grayed out like button and a number [1]. If I Unlike it via FB, when I return, the number [1] is gone, replaced by the verbiage ‘Be the first of your friends’, yada yada. I imagine that comes from the FB scripts, but the length of the iframe/div causes the text to be cut off.

    I haven’t played a lot with the FB stuff, though I am doing so more now that I am moving our stuff to more of a social media environment. And, it is not a knock on the great work you do on this plugin. I just wanted to comment.

    Thanks again for all of the hard work!

  5. ArtShevtsov says:

    I’ve been waiting for this features. thank you!

    But it’s so important to trigger browser’s history back – previous buttons (javascript:History.back() or previous()).
    When i click back button – url changes – but prettyphoto does not perform any action (shows the same photo)

  6. Haree says:

    Hi,
    I am having a few blogs which uses the Slimbox 2 for galleries. Since it only support images, I like to move to PrettyImages. But I already have a lot of images which uses the rel=’lightbox’ (for single images) and rel=’lightbox-group’ (for multiple images). It seems prettyPhoto will work only if we use rel=’prettyPhoto’ tag. (Slimbox recommends using -groupname instead of [groupname], as the [ ] are invalid for XML / XHTML.) Is there a solution for this situation? It is not possible to edit each image and change the rel attribute. Please let me know whether it is possible to switch to prettyPhoto from Slimbox without changing the existing image attributes.

    Thanks a lot!
    Haree

  7. K.Pieter says:

    Nice, ones i’ll use it. Thnx again.

  8. Matth says:

    FTW, it’s prettyphoto!

    Happily using prettyphoto since Feb. Today I get a request to direct link (deeplink) to lightbox and I’m prepared to say it’s not possible. Super update!

  9. Matth says:

    Oh, except I can’t get it to work!

    1.) I wrote over jquery.prettyPhoto.js with the new version.
    2.) I added deeplinking: true to my jQuery code.

    Am I missing something crucial?

  10. Matth says:

    What I’m trying to do seems impossible.

    It looks like I’m thinking of an absolute URL. These posts about deeplink permalink indicate what I’m thinking is impossible.

    https://github.com/scaron/prettyphoto/issues/59
    http://forums.no-margin-for-errors.com/discussion/1542/deeplinking-permalink/p1

    Although I don’t really see the purpose of a relative “deeplink.” If you’re already on the site, you just add a prettyphoto attribute to your link, and you have a shallowish “deeplink.”

  11. JC says:

    Thank you VERY much for your hard work and awesome tools! I just discovered this, and I’ve been looking for a lightbox that easily loads iframes (correctly) for ages! This is awesome!!!

  12. 3sixty says:

    Awesome pugin! I’ve been looking for overlay deeplinking for a long time.

    is there an easy way to remove all or some of the following deep link URL characters for SEO purposes? If not, would I need to replace the naming with my own choosing in a ton of places in the javascript and html/css?

    #!prettyPhoto[iframe]

  13. 3sixty says:

    Never mind. Figured out that it was just in the rel in a tag and rel in the script before the body tag.

  14. TimR says:

    Please consider removing ‘Ink’ from your site. I’m severely dyslexic and use copy and past a lot when I’m searching for content. It may seem like a small thing to type a few words into a search engine but when you are dyslexic it is a slow and cumbersome process – especially when searching for the name of things, or words with an unusual structure rather than familiar words . (I cant even control the content in this box properly to change the structure of this copy for example) .

    Many thanks,

    Tim

  15. Alex says:

    deeplinking is causing problems in IE when setting callback function to location.reload() – neveretheless its ‘false’ it adds #!PrettyPhoto to URL and opens overlay again (so itsimpossible to close it)

  16. Michael says:

    Love your product, but we need to add Google+ to the social section. Any Advice?

  17. Patrick says:

    awesome :)

    i was prepared to try and get prettyPhoto/prettySociable to work together myself, before seeing this.

    thanks Stephane!

  18. Great article i like it. Thanks a lot :]

  19. Shomrat Gil says:

    Hello, you did a great work on prettyPhoto project.
    But its missing support for FLV videos.
    I made some modifications to your script and add the support for FLV (I send a copy to you mail).
    on “pp_settings” i add :
    flvplayer:’flvplayer.swf’, /* path to flash player to play flv videos*/
    autoStart:true, /* autoStart flv*/
    (I send the flvplayer.swf attached to the email.)
    after “flash_markup” i add:
    flv_markup:”,
    after “case ‘flash':” i add:
    case ‘flvEmbed':
    pp_dimensions = _fitToViewport(movie_width,movie_height); // Fit item to viewport

    flash_vars = pp_images[set_position];
    flash_vars = flash_vars.substring(pp_images[set_position].indexOf(‘flashvars’) + 10,pp_images[set_position].length);

    filename = pp_images[set_position];
    filename = filename.substring(0,filename.indexOf(‘?’));

    toInject = settings.flv_markup.replace(/{width}/g,pp_dimensions[‘width’]).replace(/{height}/g,pp_dimensions[‘height’]).replace(/{flvplayer}/g,settings.flvplayer).replace(/{autoStart}/g,settings.autoStart).replace(/{FlashVars}/g,filename+’?’+flash_vars);
    break;
    on “function _getFileType(itemSrc)” i add:
    else if(itemSrc.match(/\b.flv\b/i)){
    return ‘flvEmbed';
    }

    hop you will considered this changes in the next var (-:
    Gil

  20. Hello,

    First thanks you to had make this gallery much more better than the one included in Blogger. I use it on my blog and it feet perfectly with it.

    Noneless I have a problem that I don’t know how to solve. I explain: The blogger template I use offer me a navigation with drop down menu. It was working normaly since I had the code of PrettyPhoto.

    Actually I had to choice if I want enable prettyphoto or my custom navbar..

    I don’t have any knowledge in HTML and other languages but I made some modification to see from where the probleme came. I appears this line disable my drop down menu:

    I don’t know what to change to make both working. Some name, indice?

    PS: It doesn’t make the problem only for my template, I test it in several blogger template and all the time it’s OR navbar OR PrettyPhoto :/

    Thank you

  21. Actually I can’t show the line on my comments. They are the 3 lines put before /head where we call 3 files.

  22. devarni says:

    Excellent work! After some testing also the only gallery which works in a wordpress custom environment (custom, theme, custom plugins and stuff)

    A small bug. JQuery Tool scrollable (the slider stuff) will not be hide (or changed to a lower z-index) . This must be done manually. Not sure why but it seems there is a conflict or it has something to do with the actual jQuery? But no error message in the Firebug console, so no idea why.

  23. Steve Jones says:

    Thanks for the great scripts, using them has made my life so much easier!

  24. Serge says:

    You are great!!!

  25. Marcia says:

    lol got it^^ IE doesn’t accept whispteace in the title attribute of the javascript > Capital FM Webradio doesn’t work, when I only take Webradio it does what a shitty piece of code is this how much better would the world be without IE??What I’m asking myself is if the whole title attribute via javascript thing could be removed and just give the the page that is loaded into the pop up a normal title attribute, would that be taken as the same value?? Didn’t try it yet, but could maybe work =)

  26. Kyryll says:

    Hi!

    This is an awesome plugin!

    Is it possible to auto close the box after a video has finished playing? I’m using it with a Vimeo video.

    Thanks for your time,
    Kyryll

  27. Julian says:

    Simple implementation and lightweight. But REALLY needs to be fixed for iPhone! The positioning is out of wack and makes impossible to show on other devices.

  28. civali says:

    I just bought that template http://www.template-guide.com/preview/4978/portfolio_4columns.html and photo galleries are overlapping images with prettyPhoto. Help is appreciate if anyone knows how to fix it. Thank you.

  29. Tom says:

    Hi, first of all, thank you for writing this plug-in, its awesome! Just ran into one issue however, in IE10 when loading videos in PrettyPhoto into iFrame, the PP window does not close when clicking outside of it, it only closes if you use the close (“x”) button. It worked fine in IE9. Any suggestions?

  30. Mike says:

    Hi , I was wondering, how can I modify the image holder so that you can prevent the desciption link to open in a separate browser window. I am not good in javascript.

Leave a Reply