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.
<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 &lt; 0) set_position = $(pp_images).size() - 1; } else if (direction == 'next') { set_position++; if (set_position &gt; $(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.

Related Blog Posts
Building Better Data Visualization Experiences: Part 2 of 2
If you don't have a Ph.D. in data science, the raw data might be difficult to comprehend. This is where data visualization comes in.
Unleashing Feature Flags onto Kafka Consumers
Feature flags are a tool to strategically enable or disable functionality at runtime. They are often used to drive different user experiences but can also be useful in real-time data systems. In this post, we’ll […]
A security model for developers
Software security is more important than ever, but developing secure applications is more confusing than ever. TLS, mTLS, RBAC, SAML, OAUTH, OWASP, GDPR, SASL, RSA, JWT, cookie, attack vector, DDoS, firewall, VPN, security groups, exploit, […]
Building Better Data Visualization Experiences: Part 1 of 2
Through direct experience with data scientists, business analysts, lab technicians, as well as other UX professionals, I have found that we need a better understanding of the people who will be using our data visualization products in order to build them. Creating a product utilizing data with the goal of providing insight is fundamentally different from a typical user-centric web experience, although traditional UX process methods can help.