15 jQuery Image Slider & Gallery Solutions

Image presentation is an essential part of web design. And there is a huge amount of different solutions to choose from – not least jQuery offers some beautiful and practical image slideshow and gallery solutions to enhance your website. In this article we are going to take a look at some of those jQuery solutions.

Cashrevelations.com presents a selection of 15 jQuery Image Slider & Gallery Solutions – 15 jQuery techniques to help you structuring and effectively enhance the essential image presentation on your site. All these jQuery solutions are presented with demo.

15 jQuery Image slider & Gallery Techniques

1. Fullscreen Slideshow with HTML5 Audio & jQuery
In this tutorial you will learn how to build a fullscreen photo slideshow to illustrate a New York picture series. We will add sounds with the HTML5 audio element in order to give life to the gallery and try to recreate the ambient of this vibrant city.
View Demo

2. jquery.mb.bgndGallery – jQuery Plugin
With this jQuery plugin you can make suggestive slide show of images as background of your page; the images will adapt their size to the window size fitting always at the best. You can navigate the gallery with your keyboard or with a displayed control panel.
View Demo

3. Photobooth With PHP & jQuery & CSS3
In this pedagogic and fun tutorial by Martin Angelov, you will be building a jQuery and PHP powered photobooth. It will allow your website visitors to take a snapshot with their web camera and upload it from a neat CSS3 interface.
View Demo

4. Animated JavaScript Slideshow
This dynamic JavaScript slideshow is feature packed and under 5KB. A few features include description support, link support, no naming restrictions, portrait image support, graceful degradation and active thumbnail status.
View Demo

5. Supersized 3.1 jQuery Plugin
Supersized is a fullscreen background slideshow built using the jQuery library. Supersized just got rewritten from the ground up. It’s faster, with even more options, animations, and added Flickr support.
View Demo

6. Making A Flickr Powered Slideshow – jQuery
This tutorial shows you how to develop a jQuery plugin that will make it easy to create presentations from your Flickr photos – by using Flickr’s API and YQL to fetch the photos, after which it will create the markup of the slideshow and listen for events.
View Demo

7. Image Rotator With Description
Although there are many great plugins already, this tutorial will help you understand how the image rotator works and helps you create your own from scratch – with help of this tutorial by Soh Tanaka, jQuery and CSS.
View Demo

8. Image Wall With jQuery
The idea is to scatter thumbnails with different sizes on the page and make a ribbon with description slide in when we click – when clicking again on the thumbnail, the ribbon will close and open a large version of the image.
View Demo

9. BarackSlideshow
BarackSlideshow is a practical, very tiny and lightweight slideshow script, that takes the power of MorphList to easily enhance visualization and navigation of the images. With ‘transition’ option – slide or fade, or a function that returns any of those values.
View Demo

10. Sweet Thumbnails Preview Gallery – jQuery
In this nice tutorial you will learn how to create an image gallery with jQuery that shows a preview of each image as a little thumbnail. The idea is to hover over the slider dots and make the regarding thumbnail slide into the previewer.
View Demo

11. Modern Gallery With Raphael & jQuery
In this simple tutorial by Marcin Dziewulski you will learn how to create a stylish and modern gallery with a very attention catching animation effect using the small Raphael library and also jQuery and some CSS.
View Demo

12. Sliding Boxes And Captions With JQuery
All of these sliding box animations work on the same basic idea. There is a div tag (.boxgrid in my css) that essentially acts as a window where two other items of your choosing “peek” through.
View Demo

13. Hover Slide Effect with jQuery
In this tutorial you will learn how to create a neat hover and slide effect with some images using jQuery. The main idea is to have an image area with several images that slide out when we hover over them, revealing other images.
View Demo

14. Animated Portfolio Gallery with jQuery
In this tutorial you will learn how to create an animated portfolio gallery with jQuery. The gallery will contain a scroller for thumbs and a content area where we will display details about the item. The image can be enlarged by clicking, making it appear as an overlay.
View Demo

15. Fullscreen Gallery With Thumbnail Flip – jQuery
In this tutorial you create a fullscreen gallery with jQuery. The idea is to have a thumbnail of the currently shown fullscreen image on the side that flips when navigating through the images. The big image will slide up or down depending where we are navigating to.
View Demo

The different jQuery items presented here in this article are not in any particular order – and Cashrevelations is not by any means whatsoever affiliated with any of the authors.