jQuery image sliders and galleries are very popular and you can find a lot of examples on various blogs and especially on portfolio sites, moreover, they are useful for any other type of web sites for displaying different images and photos. Now you even don’t need to have some high skills in Javascript or jQuery, you can improve your site simply by following these tutorials. In this round-up we’ve gathered a set of awesome and really easy to understand new free tutorials, plugins and ready-made solutions which will help you in adding photo galleries or sliders with ease.
TN3 Gallery is a jQuery image gallery with slideshow, transitions effects, multiple album options, CSS skinning and much more. It’s compatible with all modern desktop and mobile browsers.
Download
jQuery.popeye is an advanced image gallery script built on the JavaScript library jQuery. Use it to save space when displaying a collection of images and offer your users a nice and elegant way to show a big version of your images without leaving the page flow.
Download
Galleriffic is a jQuery plugin that provides a rich, post-back free experience optimized to handle high volumes of photos while conserving bandwidth.
Download
Galleria is a JavaScript image gallery framework built on top of the jQuery library. The aim is to simplify the process of creating professional image galleries for the web and mobile devices.
Download
Sideways image gallery is made by implementation of some previous scripts/tutorials posted on this blog and some (minor) CSS3. It utilizes the jQuery UI (jQuery User Interface), jQuery Easing by George McGinley Smith and Brandon Aaron’s jquery mousewheel plugin.
Demo | Demo 2 | Download
The Nivo Slider is world renowned as the most beautiful and easy to user slider on the market. Completely free and totally open source, there literally is no better way to make your website look totally stunning.
Download
Smooth Div Scroll is a jQuery plugin that scrolls content horizontally left or right. Apart from many of the other scrolling plugins that have been written for jQuery, Smooth Div Scroll does not limit the scrolling to distinct steps. As the name of the plugin hints, scrolling is smooth. There are no visible buttons or links since the scrolling is done using hotspots within the scrollable area or via autoscrolling.
Download
The idea behind this plug-in is to display a varying number of images in an attractive and easy to use manner. The inspiration for this plug-in this iTunes album viewer. The SlidingGallery plug-in will take a group of images and turn them into a cyclical gallery of images which the user can click through. One image will be centered on the screen, with two smaller images off to the sides. The user can click either of the smaller images to bring them to the center, or the center image to enlarge it. For optimal use, this plug-in should be applied to seven or more images, but can work with fewer (images will be duplicated in order to bring the total to seven).
Download
Orbit is a image slider from Zurb. HTML captions, bullet navigation, CSS3 Font-Face text and more…
Download
ShineTime a kick-ass new jQuery & CSS3 gallery with animated shine effects. This effect is useful in making your user interface elements look like they’re a real polaroid photo (or made of glass) and the best part is, it’s not that difficult to achieve.
Demo |Download
A highly customizable gallery/showcase plugin for jQuery.
Download
Supersized is a fullscreen background slideshow built using the jQuery library.
Demo |Download
A lightweight customizable lightbox plugin for jQuery 1.3+
Download
prettyPhoto is a jQuery lightbox clone. Not only does it support images, it also support for videos, flash, YouTube, iframes and ajax. It’s a full blown media lightbox. It is very easy to setup, yet very flexible if you want to customize it a bit. Plus the script is compatible in every major browser, even IE6.
Download
YoxView is a free Lightbox-type media and image viewer jQuery plugin. It’s easy to use and feature-rich.
Download
jmFullWall is a jQuery plugin for the creation of an impressive portfolio.
Download
Mosaiqy is an amazing plugin for jQuery 1.6+ & HTML5.
Download
Blueberry is an experimental opensource jQuery image slider plugin which has been written specifically to work with fluid/responsive web layouts.
Download
Craftyslide is a tiny (just 2kb) slideshow built on jQuery. Craftyslide aims to be different, by providing a simple, no-frills method of displaying images; packaged into a small, clean and efficient plugin.
Download
SlideDeck is a powerful slider plugin made for web designers. With SlideDeck, you can organize any type of web content into a beautiful and user-friendly slider.
Download
Slides is a slideshow plugin for jQuery that is built with simplicity in mind. Packed with a useful set of features to help novice and advanced developers alike create elegant and user-friendly slideshows.
Download
PikaChoose is a lightweight jQuery Slideshow plugin allowing for easy presentation of photos with carousels and lightboxes! Pikachoose is designed to be easily installed, easy to setup, and well… all around easy.
Demo |Download
Elastislide is a responsive jQuery carousel that will adapt its size and its behavior in order to work on any screen size. Inserting the carousel’s structure into a container with a fluid width will also make the carousel fluid.
Download
PhotoSwipe is a FREE HTML/CSS/JavaScript based image gallery specifically targeting mobile devices.
Demo | Download
A fresh 3D image slider with graceful fallback.
Demo | Download
In this tutorial we’ll create 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.
Demo |Download
In the following tutorial we will create an asymmetrical image slider with a little twist: when sliding the pictures we will slightly rotate them and delay the sliding of each element. The unusual shape of the slider is created by some elements placement and the use of thick borders. We will also add an autoplay option and the mousewheel functionality.
Demo | Download
In this tutorial we will 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. We will add navigation controls for the mousewheel and for keys. The thumbnail will have a zoom and and a fullscreen option, making the image in the background appear in fullscreen mode or as a complete image, resized to fit in the page.
Demo | Download
In this tutorial we will 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. When clicking a slider dot, the full image will slide in from the right or left side, depending on the currently viewed image.
Demo | Download
Andrew is the chief editor of Splashnology blog. He has many years of experience within the web design industry and has a passion for the latest web technologies.
Subscribe to our email newsletter for useful tips and freebies.
