Web Design & Inspiration
jQuery Galleries & Sliders: New Free Tutorials, Plugins and Ready-Made Solutions

jQuery Galleries & Sliders: New Free Tutorials, Plugins and Ready-Made Solutions

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.

jQuery Galleries and Slideshow Plugins

TN3 Gallery

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.
TN3 Gallery Jquery Galleries & Sliders: New Free Tutorials, Plugins and Ready-Made SolutionsDownload

jQuery.popeye 2.1

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.
jQuery.popeye 2.1 Jquery Galleries & Sliders: New Free Tutorials, Plugins and Ready-Made SolutionsDownload

Galleriffic

Galleriffic is a jQuery plugin that provides a rich, post-back free experience optimized to handle high volumes of photos while conserving bandwidth.
Galleriffic Jquery Galleries & Sliders: New Free Tutorials, Plugins and Ready-Made SolutionsDownload

Galleria

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.
Galleria Jquery Galleries & Sliders: New Free Tutorials, Plugins and Ready-Made SolutionsDownload

Sideways

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.
Sideways Jquery Galleries & Sliders: New Free Tutorials, Plugins and Ready-Made SolutionsDemo | Demo 2 | Download

Nivo Slider

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.
Nivo Slider Jquery Galleries & Sliders: New Free Tutorials, Plugins and Ready-Made SolutionsDownload

Smooth Div Scroll

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.
Smooth Div Scroll Jquery Galleries & Sliders: New Free Tutorials, Plugins and Ready-Made SolutionsDownload

Sliding Image Gallery

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).
Sliding Image Gallery Jquery Galleries & Sliders: New Free Tutorials, Plugins and Ready-Made SolutionsDownload

Orbit

Orbit is a image slider from Zurb. HTML captions, bullet navigation, CSS3 Font-Face text and more…
Orbit Jquery Galleries & Sliders: New Free Tutorials, Plugins and Ready-Made SolutionsDownload

ShineTime

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.
ShineTime Jquery Galleries & Sliders: New Free Tutorials, Plugins and Ready-Made SolutionsDemo |Download

AD Gallery

A highly customizable gallery/showcase plugin for jQuery.
AD Gallery Jquery Galleries & Sliders: New Free Tutorials, Plugins and Ready-Made SolutionsDownload

Supersized

Supersized is a fullscreen background slideshow built using the jQuery library.
Supersized Jquery Galleries & Sliders: New Free Tutorials, Plugins and Ready-Made SolutionsDemo |Download

ColorBox

A lightweight customizable lightbox plugin for jQuery 1.3+
ColorBox Jquery Galleries & Sliders: New Free Tutorials, Plugins and Ready-Made SolutionsDownload

prettyPhoto

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.
prettyPhoto Jquery Galleries & Sliders: New Free Tutorials, Plugins and Ready-Made SolutionsDownload

Advertisement

YoxView

YoxView is a free Lightbox-type media and image viewer jQuery plugin. It’s easy to use and feature-rich.
YoxView Jquery Galleries & Sliders: New Free Tutorials, Plugins and Ready-Made SolutionsDownload

Diapo slideshow

Diapo slideshow Jquery Galleries & Sliders: New Free Tutorials, Plugins and Ready-Made SolutionsDownload

jmFullWall

jmFullWall is a jQuery plugin for the creation of an impressive portfolio.
jmFullWall Jquery Galleries & Sliders: New Free Tutorials, Plugins and Ready-Made SolutionsDownload

Skitter

Skitter Jquery Galleries & Sliders: New Free Tutorials, Plugins and Ready-Made SolutionsDownload

Mosaiqy

Mosaiqy is an amazing plugin for jQuery 1.6+ & HTML5.
Mosaiqy Jquery Galleries & Sliders: New Free Tutorials, Plugins and Ready-Made SolutionsDownload

Blueberry

Blueberry is an experimental opensource jQuery image slider plugin which has been written specifically to work with fluid/responsive web layouts.
Blueberry Jquery Galleries & Sliders: New Free Tutorials, Plugins and Ready-Made SolutionsDownload

Craftyslide

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.
 Jquery Galleries & Sliders: New Free Tutorials, Plugins and Ready-Made SolutionsDownload

Coin Slider

Craftyslide Jquery Galleries & Sliders: New Free Tutorials, Plugins and Ready-Made SolutionsDownload

SlideDeck

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.
SlideDeck Jquery Galleries & Sliders: New Free Tutorials, Plugins and Ready-Made SolutionsDownload

Slides

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.
Slides Jquery Galleries & Sliders: New Free Tutorials, Plugins and Ready-Made SolutionsDownload

PikaChoose

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.
PikaChoose Jquery Galleries & Sliders: New Free Tutorials, Plugins and Ready-Made SolutionsDemo |Download

FlexSlider

FlexSlider Jquery Galleries & Sliders: New Free Tutorials, Plugins and Ready-Made SolutionsDownload

Elastislide

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.
Elastislide Jquery Galleries & Sliders: New Free Tutorials, Plugins and Ready-Made SolutionsDownload

Dynamic-Carousel

Dynamic-Carousel Jquery Galleries & Sliders: New Free Tutorials, Plugins and Ready-Made SolutionsDownload

Photoswipe

PhotoSwipe is a FREE HTML/CSS/JavaScript based image gallery specifically targeting mobile devices.
Photoswipe Jquery Galleries & Sliders: New Free Tutorials, Plugins and Ready-Made SolutionsDemo | Download

Slicebox

A fresh 3D image slider with graceful fallback.
Slicebox Jquery Galleries & Sliders: New Free Tutorials, Plugins and Ready-Made SolutionsDemo | Download

Tutorials From Tympanus.net

Portfolio Image Navigation with jQuery

Portfolio Image Navigation with jQuery Jquery Galleries & Sliders: New Free Tutorials, Plugins and Ready-Made SolutionsDemo | Download

Fullscreen Slideshow with HTML5 Audio and jQuery

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.
Automatic Image Montage with jQuery Jquery Galleries & Sliders: New Free Tutorials, Plugins and Ready-Made SolutionsDemo |Download

Grid Navigation Effects with jQuery

Grid Navigation Effects with jQuery Jquery Galleries & Sliders: New Free Tutorials, Plugins and Ready-Made SolutionsDemo | Download

Rotating Image Slider with jQuery

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.
Rotating Image Slider with jQuery Jquery Galleries & Sliders: New Free Tutorials, Plugins and Ready-Made SolutionsDemo | Download

Fullscreen Gallery with Thumbnail Flip

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.
Fullscreen Gallery with Thumbnail Flip Jquery Galleries & Sliders: New Free Tutorials, Plugins and Ready-Made SolutionsDemo | Download

Sweet Thumbnails Preview Gallery

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.
Sweet Thumbnails Preview Gallery Jquery Galleries & Sliders: New Free Tutorials, Plugins and Ready-Made SolutionsDemo | Download

Circular Content Carousel with jQuery

Circular Content Carousel with jQuery Jquery Galleries & Sliders: New Free Tutorials, Plugins and Ready-Made SolutionsDemo | Download

  • AndrewG,
  • November 3, 2011

SHARE THIS POST

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. Crazy about Increateble gallery and amazing 3D Models Marketplace

Subscribe for the hottest posts

Subscribe to our email newsletter for useful tips and freebies.

  • Chiblinx

    thanks mehn…these rocks..

  • http://edsonjunior.com/ Edson Simão Jr.

    Is there some gallerie (not just slider) that could show images AND videos?

  • http://tamiltab.com/ Tamiltab

    nice scriptt
    thanks 

  • Amin_99buneri

    wow nice work i m inspired from them really amazing thanks for sharing.

  • Andrea

    Wanderful. Congratulations!

  • http://mintik.com/ mintik

    Very nice examples. Thanks.