prettyPhoto 3.0 is live.

September 15th 2010

prettyPhoto 3.0 has been in the work for quite a while now. The latest update (2.5.6) dates back from January. So it has been in beta for quite a while a it is now ready for prime time.

Project Page Documentation


I fixed some stuff, changed some setting but most important, I’ve added features that have been lacking for quite a while. See the full (color coded!) changelog below.

  • Added: Keyboard event bindings as a setting.
  • Added: Inline galleries.
  • Added: Multiple prettyPhoto with different settings on one page.
  • Added: Slideshows!
  • Added: Custom markup support (will write a tutorial soon)
  • Fixed: Vimeo video ID parsing.
  • Fixed: Double click causing a where prettyPhoto would open without the faded background.
  • Fixed: Bug when an image would not resize after opening an iframe.
  • Fixed: Image resizing issues when allow_resize is set to false. Images now center properly.
  • Fixed: “Image cannot be loaded” message bug. Removed the toLowerCase, a bug I introduced…can’t really say why I did that 🙁
  • Changed: Vimeo video now uses their new universal player.
  • Changed: Default theme, now facebook.
  • Changed: Default speed, now fast, feel snappier.

To tie in with this release, I also created a new FAQs page. Some of you had recurring problem, so I’ll try to cover most of them in that page.

The future

Also, either subscribe to my RSS feed or my Twitter feed because I’ll be launching a “tutorial” series soon. These tutorial will be to help you cover more advance ground using prettyPhoto.

As usual, I hope you like to projet, feel free to comment, contribute, donate 🙂

56 Responses to “prettyPhoto 3.0 is live.”

  1. […] This post was mentioned on Twitter by pL, Stephane Caron, matiere*, Shopify Concierge, montrealhackers and others. montrealhackers said: prettyPhoto 3.0 is live. […]

  2. Udo says:

    Great work, first of all. The new version is great, and facebook as standard-theme was good choice.

    Unfortunately are both, 2.5.6 and 3.0 Beta broken in Internet Explorer 9 Beta 1, delivered yesterday.
    It works, since i removed .pp_content { height: 40px; } (css/prettyPhoto.css, line 231)

    Second issue: The content container is shown on the second half of the screen, it seems that _center_overlay fails. Interestingly it only fails when loading the image, and after you scroll it is fixed. If you switch to “Compatibility View”, the content resizes fine after loading.

    Last but not least are arrows shown instead of all gallery previews.

  3. Well, the content container is shown on the second half of the screen, it seems that _center_overlay fails. Interestingly it only fails when loading the image, and after you scroll it is fixed. If you switch to “Compatibility View”, the content resizes fine after loading. But it looks great… i will put it in!!

  4. Beben says:

    this web always give an awesome product 😀
    thanks a lot…:)

  5. HeNtEs says:

    I trying insert input text field to Inline content div, but i cant write to input field when PrettyPhoto opened 🙁

    Inline content 1

    Its Bug or what?


  6. Daniel says:

    Wow, this script is awsome, thanks a lot for sharing!

    I just integrated it in my website with 5 photoslideshows on one page an found a small bug. When you start the slideshow (automatically or not) and don’t stop it before closing the fotoframe, then it does not start the slideshow again properly when you move to the next photoslideshow. This is because “pp_slideshow” is not set to “undefined”.
    Fix: In “$.prettyPhoto.close” function you have to replace the “clearInterval(pp_slideshow)” with “$.prettyPhoto.stopSlideshow()”. In the uncompressed version 3.0 this is in line 408.

    With best regards,

  7. btr says:

    Great work !
    …but there is a bug if you double click on close button. 😉

  8. ct3n says:

    need help, i’m bad in javascript. i want to hide/replace the bottom nav and replace a square buttons as pagination.

  9. Rene says:

    Really great script!

    i love the resizing capabilities for viewports/browser views smaller than the width/height of the image!


  10. […] a fantastic job with his prettyPhoto jQuery plugin, (more Stéphane projects) even more so with the 3.0 release which will be implemented in WP-prettyPhoto soon. This plugin automatically makes all self-linked […]

  11. Anton Andreasson says:


    First: Great update! 🙂

    I just thought I should share some minor css related “bugs” that I found when installing just one of the themes (dark_square).

    In the CSS for dark_square there are references to dark_rounded. But, when I changed them to their right name, I got a background repeat error. So, removing the following lines, which actually are unnecessary(?) for this theme got it working again:

    div.dark_square .pp_content_container .pp_left { background: url(/i/prettyPhoto/dark_rounded/contentPattern.png) top left repeat-y; } /* Left Content background */
    div.dark_square .pp_content_container .pp_right { background: url(/i/prettyPhoto/dark_rounded/contentPattern.png) top right repeat-y; } /* Right Content background */

    Also, I read that the ‘facebook’ theme is default, but I found two references to light_rounded(?) that I had to change too. Those should probably defaulted to the ‘facebook’ theme too, I guess.



  12. Anton Andreasson says:

    Oh, one more thing: Using the arrow keys don’t clear the timeout the same way clicking prev/next does, at least as far as I can see. So, moving next after nine seconds results in a new image after another second (if slideshow timing is set to 10 seconds)

  13. newyorkprogrammer says:

    prettyPhoto 3.0 breaks when using jQuery 1.4.4.

    jQuery 1.4.3 worked OK.

  14. McBenny says:

    Hey, a very nice and easy to use plugin but there is a great lack of multilingual support !
    I’m always obliged to tweak the plugin, both JS and CSS add a multilingual support, ain’t it bad ?

    It would be very easy to add some language files or even a simple array of translations (as there are very few words needed), and some directories with seperated images for those embedding texts.

    I think it would be also cool to have both production and compressed versions in the same archive and that files bear different names, in order to have them in the same folder without any annoyance.

    That’s it for the to-do-list 😉

    Cheers !

  15. paul says:

    Thanks for the gread work!

    my version 3.0.1 has a problem with IE7/IE8, in Firefox and Safari is perfect.
    I will play vimeo videos on my site, but IE not will open the prettyPhoto box.
    IE say everytime:
    Message: ‘$pp_pic_holder.find(…).0’ is Null or no Object
    Line: 292, Char: 6, Code: 0

    The Firefox javascript console say: Warnning: assignment to undeclared variable $pp_pic_holder…line: 688

    What can I do?

    best regards

  16. Tony_P says:

    Anyone seeing a problem when viewing on an iPhone with Safari?

    Zooming into the image causes the image to jump to the right of the screen, then it is impossible to advance to the next image. Each time you move over to right to see the zoomed image, it jumps right again..


  17. Mark says:

    Same here.. iPhone issues:

    1) As Tony mentioned, the lightbox jumps right of the screen if zoomed in, and zooming out is useless becuase you cant read it.

    2) Quicktime doesn’t work on an iphone, using this lightbox..

    any solutions?

    – Mark

  18. MacAmbulance says:

    I fixed the position of the pretty photo element using the following :

    declare custom iOS stylesheet :


    then in ios.css :

    .pp_pic_holder {
    top: 20px!important;
    left: 20px!important;

    I’m using wp-prettyphoto so the div class name might be different but the idea still holds to declare an iOS specific stylesheet then fix the position of the prettyphoto div. It seems the constant resizing of the iPhone screen messes with the positioning

  19. MacAmbulance says:

    edit :

    <link rel="stylesheet" type="text/css" href="/css/ios.css" media="screen" />
    is the CSS code in the header

  20. MacAmbulance says:

    dammit! third time lucky :

    <link rel="stylesheet" type="text/css" href="/css/ios.css” media=”screen” />

  21. MacAmbulance says:

    FML i can’t post the php code here, it boils down to

    if ( (ereg(‘iPhone’,$_SERVER[‘HTTP_USER_AGENT’])) || (ereg(‘iPod’,$_SERVER[‘HTTP_USER_AGENT’])) ) {

    <link rel="stylesheet" type="text/css" href="/css/ios.css” media=”screen” />


  22. Very useful content, I’ll link to you! Thanks.

  23. franky goes to hollywood says:

    good tip for IOS CSS but how can i overwrite it for normal browsers. because now, the IOS CSS is always running. but proportionally, the margins are not right for a 24in screen with 20px spacing.


  24. Vancouverizer says:

    Is the following a typo?
    part of line 93:
    src=”//[…more code here…]”

    Facebook button is broken for me with the code like that. Changing it to src=”[…more code here…]” should fix it.

  25. Avo Sarafian says:

    does not handle Vimeo links with “Https”… i fixed the regular expression to best fit, so i thought i’d let the public know 🙂 cheerio

  26. If you would like to take a good deal from this post then you
    have to apply these strategies to your won webpage.

  27. Did you find a way to solve the problem with the moving pics on iOS? I don’t have ios.css and can’t do the changes which were recommended here, is there a package where that file can be found?

    Thanks for your help

  28. Don says:

    Anyone finding a Javascript error using IE9 “Microsoft JScript runtime error: ‘Array’ is undefined” when loading the content for a second time when the social_tools are enabled? Seems to be an error in the Twitter script.

    If I disable social tools (social_tools: false html or false to disable */), I don’t get the error no matter how many times I load and hide the popup (in my case, a google map).

  29. I was complying with in support of this info for last 10 hrs on the web and lastly step in to the web
    page on Pre-launch Mumbai projects. I can’t express my state of mind after
    located this blog post currently. In fact your blog site is impressive as
    well as it is so rewarding. This blog aid me
    transform to the greatest worth meant for my property.

    I ll share it by means of my precious ones that they could share their mindset in build-up believed likewise publish this too.
    Thank you so much for the wonderful blog site.

  30. Hi,
    Its a great script i was looking for this..but finallly i got it here. keep the good work up….thanks

  31. TweakBox says:

    Prettyphoto can be installed now on your mobile device using TWEAKBOX

  32. karry says:

    When i visited the given place i enjoyed very much in playingt roblox which is the best entertaining multiplayer game with a lot of enjoyment.

  33. Quickbooks Customer Support Number
    It is due to their way and technique of solving their caller’s problems that the callers contact them again and again whenever required.

  34. usps tracking says:

    I like your post, thanks to which I learn and know more. Thank you for sharing this article.

  35. Puspack says:

    book international and domestic ticket online from Puspack
    click on the website and get cheap flights tickets

  36. asianfanfics says:

    I have read through other blogs, but they are cumbersome and confusing more than your post. I hope you continue to have such quality articles to share with everyone! I believe a lot of people will be like to read this article!

  37. neil jakson says:

    Excellent article! We are linking to this particularly great article on our website. Keep up the great writing.

  38. Richestsoft says:

    Top Mobile App Development company in India

  39. Hello!! Great post. I like your article. keep posting.

  40. Hey, I read your full post, This is really a awesome post. Thanks for sharing it.

  41. Hey I am a regular user of your blog

  42. Thanks for the sharing this blog with us. I like it very much.

  43. We Offer Best Organic Food.

  44. We Offer Best Organic Food

  45. David Bagga says:

    Nice blog! This gives very important information.Thanks for sharing visit at ”how to become a medical sales rep

  46. Simsii specializes in creating and producing high-end disposable syringe filters and that are easy to use and will serve all your laboratory filtration needs.We offer a wide variety of and pore sizes, as well as a selection of filter diameters to handle any sample volume.

  47. thank you so much for this post and I would like to share one of the best travel agencies in Dubai and which offers the best tour packages.
    dubai tours and travels

Leave a Reply