Vanilla 2

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: http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/documentation/

Thanks

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?

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.

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.

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) ? jQuery.map(matchedObjects, 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

$.prettyPhoto.open = 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++) {
if(!pp_thumbs[i].match(/\b(jpg|jpeg|png|gif)\b/gi)){
...
}else{
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(){
...
switch(_getFileType(pp_images[set_position])){
case 'image':
...
// Preload the neighbour images
//nextImage = new Image();
//if(isSet && set_position ...
//prevImage = new Image();
//if(isSet && pp_images...

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.

The first part has been done.
Example you can look here: http://www.kievchurch.org.ua/Photos/Weddings/NikEug/default.aspx

Fixes:
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: http://www.kievchurch.org.ua/Scripts/PrettyPhoto/js/jquery.prettyPhoto.js

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.

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
>>> http://forums.no-margin-for-errors.com/discussion/1558

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.

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 vk.com and in other social networks) Old links should work well. ( vk.com doesn't allow "!" "[" "]" in links :( )
It was needed for me because many my site's visitors use vk.com.

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

Script: http://www.kievchurch.org.ua/Scripts/PrettyPhoto/js/jquery.prettyPhoto.js
Css: http://www.kievchurch.org.ua/Scripts/PrettyPhoto/css/prettyPhoto.css
Live demo: http://www.kievchurch.org.ua/Photos/Weddings/NikEug/default.aspx#pp_lb/mg/11/

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.

Lee

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

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

I sent you a private message

Yes.

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!

Lee

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

Added vk.com "like" button for "vkontakte.ru".

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

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 @ www.burntheparty.com

Thanks!

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

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:

http://mywptestingsite.dreamhosters.com/ // 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"

http://sfwindsports.com //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.

HTH

Lee

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.

It's not working with IE8 with WINXP

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