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:

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.