PrettyPhoto enhancements, fixes & development
  • Hello

    All started when I wrote this message:
    When I'd tried to use pretty photo on my web site with gallery of 70 images and found that PrettyPhoto is working in a strange case!

    When user selects a photo to view PrettyPhoto starts loading all photos from the page. If user selected the last one in the gallery it could takes minutes for him to see it.

    It takes about a minute to open this photo for preview because this is the last one on the page of 70 photos. So PrettyPhoto loads all 70 photos first and only then show to user the photo user wants to see.

    Is it the case PrettyPhoto working?
    Could you change it to make it working fast and immediately show to user the photo he chose?

    And now here I post all my fixes and new futures.

    Best regards,
  • Could this logic be changed or I need to find another component for my site?
    Because it is completely inappropriate to wait minutes just to see one picture.
  • The reason why it's loading all the images is because of the overlay_gallery.

    You can try to disable it and it should speed things up, it's a setting:

  • Thank you. I'll try it.

    As I could see the correct logic is to load images using queue (as we do in our project). Now PrettyImage tries to load all of them simultaneously. If it uses queue and located 5 images in the queue to load (add new one only after previous is loaded) then user could easy see any picture he selected. If user select new image to see -> its located into the top of the queue (if it is not loaded yet) and loaded first.

    In this case you can preload images and allow user to fast see any of them.
    It is good way to implement image loading in components like this that allow to preload images & fast viewing during the loading.
  • If I turn "overlay_gallery" off PrettyPhoto becomes as any other viewer and stops to be the best one. Because some other viewers support this function of images preview.

    Also it doesn't keep proportions on resize and on the small screen photos looks a little bit terrible. ((

    Is it possible to change it and make it's working on the good way with many photos?
  • Vladimir, I think the issue isn't really related to prettyPhoto but rather to the size of your images - For example looking at this image:
    I'm loading an image of 900KB - This is quite heavy and thus takes a minute to load.

    In order to have faster loading, I would try to pre-load some of these images or simply save these images as optimized for the web-
    For example the image above, saved as JPEG high with a quality of 60 doesn't lose much in the image display and shrinks the size down to ~230KB which would load rather much faster.
  • Sure. One image is loading on my computer during 5 seconds. Its ok for preview.

    I checked prettyPhoto with net monitor and found that it asks for all images simultaneously (browser FF works only using 6 threads). So if user selects the last photo he needs to wait until all of them will be loaded. For this situation in our project we use queue -> that allows user to see photos during this time.

    In case like it is working now it is impossible to see the last one until all of them will be loaded (because prettyPhoto tries to load all of them together).

    The second good idea: why do you need to load all pictures full size? May be you can use small sized that is already loaded? (taking URL not from "A" but from "IMG" tag) In this case loading will be super fast.
  • About the second idea... I already did it on my local computer. Looks fine and works too. )) There is really no needs to load full-size images for overlay gallery, small is more than ok. Even more - loading big will make unnecessary loads to the server.

    So, probably, I'll fix all of the bugs myself and then start using prettyPhoto.
    I found that this is easy to make changes and adopt it to my needs. ))
  • if you do so, please share it. I'm having the exact same issues you described above. The problem is, I'm not experienced at programming so I can't solve it by myself. Could I get your email address or something so I get your fix as soon as you get it working?

    would really appreciate that.
  • Ok. I'll make a post after finishing all changes that I need.
  • Hi,
    While waiting for Vladimir version, you can try:
    Modify the jquery.prettyPhoto.js$.prettyPhoto.initialize = function() {
    // Put the SRCs, TITLEs, ALTs into an array.
    pp_thumbs = (isSet) ?, function(n, i){ if($(n).attr('rel').indexOf(theRel) != -1) return $(n).find('img').attr('src');}) : $.makeArray($(this).find('img').attr('src'));
    pp_images = ... // don't change

    $ = function(event) {
    pp_thumbs = $.makeArray(arguments[0]);
    pp_images = ...

    function _build_overlay(caller){
    // Correction by Vladimir - thanks
    for (var i=0; i < pp_thumbs.length; i++) {
    classname = '';
    //img_src = pp_images[i];
    img_src = pp_thumbs[i]

    It will be better if you resized the gallery image size as necessary, e.g. if the thumbnails is 150x150 better to have a square gallery image.
    It use the original thumbnails to create the gallery overlay.

    I don't know if the previous and next is disabled will make the show faster. For small size pictures it does not have an effect$pp_pic_holder.fadeIn(function(){
    case 'image':
    // Preload the neighbour images
    //nextImage = new Image();
    //if(isSet && set_position ...
    //prevImage = new Image();
    //if(isSet && pp_images...
  • dRachmad, does this solve the "forever-loading" issue without having to deactivate the thumbnails?

    I have very little experience with programming so if you could please explain a little better what to do - I know I have to modify the .js but what do I do exactly? Do I only have to change the pp_thumbs line or the pp_images and pp_titles as well ?
  • Hi Luke,
    You only need to add the 2 lines,
    pp_tumbs = (isSet) ? ... and img_src = pp_tumbs[i]
    and remark //img_src = pp_images[i];
    I give the other as a reference for searching where to put it.
  • Thank you - I'll try it.

    However, i deactivated the thumbnails to see if the lightbox works faster, but it still needs to wait until the whole gallery is loaded on the page before loading the first one. I mean, if the image is loaded on the gallery, I should be able to click on it and see it. Is there anyway to force prettyphoto to load before the whole page gallery is loaded?

    Or does anybody know about a AJAX loader plugin for wordpress that actually works, so users will only see the gallery page when the whole thing is loaded and ready to be clicked by pretty photo ?

    thanks guys!
  • The first part has been done.
    Example you can look here:

    1. Fixed overlay size.
    2. Fixed picture resize mechanism.
    3. Fixed loading "overlay_gallery" from loading full sized images to loading thumbnails.
    4. Added show_buttonsBox attribute (without these buttons it looks much better)

    I'll probably implement image lazy loading latter.
    Download the library you can here:

    Enjoy using. Write me if you have any problems with it.

    For authors: you can find all my fixes using Araxis merge, test and move them into your working copy.
  • Awesome job Vladmir. It looks fine on your website. I'll try it on mine now. Let us know when you get the whole thing done.
  • also, you could add some other fixes written by some of the users here and add it to your fix.

    example: How to make the facebook like ONE per image instead of the entire gallery
  • Now problem. I also prefer to have it on my site.
    I'll do it in some days. (because I can work on this only at evenings)

    I also can see some problems with sending links using "" (The most popular russian-speaking social network). Will fix it soon.
  • What was the problem with resize:
    There was resize not for image but for image with container.
    In my case I have container much bigger that an image (because of long description) so resizing was changing image width/height ratio. This but can be reproduced only on big images when width and height both resize are needed.
  • Awesome work Vladimir! It really improved things for me. Thank you for sharing!
  • Done.
    - Added facebook "like" links for each photo in a gallery. (I'm not using it now)
    - Added params that allows you to turn on/off twitter & facebook separately (I don't use both)
    - Changed URL format (to be supported in and in other social networks) Old links should work well. ( doesn't allow "!" "[" "]" in links :( )
    It was needed for me because many my site's visitors use

    I've tested it but not too much. Write if there are bugs in the code.

    Live demo:
  • It isn't work in Opera. At all! Even more - it crashes Opera. Could be some problems.
    Fixed. - Longer timeout is needed for Opera.
  • Vladimir,
    Thank you very much for this wonderful code modification! It works perfectly.
    I assume we can change the Twitter link to tweet individual photos as well? Would the code be the same as the modified Facebook code?

    A wonderful step forward. Now if we can get the URL to be pretty instead of "#!wp-prettyphoto%20[%gallery_name%]/0/" that would be great.

  • Vladmir, thanks again for such a great fix.

    I still have some issues though. My website has gallery pages with around 500 pictures. I dont want to put pagination on it. So, prettyphoto only opens up after the whole gallery thumbnails from the page are loaded. Is there a way to fix this? It takes forever even if I click on the first one. Would really help me out if you have a solution for this, also.

    Another good add on for the plugin would be a DOWNLOAD button. Do you think you could make this ? Thanks for the help.
  • the suggestion of changing the URL would be great too, if we could remove the name "prettyphoto" from it - plus, when we close the lightbox, the URL in the browser should go back to the default one - instead of the direct link of the last image you opened
  • "I assume we can change the Twitter link to tweet individual photos as well?"
    No problem. ))

    "Now if we can get the URL to be pretty instead of "#!wp-prettyphoto%20[%gallery_name%]/0/" that would be great."
    I have changed URL to be like "#pp_lb/mg/11/" where "lb" is a key name, "mg" is a group name and "11" is a photo name.
  • "So, prettyphoto only opens up after the whole gallery thumbnails from the page are loaded. Is there a way to fix this? It takes forever even if I click on the first one."
    Could you give me online example?

    "Another good add on for the plugin would be a DOWNLOAD button. Do you think you could make this?" No problem I think I can add this. ))

    "when we close the lightbox, the URL in the browser should go back to the default one - instead of the direct link of the last image you opened" I'll add into the my TODO list.

    I plan to work a little bit on it in the middle of this week.
  • Added:
    - After close location link returns to the default one
    - Twitter for each photo

    In plan:
    - Download button
    - Loading thumbnails using events (to allow user open images during loading)
  • I sent you a private message
  • Is the last fix from now already on the ddonwload link?
  • u have an idea on when u will upload the rest of the fixes ?
  • Again, Vladimir, thank you so much!
    However, the Twitter for each photo is not working. I can see in the code where you changed it and set it to work with individual pictures, but for some reason, it still just gives the link to the gallery folder.
    Can you look at it and see why?
    You write beautiful code - so very clear and well marked.

    I look forward to all your improvements! I am trying to implement an easy way to add links (like the download button or other special links) as well as provide a toggle to an inline comment box that people can use to comment on each photo. It would be nice if it hooked into WordPress comment system, but I'm just trying to develop the ability to toggle the text fields at the moment. If you have ideas, I would love to hear them.
    If I finish first, I'll post here!
    Thank you again!

  • The prettybox creators should definetely create a new version with Vladimir fixes. It's a shame that they don't even come here read this stuff. I would feel good about donating to a project that works well and has all the features that my websites would ever need, but they don't seem to see this.
  • "However, the Twitter for each photo is not working. I can see in the code where you changed it and set it to work with individual pictures, but for some reason, it still just gives the link to the gallery folder.
    Can you look at it and see why?"
    Tweeter for each photo is working well. Please check it on my site.
  • Thank you for your quick reply! I see that it is working on your site.
    I solved the mystery of it not working on my galleries. I had pretty permalinks enabled on my WordPress site. The twitter change does not work with those. When I returned to the default ugly permalink structure, the twitter worked perfectly as you designed it.
    I think will try to find a way around that so I can use the pretty URLs.
    Thank you so much again!
  • Added "like" button for "".
  • lukestrike said: "The prettybox creators should definetely create a new version with Vladimir fixes. It's a shame that they don't even come here read this stuff. "

    Stephane (scaron) is very active and responsive on this forum. In fact, he just made and tested some changes to Pretty Photo in the last day (check GitHub), so he continues to be incredibly involved. He is always on the forum responding to questions and problems. To say the creator is not involved and not responsive is simply not true.

    Vladimir's work is great and hopefully some of the code will make it into the next version. Likewise, dRachmad contributes a lot. As do others.
    The point is, this is an active collaborative community and like all successful pieces of open source software, it embraces the contributions of others as well as the originator. The better the original software, the better the quality and continuing development from the community.

    I admire Stephane enormously. I am seriously envious of his own prettyPhoto implementation at Le Massif ( It is also nice that he is patient and works hard to resolve problems. Sometimes changes have a lower priority. Sometimes people have a day job and do the free software out of love. I really appreciate the time, effort and coding that went into this and have nothing but gratitude to Stephane in particular and to other volunteers as well.
  • Lee, this gallery from lemassif is real nice. Is it pretty photo? Why cant we have all those features, like sharing button for many sites and save picture as ??

    Vladimir, do you think it would be easier for you to enable SAVE PIC AS instead of download button? Im desperate for this feature. My website goes online in a few hours, and if I cant figure it out by myself I'll have to use a different photo viewer - what sux real bad.

    thanks guys
  • Hi Vladimir,
    I just want to help lukestrike, but my capabitilities is limited.pp_settings = jQuery.extend({
    markup: ...
    <div class="pp_hoverContainer" id="pp_imgsrc"> \
    <a class="pp_next" ...
    <a class="pp_previous" ...

    $pp_pic_holder.find('#pp_full_res')[0].innerHTML = ...
    $pp_pic_holder.find('#pp_imgsrc')[0].innerHTML = settings.image_markup.replace(/{path}/g,pp_images[set_position]);
    The "save image as" should work, but the pp_next and pp_previous will be erased.
    Do you have any idea?
  • I'm using fancybox temporally while Vlads new fix with download button doesn't come out. By the way, you guys can now check the website online @

  • Rachmad, by checking out the script of lemassif's prettyphoto u cant figure this download thing out ?
  • Luke, Stephane ( screen name "scaron" here at the forum) who is the prettyPhoto developer, is the one who created the Le Massif site. It is custom programming. It does not use WordPress. In fact, Vladimir does not use WordPress either, but does custom sites in ASP. Stephane has a javascript file that calls the download script as well as several others. It is separate from the prettyPhoto.js file. You might want to look at the various scripts he used to create that site.
    I looked at your site and it is fun! However, the fancybox is not working at all. Probably a jQuery conflict or a permalink problem. Try using the "Simple Lightbox" plugin instead. It plays nicely with everything.

  • Lee, that is weird. The fancybox has been working fine here and with other people who accessed the site.

    What browser did you use to visit my website?
  • Hey Luke,
    I used Firefox 4. Here's the breakdown:

    Firefox 3.6.8: works - but funky. No way to close the window.
    Chrome: works
    Opera: works
    IE8 under XP: does NOT work & getting script errors
    IE9: does NOT work
    Firefox 4: does NOT work

    (sorry, I'm not able to access my Safari browser at the moment)

    Note that when I say "does NOT work", i mean that the lightbox window does not popup and show. The raw, unstyled picture will always show.

    One reason for this is also that a viewer had a popup blocker. I ran into that recently with one of my sites.
    prettyPhoto will do what you want even now before a link to download. Unless you have a script preventing downloads, all you have to do is right click and save as. I can vouch that I can do that with your pictures under Chrome. I would be able to do that with prettyPhoto as well.

    Simple Lightbox is a good alternative - as I said, it is pretty happy to do anything.

    Like Stephane (scaron), Vladimir and Rachmad, I am also a designer/developer.
    Here are two simple examples of sites using prettyPhoto under WordPress: // This is a totally basic generic site with no style aesthetics at all. Simply used to show different scripts and format styles and what is possible to clients or to sites I'm helping to "fix" //a productions site. very simple. uses prettyPhoto under NextGen gallery to display galleries.

    They both work across all browsers.
    You will not be able to "save as" or download by our choice, but it is easy to make it so.


  • Yes, there is a problem in IE 8 with
    "Message: Предполагается наличие '}'
    Line: 10
    Char: 1
    Code: 0
  • Hi lukestrike,
    I have studied the lemassif site. It use the old prettyphoto 2.5.2.
    As you can see, the prev and next button is outside the picture, that's why it can still be right clicked, while in pp 3.1.2 the prev and next button is overshadowed the picture.
    BTW, there is a temporary solution in your original post (save as image), but I have not tested.
  • the thing is, even if you reduce the width of the left and right divs, there is still a div behind it that wont allow me to save it . is it that hard to make a download button ?
  • It's not working with IE8 with WINXP
  • Hello! When I click in the Facebook "Like" button, nothing is shared on my profile. Any help?
  • +1 for the main release! awesome mods!

    A nice feature would be disabling the "pp_" in the hash. Tried to modify it on my own in order to share it but couldn't get that happening.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Login with Facebook Sign In with Google Sign In with OpenID Sign In with Twitter