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

Changes

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. http://vimeo.com/blog:334
  • 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 🙂

30 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. http://bit.ly/cjbEBL […]

  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?

    Regards.

  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,
    Daniel

  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!

    cheers

  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:

    Hi,

    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.

    cheers!

    /Anton

  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.

    http://forums.no-margin-for-errors.com/discussion/954/prettyphoto-api-and-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
    paul

  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..

    Ciao,
    Tony

  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.

    thanks

  24. Vancouverizer says:

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

    Facebook button is broken for me with the code like that. Changing it to src=”http://www.facebook.com/[…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.

Leave a Reply