jQuery lightbox needs additional functionality

CLOSED
Bids
16
Avg Bid (USD)
$137
Project Budget (USD)
$30 - $250

Project Description:
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.

I need the PrettyPhoto javascript to be modified so I can add a few options/parameters when adding pictures.
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.

Thanks

Additional Project Description:
11/09/2012 at 11:53 CLST
Please see the attachment to see the code intended in the description.

Skills required:
CSS, HTML, Javascript, jQuery / Prototype, Website Design
Additional Files: prettyPhoto+details.rtf
Hire velcrolog
Project posted by:
velcrolog Canada
Verified
Public Clarification Board
Bids are hidden by the project creator. Log in as the employer to view bids or to bid on this project.
You will not be able to bid on this project if you are not qualified in one of the job categories. To see your qualifications click here.


$ 155
in 1 days
$ 180
in 3 days
$ 160
in 2 days
Hire Soolved
$ 160
in 5 days
$ 200
in 3 days
Hire LightITGroup
$ 110
in 7 days
Hire sydcode
$ 50
in 3 days
$ 90
in 5 days
$ 220
in 8 days
$ 120
in 5 days