prettyPhoto 3.0: Beta

March 15th 2010

Here it is! The beta version of prettyPhoto 3.0. Why beta? Because there are several big changes in this version and before making it official, I really want it to be working properly. I tested the usual stuff myself, but I really want to throw it out to the community so you guys can test it.

Summary of changes

  • Ability to initialize multiple prettyPhoto with different settings
  • When opening a gallery in prettyPhoto an inline gallery is presented over the photo. See post thumbnail.
  • Slideshow! See settings in jquery.prettyPhoto.js
  • Changed defaut theme, “facebook” theme is now default.
  • Changed the default speed to fast, feels snappier now.
  • Code optimization, removed about 70 lines of crap.

Download

So you want to test it? You can find the demo page here: http://no-margin-for-errors.com/demos/prettyphoto_3.0/

I suggest you test it on your website, you can find a zip file here: http://no-margin-for-errors.com/demos/prettyphoto_3.0/prettyPhoto_3.0b.zip


Please note that since it’s a beta, you should retest everything on your own to make sure nothing breaks.

Bug reports

Please report any bug in that thread in the forums. I’ll do m y best to get them squashed to release that update as quickly as possible.

Thanks!

115 Responses to “prettyPhoto 3.0: Beta”


  1. Meghan says:

    On both the beta and the current release, when you open an iframe in Prettyphoto, then go to a photo that is larger than the screen, it will not resize and make it so you can’t scroll up or down. I really like being able to display my web projects in the iframe, but it ruins being able to show off screenshots as well.

    Fixing this would be amazing.

    Thank you.

  2. Nejc says:

    Hy! First of all: A GREAT JOB! Keep the good work :). Second, I wonder if it is possible to have prettyPhoto automatically play YouTube content when page is opened? And if it is, is it possible to auto-play it only for a first time somebody loads that particularly page? I tried with &autoplay=1 in link but it doesn’t work…

    TNX!

  3. Brian says:

    Love it! would love to figure out how to link HQ youtube video using &fmt=37 appended so that 1080p is the default youtube resolution.

  4. Sylwester says:

    In prettyPhoto 3.0: Beta is quite troublesome problem. It is this that if you are in the file name uppercase and lowercase letters, the script returns an error: “Image can not be loaded. Make sure the path is correct and image exist”

  5. Hey guys. Really quick question that I have been searching for the answer to and finally decided to ask here. Is there a way to open prettyPhoto using any image map? I have gotten it to work in firefox through some html changes (cnaging to ) but that seems to make it not work in IE and safari. So basically I think the problem is that an area tag won’t read a rel attribute. Anyway, if you know a way I can solve this I would love to hear it. Otherwise great code!

  6. Hi, hope this solves my Problem “Image can not be loaded, please check image path” Yesterday the old Version worked allright and today it won´t work for me. If you wanna see my problem visit our Page: http://www.ledroom.de and choose one of the Pictures to enlarge. Sorry for my bad english, but I´m still learning 😉

  7. Manu says:

    Prettyphoto 3.0 Beta as some quite problem in my website, indead i have this error “Image can not be loaded. Make sure the path is correct and image exist” . I tried the Sylwerster’s solution but i always have the same errors. I check path and images, no problem.

    If you have some ideas.

  8. Carlo Jenab says:

    Enjoyed every bit of your article post.Really looking forward to read more. Much obliged.

  9. Emanuele says:

    Hi
    This plugin is great!

    Is it possible to implement a sort of “panning” or “autoscroll” for very big images?
    I would like to show a very big image (usually bigger than screen size, about 3000×2000 pixel), but showing a fixed size (say, 640×480), then, when the mouse is closing to the box’s edge, the image scroll automatically to show the remain part. Like in the big panoramic images.
    Actually, I tried to use the “iframe option” to show directly the big image. In that manner, you see the scrollbar to scroll the image but you don’t see the prev/next button…
    Thanks for any help (and sorry for my bad english)

  10. A fly on the wall says:

    If you have your page using a set font colour for everything.. something like this in CSS:

    body, html { color: #FFFFFF; }

    It will also change the text color on the prettyPhoto overlay to white, which obviously doesn’t show up against the white background of the facebook theme for instance.

    Could you change it so that the text colors are set for each of the themes by default?

  11. CESAR FILHO says:

    please add a method prettyPhotoReset to permit thinks like this

    [script]
    function load_gallery()
    {
    read_from_ajax(); // read gallery form ajax and append [li] and imgs in DOM

    JQuery.prettyPhotoReset (); // Reset previous gallery

    $(“a[rel^=’prettyPhoto’]”).prettyPhoto(); // Create new gallery
    }
    [/script]

    [ img src=”load_btn.png” onclick=”load_gallery()” /]

  12. Hi, I like this script. Is there a way that we can adjust the width and the height of the window when the page or image display? i really want to adjust the sizes of the images so that i have a fix width and height for all the images.

  13. Krzysztof says:

    Hi, this plugin is greate but have one big BUG. DoubleClick on link make trouble. I read solution on forum but doesnt work. Need help.

  14. Asanka says:

    Hi There,

    There was an issue on line 132:
    setItem = (_getFileType($(this).attr(‘href’)) != ‘youtube’) ? $(this).attr(‘href’).toLowerCase() : $(this).attr(‘href’);

    This would convert the file name to lowercase, which would fail the consequent array check:
    setPosition = jQuery.inArray(setItem, pp_images);

    I got around to that by removing the condition, however, ideally, if the image is actually a broken link, you would want to time-out the loader and close pretty photo.

    Great work by the way .. cracking stuff!

  15. Asanka says:

    Sorry, my bad on the broken link part of the comment .. that works as usual 🙂

  16. Tim Letscher says:

    Hey Stephane,
    I love this quite a bit but can’t seem to get it to function within the site I’m working on. The site has some other scripts running which us jquery 1.2.6.

    I’ve tried using later versions of jquery but they seem to break the other script I’m running for coda slider.js

    What version of jquery do you require for pretty photo 2.5.x or 3?

    Thanks!
    Tim

  17. Denis says:

    Like Tim, I’m trying to use this plug-in because I’m already running jquery on my site, specifically v. 1.2.3. I couldn’t readily find any information on your pages that addresses this important info, that is, the exact version(s) required for the plug-in.

    Likewise, I really can’t make sense of the rel tag that references [pp_gal]. I just need clearer information about how this is implemented since your page doesn’t explain it, at least not that I can see.

    Thanks for your help.

  18. Denis says:

    Actually this is a FF browser message that I continually get when I try to invoke the plug-in, and it appears that others who’ve written here have experienced the same:

    “Image cannot be loaded. Make sure the path is correct and image exist.”

    If only there were more information. I’ve installed dozens of plug-ins before, but I’ve never had such a time-consuming ordeal as I’m having with this one. What have I missed?

  19. Sebastien says:

    Great plugin.. I use it and love it. But the 3.0 beta is utterly broken.. it seems like 95% of us are having the same ridiculous error message “Image cannot be loaded. Make sure the path is correct and image exist.”

    Also it was extremely difficult to get prettyPhoto to play nice with a FLV player. It basically worked fine in Firefox but would not work at all in IE. I eventually had to use a different player inside of an iframe to get it to work in IE.

    I hope the final release of 3.0 is a lot more stable.

  20. Edoardo says:

    Hello, first of all thanks for these amazing plugins!! I used prettyCheckbox in the past and now I’m working on image galleries, and I’m trying to make prettyPhoto work together with prettyGallery, but if I load the 2 css files the display breaks!!!
    Instead of loading the image overlay it display the image behind all the content….

    How can I do that?? I guess it’s possible, but i can’t figure out the right way to do so…

    thanks,
    Edoardo

  21. Hiral says:

    Interesting observation with this error –> “Image can not be loaded. Make sure the path is correct and image exist”

    After Sylwester observed that this error might come if the JPG filenames were mixed case, I decided to change all my jpg filenames to lowercase and it magically worked. I don’t get this error anymore.

  22. Hiral says:

    Just a few things I would like to suggest/point out regarding the new prettyPhoto 3.0b…These findings were observed on Firefox version 3.6.4

    1) After expanding an image and clicking either the previous/next image, the image goes back to “normal” (collapsed) view. Now, when you click the expand icon, it won’t expand the image. You actually have to click the expand icon twice for it to expand the image. I think expand/collapse toggle state is out of sync initially.

    2) When you are browsing the inline gallery and clicking on thumbnails, I noticed that after you click on a thumbnail image, it resets the gallery to the first page. I would think that it would preserve your state and not reset back to the first page of the gallery. So therefore, I commented out the following bit of code in the JS file and also commented out the line where it says –> currentGalleryPage = 0; Not sure if this is the best solution.

    $pp_pic_holder.find(‘.pp_gallery ul li’).each(function(i){
    $(this).css({
    ‘position’:’absolute’,
    ‘left’: i * itemWidth
    });
    });

    Thanks for writing a very creative tool. I’m using it currently to re-develop my website.

  23. Manu says:

    Old version of pretty photo is working well within my premium theme.

    Beta 3.0 does not work.

    First request of gallery is calling the photos:

    without inline gallery & cutting description.

    Second request of gallery: causes an path error (all images pathes are valide).

  24. Steve says:

    Hi

    Does anyone know how to fire up a prettyPhoto gallery from a link outside the gallery div

    For example if I want to create a list of galleries in sub-nav div.

    Thanks

    Steve

  25. Haggy says:

    How do i get prettyphoto once in ‘Lightbox mode’ to initially expand the image to it’s fullest extent without the extra step of pressing the expand button?

  26. Daniela says:

    Hello! I have problems in IE 7 and 8 for use prettyPhoto.js and filterable.js (http://www.gethifi.com/blog/a-jquery-plugin-to-create-an-interactive-filterable-portfolio-like-ours /) By clicking on the image darkens the screen and does not open the big picture.
    I think it is because the two scripts use the attribute rel = “.” Firefox with no problem.
    I looked at the documentation and I realize that I can configure prettyPhoto.js otherwise. to work. Sorry but I am very new at this.

    Translated by Google

  27. Juvastyle says:

    Image cannot be loaded. Make sure the path is correct and image exist.

    I tried to play .mp4 video, it looks it can not do 🙁 only .mov

  28. Helgi Kropp says:

    Hi,
    I have tried to use this plug-in for display the data input form from inline hidden “DIV”.
    For this purpose I have created the hidden “DIV” with several elements “SELECT”.
    Then I used function $.prettyPhoto.open (‘#my-hidden-div’, ‘ Options ‘, “);
    But prettyPhoto clones contents of element DIV instead of shows the original .
    Thus there are problems with access to the cloned elements in various browsers.
    IE6 does not show the cloned SELECT elements at all .
    Whether you can add following features to plug-in for displaying inline content:
    1) Display of the original hidden element, instead of cloned.
    2) showing window immediately without animation (animationSpeed: none)

  29. Eugene Kuleshov says:

    I would like to suggest to change the programmatic API. The current one requires 3 separate arrays for titles, urls, etc. It would be more natural to have an array of arrays like {{title1, url1, desc1}, {title2, url2, desc2}, …}. This would also make it more convenient when code is generated, e.g. by php script. Thanks

  30. Sochi says:

    Works fine, thank you very much, and checked in IE8. FF 3.6.6. Opera 10. chome 5.0.3. Safari 5.0.7xxx

    Everyone who thinks using prettyfoto can see a working example can be at http://solar-tm.ru/sanatorij.php?id=168, long time to establish a similar script (liteBox2). your script is installed perfectly

  31. bosh says:

    great script and very versatile. I’ve used 2.5 and 3 and had no issues. It might be nice for others to include a little more install docs but overall it’s great and even works in IE6 (tho not the rounded corners!!). Cool.

  32. Hi, I’m using prettyPhoto 3 beta for a website and there are some issues with long texts in inline contents (the content overlaps the box) . I’ve solved this resizing the box on changepicturecallback:

    changepicturecallback : function (){
    $(‘.pp_content’).css(‘height’, $(“.menu-en-prettyphoto”).css(“height”));
    }

    I had to add this because I had problems with the gallery controls:
    $(‘.pp_content’).css(‘padding-bottom’, ’30px’);

    I’m also looking for avoiding the content to re-position when scroll, I’ve tried this dirty code but setting it in the prettyPhotoMenuConfig would be better:

    // on the changepicturecallback:
    if (self.pageYOffset) {
    var scrollTopper = self.pageYOffset;
    } else if (document.documentElement && document.documentElement.scrollTop) { // Explorer 6 Strict
    var scrollTopper = document.documentElement.scrollTop;
    } else if (document.body) {// all other Explorers
    var scrollTopper = document.body.scrollTop;
    };
    $(‘.pp_pic_holder’).css(‘top’, scrollTopper+200);

    //on the function call:
    $(window).unbind(‘scroll’).scroll();

    Any ideas? 🙂

  33. usman says:

    I wana to ask

  34. usman says:

    Hi i m using prettyPhoto not beta3.0. i want to know how i can show an html page in the Pretty Box on page load. Let me explain, i want when a specific page is loaded another page would open in that page in the Pretty box.
    Please help me.

  35. Chris says:

    Hi!

    I love this jQuery extension. But neither v2.5 nor v3.0b seem to work with Safari 5. Only the first example gallery on the demo page work. On my own page I have the same problem which occurs with all other demo galleries except the gallery1 demo on http://no-margin-for-errors.com/demos/prettyphoto_3.0/ – The dark overlay comes up but no image or any part of the UI box.

    Any ideas what the problem could be?

  36. John says:

    Nice addon 😀

  37. artshevtsov says:

    I have an issue when using prettyPhoto and prettyLoader together.
    when prettyLoader is activated, prettyPhoto pp_pic_holder stops floating up and down when I scroll page (pp_pic_holder’s top css property does not change)
    there are no javascript errors… prettyPhoto container just stays on one place.
    and i have to say that both plugins are awesome!!! thank you for great work =)

  38. ntduyphuong says:

    Hello everyone. If you get the error “Image cannot be loaded…”, make sure you don’t have multiple cases in pictures’ file name. For example: “picture.JPG” or “Picture.jpg”. ALL should be in lowercase.

    If you use hot links from other websites and cannot rename them, there is a workaround for it:

    Open js/prettyPhoto.js.

    Go to line 132, change $(this).attr(‘href’).toLowerCase() to $(this).attr(‘href’)

    Then, go to line 670, change pp_images[i].toLowerCase() to pp_images[i]

    That’s it. Good luck 😉

  39. alessio says:

    First of all: great stuff.
    Second, one suggestion: wouldn’t it be nicer to add a “caption” attribute so to use the “title” one to normally display content titles?
    Using prettyPhoto (2.5.6) with no thumbnails (but text links instead), I seem to have found no way to add titles to my pics and videos—the ALT attribute isn’t recognised in anchor tags, nor it works in SPANs.

    cheers

  40. javi says:

    I love 3.0 new features!!! and I love you!! XD thanks!!!

  41. Mike says:

    Hi,

    love it!!!

    Quick question though how do i launch an iframe & inline content from javascript opposed to a link?

    Thanks,
    Mike

  42. Mike says:

    seems obvious when you think about it.. just use the open syntax

    Awesome!

  43. Londeren says:

    $.prettyPhoto.changePage = function(direction){
    ……

    $(‘a.pp_expand,a.pp_contract’).fadeOut(settings.animationSpeed);
    };

    replace on
    $(‘a.pp_expand,a.pp_contract’).fadeOut(settings.animationSpeed);
    $(‘a.pp_contract’).removeClass(‘pp_contract’).addClass(‘pp_expand’);
    };

    when you resize image on full size and click next or prev, this image resize only after 2 clicks.
    P.S. sorry my worst english

  44. tutoriale pc says:

    First of all, thanks for this wonderful lightbox clone.
    I’ve changed the js in a way that will collect images from a class attribute, not rel attribute. There is a way of starting $(‘a.prettyPhoto’).prettyPhoto(settings); without the object $(‘a.prettyPhoto’)? i would like to start each photo onclick event with an array of images collected manually. I have 2 sets of photos and i want them to open separately. On some pages i have even three sets. The code i have until now is:

    $(function(){
    var settings = {
    animationSpeed: ‘normal’,
    opacity: 0.60,
    default_width: 500,
    default_height: 344,
    counter_separator_label: ‘/’,
    theme: ‘facebook’,
    hideflash: true,
    modal: false,
    }
    $(‘a.lightbox’).prettyPhoto(settings);

    $(‘a.lightbox_poll’).click(function(){
    var obj = $(‘a.lightbox_poll’);
    var img = $(‘a.lightbox_poll’).attr(‘href’);
    var title = $(‘a.lightbox_poll’).attr(‘title’);
    images = [img];
    titles = [title];
    descriptions = [”];
    $.prettyPhoto.open(images,titles,descriptions);
    return false;
    });
    });

    The first set is $(‘a.lightbox’), and the second set is just one image.

  45. Hakan says:

    Does not work in Internet Explorer. All images are being listed vertically and with no option to scroll. It works perfectly in all other browsers though. Please, how do I make it work properly in IE? Thanks,

  46. Patrick says:

    From what I can gather IE7 in it’s infinite wisdom handles attr(‘href’) differently than other browsers. In my case it’s pulling the whole URL, rather than just the hash. I was able to consistently pass only the hash for inline content using this snippet from stack overflow:

    var hrefArr = $(this).attr(‘href’).split(‘/’);
    var id = hrefArr[hrefArr.length-1];

    I needed to update prettyPhoto.js in two places, around line 132 and 660, for this to work for me. Your mileage may vary though…

  47. I was having problems with having to click the resize button twice for it to actually resize, but Londeren’s fix above worked well.

    Only other problem I’m seeing is if you double click on the image.

  48. Seth says:

    ^Patrick. Can you show me a link where you have inline content working in IE7? And in the PrettyPhoto js i do not see any of the code you mention? This is working great for me in every other browser, but IE7 just gives me the “Image can not be loaded. Make sure the path is correct and image exist” error.

    thanks!

  49. Hi :o)

    using 3.0 beta

    First thanks for all the great tools for making websites prettyer.

    I experience 2 issues that keep bugging me and I would like some help please.

    First problem is an opasity problem in MS IE
    I have tried several ways to make the opasity 0.8 work in IE, but no luck. it just shows a 100% black background.
    Its weird cause I can see it works perfectly on your demo.

    Here is how you see my problem:
    open IE
    visit http://www.petfoodnord.dk/pdinf-hundefoder-adult-rex-royal-adult-15-kg-zplit/products_id/179
    put 2 products in basket, and look for a red banner in right side of the screen (bonus)
    click on the red banner and you will see the prettyphoto popup with the opasity problem

    I really hope to get help, thanks :o)

    Michael
    Denmark

  50. reg. my previous comment

    Its fixed now.

    It was my IE that needed to be cleared cache and temp files deleted. And now it works like a charm.

    Thanks :o)

Leave a Reply