Open jQuery prettyPhoto API to an image other than the first one

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

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);

About the Author

Scott Bock profile.

Scott Bock

Principal Technologist

Scott is a Senior Software Engineer with over 12 years of experience using Java, and 5 years experience in technical leadership positions. His strengths include troubleshooting and problem solving abilities, excellent repertoire with customers and management, and verbal and written communication. He develops code across the entire technology stack including database, application, and user interface.

One thought on “Open jQuery prettyPhoto API to an image other than the first one

  1. Elizabeth Powell says:

    Thank you so much for this, it was exactly what I needed!

  2. shah says:

    u can use dynamic feature

  3. Roland Hentschel says:

    Hi,

    May be you can help me for my problem with PrettyPhoto as well ?
    I just can’t find a way to pause the slideshow on Mouseover / Hover.
    Is there a way though ?

    thx a lot in advance ( -: roland :- )

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Blog Posts
An Exploration in Rust: Musings From a Java/C++ Developer
Why Rust? It’s fast (runtime performance) It’s small (binary size) It’s safe (no memory leaks) It’s modern (build system, language features, etc) When Is It Worth It? Embedded systems (where it is implied that interpreted […]
Getting Started with CSS Container Queries
For as long as I’ve been working full-time on the front-end, I’ve heard about the promise of container queries and their potential to solve the majority of our responsive web design needs. And, for as […]
Simple improvements to making decisions in teams
Software development teams need to make a lot of decisions. Functional requirements, non-functional requirements, user experience, API contracts, tech stack, architecture, database schemas, cloud providers, deployment strategy, test strategy, security, and the list goes on. […]
JavaScript Bundle Optimization – Polyfills
If you are lucky enough to only support a small subset of browsers (for example, you are targeting a controlled set of users), feel free to move along. However, if your website is open to […]