Textpattern tips, tutorials and code snippets

jQuery Image Gallery with next and previous images

Over at TXP Builders we recently had to produce an image gallery for a client in order to showcase the client’s Collections.

One idea we came up with was a gallery that displayed the next and previous images in the same browser window as the main image, partly to aid navigation for the user but also to entice further viewing of the Collection images.

The client did not choose this method but we thought we should share the methodology, which looks something like this:

jQuery image gallery
jQuery image gallery with next and previous images displayed using the jQuery Cycle plugin

The concept

The concept is simple but when we first looked into the idea, there was no obvious way to display the main image with the next image to the right, and the previous image to the left once the user starts to page through the images.

The jQuery Cycle plugin

We looked at the jQuery Cycle plugin which appears to do much of what we needed, but an obvious way of getting next/previous images to display was missing.

However the plugin is so versatile and useful that we eventually settled on the jQuery Cycle Lite plugin to do what we needed.

The method

Here is how it works:

  1. Instead of using one gallery, use three, but offset the images in the next/previous galleries
  2. Page through the three galleries at the same time – #carousel-current, #carousel-prev and #carousel-next
  3. Paging is set to the .next and .prev classes in the jQuery Cycle initialization code
  4. The previous gallery is initially set to display an empty <li> item while the next gallery displays the second image. Once paging starts, the order of the images is retained and it looks like there is only one gallery in operation
  5. The gallery positions on screen are controlled by CSS

Show page

Here is a demo page that showcases the image gallery we created.

Thanks to the very talented James Muspratt who provided the inspiration for this gallery, having come up with something similar in a previous project.

5 Comments Comment feed

  • SF
  • 22 August 2010

AJAX-ZOOM is a multi-talent jQuery gallery with image zoom using image tiles. Link: http://www.ajax-zoom.com

  • lad
  • 27 April 2011

Magnificently thx!

Amazing work, I have a question: When the “carousel” starts or when it reaches the last image, the images that are previous to the current one are not visible, however, they may be clicked. Any fix to that? I tried to z-index the overlay but nothing..

Hi, in the case of this particular demo we built, the image is not built into the #carousel-prev or #carousel-next divs, so that’s why you can’t get it to display.

You’d have to adjust the building of the galleries to get it to do this.

You’re right, thank you very much :)

Add a comment

Use Textile help to style your comments