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.
<span style="color: #008000;"> api_images =['images/fullscreen/image1.jpg','images/fullscreen/image2.jpg','images/fullscreen/image3.jpg'];</span>
<span style="color: #008000;"> api_titles = ['Title 1','Title 2','Title 3'];</span>
<span style="color: #008000;"> api_descriptions = ['Description 1','Description 2','Description 3']</span>
<span style="color: #008000;"> $.prettyPhoto.open(api_images,api_titles,api_descriptions);</span>

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 set_position. If the parameter sent in isn’t ‘previous’ or ‘next’ it sets set_position 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);