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
Infrastructure as Code – The Wrong Way
You are probably familiar with the term “infrastructure as code”. It’s a great concept, and it’s gaining steam in the industry. Unfortunately, just as we had a lot to learn about how to write clean […]
Snowflake CI/CD using Jenkins and Schemachange
CI/CD and Management of Data Warehouses can be a serious challenge. In this blog you will learn how to setup CI/CD for Snowflake using Schemachange, Github, and Jenkins. For access to the code check out […]
How to get your pull requests approved more quickly
TL;DR The fewer reviews necessary, the quicker your PR gets approved. Code reviews serve an essential function on any software codebase. Done right, they help ensure correctness, reliability, and maintainability of code. On many teams, […]
Kafka & Kubernetes: Scaling Consumers
Kafka and Kubernetes (K8s) are a great match. Kafka has knobs to optimize throughput and Kubernetes scales to multiply that throughput. On the consumer side, there are a few ways to improve scalability. Resource & […]