Add functionality to existing PrettyPhoto jquery lightbox plugin.
The typical way to use PrettyPhoto is to open an image and browse to the next one via arrows and optional scrolling thumbnails.
Some of the images from my gallery have "sub" images from the same project, but I don't want them to appear on the main thumbnails page.
Here is an example based on a 30 thumbnail grid gallery.
Lets say Project X is thumbnail #14 in the gallery.
When you click this thumbnail, prettyPhoto lightbox opens up and display a large image of Project X.
Project X has 9 images of its own (not shown in the 30 grid).
I would like to have these appearing as 9 thumbnails at the bottom of the large Project X image so you can browse through them.
Once you reached image #9 from Project X, I want the gallery to advance to #15 from the main grid gallery.
Currently with prettyPhoto, it is possible to have multiple galleries in one page by giving them a different name but they are not continuous or connected to one another. Also, if you use the scrolling thumbnails option, it will show the entire gallery. I need the these scrolling thumbnails to display only the (hidden) images related to the current project.
The current html in gallery mode looks like this:
What you would need to do is add parameters to the script so I can indicate when an image have multiple "sub" images and how many.
Probably something along these lines:
Then we need a way to tell where are these 9 images. That would be great if the script could intelligently know that the additional images are named project_x_02.jpg, project_x_03.jpg... and placed in the same folder as the main image.
When you click the Next arrow, it would jump to image 15 from the main gallery.
If you want to see all 9 images, you have to use the scrolling thumbnails.
Another approach would be to use a separate gallery in an iframe.
This might be easier, but I need to make sure the iframe is resized to content dimensions so when you resize your browser the iframe popping up via prettyPhoto doesn't have scollbars. Another issue with iframes is that it doesn't show the next and previous arrows with prettyPhoto.
This is for a personal project and I just need the existing prettyPhoto script modified. I can take care of the rest.
No css or website implementation needed.
Additional Project Description:
11/09/2012 at 11:53 CLST
Please see the attachment to see the code intended in the description.