Hot jQuery Slideshow Image Gallery Tutorials and Downloads

jQuery is the hottest girl in Developers-ville. This is the reason why we keep sharing jQuery related posts in spite of the fact that it is not one of our most focused subjects.

This collection consists of 20 great jQuery JavaScript tutorials (and their plugin downloads) for creating magnificent Slideshows and Image Galleries. Most of these tutorials work with the combination of CSS-jQuery and this fact makes it interesting for designers as well.

Most of the tutorials here do not need very advanced skills so you should give it a try even if you are new to development.

Rotating Image Slider with jQuery

Creates 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 Mouse Wheel functionality.

Making a Really Cool jQuery Gallery

Build a custom gallery that scans a folder of images and outputs a slick gallery, utilizing PHP, CSS, jQuery and the jQuery Lightbox plug-in.

Slider Gallery with jQuery

A creative gallery with a slider for the thumbnails. The idea is to have an expanding thumbnails area which opens once an album is chosen. The thumbnails will scroll to the end and move back to the first image. The user can scroll through the thumbnails by using the slider controls. When a thumbnail is clicked, it moves to the center and the full image preview opens.

Create Beautiful jQuery Slider Tutorial

This tutorial explains how to develop Create Beautiful jQuery sliders tutorial with image description and name.

SIDEWAYS – JQUERY FULLSCREEN IMAGE GALLERY

A simple, yet elegant fullscreen image gallery created with the jQuery framework and some simple CSS.

New Great jQuery Photo Gallery – Skitter

The next gallery will use Skitter. This is a jQuery gallery which switches images using different transition effects. At current moment it is able to manage with 22 different effects.

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.

How To Create Circular Image Galleries With jQuery

The images or items presented inside a rectangle. This is great for providing the experience users are used to, but there are a few interesting alternatives that you may like to hear about.

Create a Resizable Image Grid with jQuery

Image grids that smoothly scale at a simple drag of a slider are no longer confined to desktop apps like iPhoto or Picasa. Thanks to some clever CSS and the jQuery UI, fluid image grids are now surprisingly simple to implement on the web.

Portfolio Zoom Slider with jQuery

Creates some nice effects for a portfolio or similar website with jQuery. We will create a tiny slider and integrate it with the amazing Cloud Zoom plugin and the elegant Fancybox plugin.

Creating Photo Gallery using jQuery and VisualLightBox

One useful jQuery plugin – VisualLightBox. This plugin can help you to create good-looking galleries. And it is very easy to implement.

Create an Image Rotator with Description (CSS/jQuery)

An image rotator is one great way to display portfolio pieces, eCommerce product images, or even an image gallery. 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.

How to Create a Simple Slideshow using Mootools / jQuery

When we want to show lots of content in limited screen space, Slideshows comes to the rescue.

How to Create a Simple iTunes-like Slider

When space is at a premium, making use of sliders is the optimal way to present information. Take a look at how to create a slider similar to the one used in the iTunes store.

Apple-style Slideshow Gallery With CSS

Making an Apple-like slideshow gallery, similar to the one they use on their website to showcase their products. It will be entirely front-end based, no PHP or databases required.

Create a Slick and Accessible Slideshow

Learn how to create a usable and web accessible slideshow widget for your site using HTML, CSS, and JavaScript (jQuery).

Scrolling Gallery with jQuery (Video Tutorial)

How to create the jQuery slideshow used on the front page of the Obox Design website.

Build a Carousel with JavaScript from Scratch (Video Tutorial)

In this video tutorial, learn how to create a Flash-like carousel…without using Flash!