jQuery Slideshow and Gallery Plugins – Tutorials

There is a collection of some of the cool new jQuery plugins which help you  to create slideshows and photo galleries easily, yet beautifully.

Coin Slider

jqFancyTransitions slice your images in stripes, while Coin Slider slice them in squares. And that’s the main difference. With changing order of appearing those squares I achieve random, swirl, rain and straight effects.

                                    

                                                    Demo  -  Download

 

FlexSlider

Simple, semantic markup, Supported in all major browsers, Horizontal/vertical slide and fade animations, Multiple slider support, Callback API, and more Hardware accelerated touch swipe support, Custom navigation options, Use any html elements in the slides.

                                   Demo -  Download

 

Camera

Camera slideshow is an open source project, based on Diapo slideshow but improved a lot. You can download it and use for free. Camera slideshow (as Diapo) is tested on new browsers. It requires jQuery 1.4+ and other jQuery plugins are necessary if you want to use some functionalities.

 

                                          

                                          Demo - Download

Nivo Slider

16 unique transition effects  Simple clean & valid markup Loads of settings to tweak Built in directional and control navigation Packed version only weighs 12kb Supports linking images HTML Captions 3 Slick Themes Free to use and abuse under the MIT license.

                                  Demo - Download

Choco

Lightweight, Flexible, Customizable, Released under MIT license, Compatible with Firefox 2 +, IE 6 +, Safari v4, Google Chrome 3 + and Opera 9 +

                                   Demo , Tutorial & Download

Thumbnail Gallery

Thumbnail Gallery is a easy to use JQuery plugin for web developer to build Javascript gallery on their web application. The gallery can be driven by xml. Easy setup and only minimum programming knowledge is needed. Best to showcase your photography portfolio.

                                   Demo - Download

 

CoverScroll jQuery plugin

This is a CSS3 variant of the Apple’s CoverFlow design pattern .

                                              Demo & Tutorial

bxSlider

Horizontal, vertical, and fade transitions, Display and move multiple slides at once (carousel), Prev / next, pager, auto controls, Easing transitions, Random start, Ticker mode, Before, after, first, last, next, prev callback functions, Optional styling included, Tons of options

 

                                          

Demo Examples – Tutorial & Download

 

Wow slider

WOW Slider is a jQuery image slider with stunning visual effects (Blur, Flip, Blast, Fly, Blinds, Squares, Slices, Basic, Fade, Ken Burns, Stack, Stack vertical and Basic linear) and tons of professionally made templates. It is packed with a point-and-click wizard to create sliders in a matter of seconds without coding and image editing.

Demo – Download

 

hash Slider

easy to implement, full styleable via css, mouse wheel integration, direct links to slider postion via hash tag automatic generated number navigation, content could be everything free for everyone, only 2,2kb in size.

Demo – Tutorial & Download

 

Anything Slider

Each panel has a hashtag (can link directly to specific panels). Optional custom function for formatting navigation text. Auto-playing slideshow (optional feature, can start playing or stopped) Pauses playing YouTube videos when not in view and resumes them when in view (only in non-IE browsers & if files are hosted on the web). Pauses slideshow on hover (optional). Optionally play the slideshow once through, stopping on the last page.

Demo – Download

 

Orbit

Orbit will dynamically determine the height and width of your set of images and scale accordingly, but make sure all your images are the same size or the larger images will peek out on the sides.

Demo & Tutorial

 

jQuery Cycle

The jQuery Cycle Plugin is a slideshow plugin that supports many different types of transition effects. It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and much more. It also supports, but does not require, the Easing Plugin.

 

Demo & Download

 

SlidesJS

SlidesJS is a simple slideshow plugin for jQuery. Packed with a useful set of features to help novice and advanced developers alike create elegant and user-friendly slideshows.

Demo – Download

 

EasyRotator – jQuery Slider / Rotator Builder

This is something different. This is not exactly a jQuery plugin but a jQuery maker. You can create as many jQuery based slideshows as you like. Available as a Dreamweaver extension, standalone application and WordPress plugin, it lets you select photos, choose a layout, make customizations, then have all necessary code automatically added to your page.

Examples & Download