prettyPhoto is neat little jQuery plugin, that makes it easy to do lightbox style image (or “videos, flash, YouTube, iframes and ajax”) overlays on your page.

Let’s say I have 5 images that I want to popup and order is important, but sometimes I want to start showing the third image. I can use their API to open a prettyPhoto popup.

$.prettyPhoto.open(['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg']);

But that doesn’t open with the 3rd image displaying? I could reorder the array like this: $.prettyPhoto.open([ '3.jpg', '1.jpg', '2.jpg','4.jpg', '5.jpg']);

Sometimes order is important, though. So I want still want the images in order but I just want 3 to be the one that starts large.

Here is all of the documentation you get about using the API.

The public API functions are the following $.prettyPhoto.open('images/fullscreen/image.jpg','Title','Description'); $.prettyPhoto.changePage('next'); $.prettyPhoto.changePage('previous'); $.prettyPhoto.close(); You can also open galleries using the API, just pass arrays to the open function. `apiimages =[‘images/fullscreen/image1.jpg’,‘images/fullscreen/image2.jpg’,‘images/fullscreen/image3.jpg’]; apititles = [‘Title 1’,‘Title 2’,‘Title 3’]; apidescriptions = [‘Description 1’,‘Description 2’,‘Description 3’] $.prettyPhoto.open(apiimages,apititles,apidescriptions);`

Digging into the jquery.prettyPhoto.js source code you can see exactly what is going on in the changePage method. $.prettyPhoto.changePage = function (direction) { currentGalleryPage = 0; if (direction == 'previous') { set_position--; if (set_position < 0) set_position = $(pp_images).size() - 1; } else if (direction == 'next') { set_position++; if (set_position > $(pp_images).size() - 1) set_position = 0; } else { set_position = direction; }; rel_index = set_position; if (!doresize) doresize = true; if (settings.allow_expand) { $('.pp_contract').removeClass('pp_contract').addClass('pp_expand'); } _hideContent(function () { $.prettyPhoto.open(); }); };

Basically, the method is using magic string matching on ‘previous’ and ‘next’ to do a +1 or -1 on the setposition. If the parameter sent in isn’t ‘previous’ or ‘next’ it sets setposition equal to the parameter sent in.

That is great news! Now, since I know the index of the image I want to show I can just call changePage with that value as the parameter, like this:

$.prettyPhoto.open(['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg']); $.prettyPhoto.changePage(2);