jQuery lightbox needs additional functionality

This project received 16 bids from talented freelancers with an average bid price of $137 USD.

Get free quotes for a project like this
Project Budget
$30 - $250 USD
Total Bids
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 [url removed, login to view], 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.


Looking to make some money?

  • Set your budget and the timeframe
  • Outline your proposal
  • Get paid for your work

Hire Freelancers who also bid on this project

    • Forbes
    • The New York Times
    • Time
    • Wall Street Journal
    • Times Online