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:
- Instead of using one gallery, use three, but offset the images in the next/previous galleries
- Page through the three galleries at the same time –
#carousel-current, #carousel-prev and #carousel-next
- Paging is set to the
.next and .prev classes
in the jQuery Cycle initialization code - 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 - 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.
AJAX-ZOOM is a multi-talent jQuery gallery with image zoom using image tiles. Link: http://www.ajax-zoom.com
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 :)