Image galleries, sliders and slideshows have become increasingly popular within webpages over the last year or so, and with jQuery becoming ever more popular, more and more developers have been creating these amazing powerful, versatile and sleek galleries. Thank you jQuery.
Below you will the most powerful, the most creative and most versatile of jQuery plugins and tutorials built using jQuery.
Galleriffic jQuery Plugin
Link : Galleriffic jQuery Plugin »
Description : This sleek plugin is great, its simple to use and implement, fast, looks amazing and feature rich.
Features :
- Smart image preloading once the page is loaded.
- Thumbnail navigation (with pagination).
- Support for bookmark-friendly URLs per-image.
- Slideshow gsallery (with optional auto-updating url bookmarks).
- Events that allow for adding your own custom transition effects.
- Support for image captions.
- Flexible configuration.
- Graceful degradation when javascript is not available.
- Support for multiple galleries per page.
Demo : Galleriffic Demo »
Supersized – Full Screen Background/Slideshow jQuery Plugin
Link : Galleriffic jQuery Plugin »
Description : Supersized is the first fullscreen image gallery/slideshow that I have seen that really looks amazing, its transition effects are hypnotic and its controls are simple. The most amazing thing about Supersized is that it gives the impression of being a desktop application. Amazing plugin.
Features :
- Resizes images to fill browser while maintaining image dimension ratio.
- Cycles Images/backgrounds via slideshow with transitions and preloading.
- Navigation controls allow for pause/play and forward/back.
- Almost endless options.
Demo : Supersized Demo »
Building a jQuery Image Scroller
Link : Building a jQuery Image Scroller »
Description : In this tutorial, you’re going to be building an image scroller, making use of jQuery’s excellent animation features and generally having some fun with code. This scroller will be different from the others in that it will be completely autonomous and will begin scrolling once the page loads.
Demo : jQuery Image Scroller »
Sliding Boxes and Captions with jQuery Tutorial
Link : Galleriffic jQuery Plugin »
Description : 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. Nice effect.
Demo : Sliding Boxes and Captions Demo »
Create a Resizable Image Grid with jQuery
Link : Resizable Image Grid »
Description : Image grids that smoothly scale at the 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.
Demo : Resizable Image Grid Demo »
Create Sliding Image/Reveal Content
Link : Sliding Image/Reveal Content »
Description : This tut does exactly what it says in the title, hover over the image and the text content will be revealed. Great first tutorial from Suciu Vlad.
Demo : Sliding Image/Reveal Content Demo »
Creating an Image Slider
Link : Creating an Image Slider »
Description : In this tutorial you will learn how to create an image slider that when a holder is hovered over, the top image slides down to reveal the image underneath. You will also learn how to use position absolute to float an image in the top right to show the image is new.
Demo : Creating an Image Slider Demo »
Galleria jQuery Plugin
Link : Galleria jQuery Plugin »
Description : Galleria is a javascript image gallery written in jQuery. It loads the images one by one from an unordered list and displays thumbnails when each image is loaded. It will create thumbnails for you if you choose so, scaled or unscaled, centered and cropped inside a fixed thumbnail box defined by CSS. Very cool plugin.
Features :
- Unobtrusive javascript.
- Degrades gracefully if the browser doesn’t support javascript or CSS.
- Lightweight (4k packed).
- Displays the thumbnail when the actual image is loaded.
- CSS powered – create your own gallery style.
- Super fast image browsing since the images are preloaded one at a time in the background.
- Can scale thumbnails and crop to fit in thumbnail container.
- Can be used with custom thumbnails.
- Stylable caption from image or anchor title.
- jQuery plugin – takes one line to implement.
- Can adjust the history object and enable the back button in your browser.
- Can fire events so you can customize the images behaviour onLoad.
Demo : Galleria Demo »
Create a Beautiful jQuery Slider Tutorial
Link : jQuery Slider Tutorial »
Description : This tutorial shows you how to develop a beautiful jQuery slider with added image description and name. The final result is a very smooth and visually pleasing slideshow which could be easily integrated into any site.
Demo : jQuery Slider Tutorial Demo »
GalleryView jQuery Plugin
Link : GalleryView jQuery Plugin »
Description : GalleryView is a content-gallery plugin capable of displaying any HTML content in an animated gallery view. This plugin is bounding with options and you would be hard pressed to not use this plugin. GalleryView does require the jQuery Timers plugin to facilitate timing of animation events.
Demo : GalleryView jQuery Plugin Demo »
Simple JQuery Image Slide Show with Semi-Transparent Caption Tutorial
Link : Simple JQuery Image Slide Show »
Description : In this tutorial you will be shown how to create a simple image slide show with a semi-transparent caption using jQuery. The final result will be suitable to display news headlines, or an image slide show on your websites homepage.
Demo : Simple JQuery Image Slide Show Demo »
jQuery Morphing Gallery Tutorial
Link : jQuery Morphing Gallery Tutorial »
Description : In this tut you will learn how to create a simple image gallery that when an image is selected, it will “morph” into its relevant size.
Demo : jQuery Morphing Gallery Demo »
Zoomimage – jQuery plugin
Link : Zoomimage – jQuery plugin »
Description : Present your images in a stylish way, with this plugin. The links are unobtrusively highjacked to open the images in an inpage popup with drop shadow and border. Nice and simple.
Demo : Zoomimage – jQuery plugin Demo »
Full Screen Image Gallery Using jQuery and Flickr
Link : Image Gallery Using jQuery and Flickr »
Description : This is a full screen image gallery that automatically scales the image with kept aspect ratio to fill the browser background. It uses the flickr search engine with thumbnail preview, captions, preloader and some other excellent goodies. It scales the image using CSS only (some JS for IE6) and developed with jQuery.
Features :
- Flickr search using jQuery and JSON.
- Full screen with kept ratio using CSS only.
- A png raster to even out up-scaled jpegs.
- Thumbnails with loader indicator and a nice hover effect that shows a bigger thumb (or description).
- A preloader loads the large images one by one for super-fast viewing.
- Fetches the biggest image from flickr using their API.
- Caption that can be turned on or off.
- Navigate by clicking on either half of the image, or use the thumbnails..
Demo : Image Gallery Using jQuery and Flickr Demo »
Easy Slider 1.5
Link : Easy Slider 1.5 »
Description : The Easy Slider plugin enables images or any content to slide horizontally or vertically on click. It is configurable with css alone. So, basically you link to plugin file, set the content up and style it with css.
Demo : Easy Slider 1.5 Demo »
RSS & Twitter
Grab the RSS Feed: Speckyboy RSS.
Twitter : Speckyboy on Twitter.
You might also like…
25 Powerful and Useful jQuery Tutorials for Developers and Designers »
Best Ever 65 mooTools Plugins and Demos, is it Better than jQuery? »
37 Phenomenal jQuery Plugins and Demos for Developers »
20 Amazing Javascript Prototype Scripts, Elements, Widgets, Classes.. »
35 Easy to use Free Ajax/Javascript Navigation Solutions »
20 Amazing jQuery Plugins and 65 Excellent jQuery Resources »
Top 15 Free AJAX Resource Directories worth bookmarking »
20 Top Script.aculo.us Scripts you can’t live without »
41 of the Best MooTools Ajax Example Downloads »
There are 67 Comments › Leave your comment
Leave a Reply
26 Trackbacks
- 15 Amazing jQuery Image Gallery/Slideshow Plugins and Tutorials : Speckyboy Design Magazine « Netcrema - creme de la social news via digg + delicious + stumpleupon + reddit
- David Bilbo | Cool jquery Galleries
- popurls.com // popular today
- .::BlogDeNet::. » 15 Amazing jQuery Image Gallery/Slideshow Plugins and Tutorials
- links for 2009-06-04 « toonz
- 15 Fantastiche Gallery di Foto e Slideshow Jquery | Fedeweb
- 15 Amazing jQuery Image Gallery/Slideshow Plugins and Tutorials : Speckyboy Design Magazine | Squico
- links for 2009-06-05 « Mandarine
- 15 Amazing jQuery Image Gallery/Slideshow Plugins and Tutorials … | Squico
- 110+ jQuery Tutorials, Plugins, Tips and Resources | Webmaster 9
- 15 Amazing jQuery Image Gallery/Slideshow Plugins and Tutorials « web design mag
- 15 Amazing jQuery Image Gallery/Slideshow Plugins and Tutorials « geek and sexy
- 15 Amazing jQuery Image Gallery/Slideshow Plugins and Tutorials « co de zin
- 40 Free and Essential Web Design and Development Books from Google : Speckyboy Design Magazine
- 15 Amazing jQuery Image Gallery/Slideshow Plugins and Tutorials « Khopri
- Plugins para slideShow do Jquery « Galeria de scripts
- 25 Useful jQuery Tooltip Plugins and Tutorials | Downrex
- Anonymous
- Weekly Digest for December 17th | bugs of a debugger
- css table, 15 gallery tutorials | lo stanzino di EngiMedia
- 15 Tips and Techniques for Styling the button element | Bizimhost.biz
- GalleryView JQuery Plugin 2.0 Example
- 15 Amazing jQuery Galleries « DulceBlu Blog – New York Web Design – NY web site design – New York Graphic Design – NY Print Design
- CSS Ninja | XHTML und CSS News » Blog Archiv » 15 tolle jQuery Image Slider
- 15 Amazing jQuery Image Gallery/Slideshow Plugins and Tutorials « ByEnvision Web & Media
- Flash player is not running photos










































4 Jun, 2009
Excellent, thanks a lot
Keep up the good work !
4 Jun, 2009
thank great sharing. my slideShowTR exam http://portfolyo.bitlimakina.com/9/
4 Jun, 2009
Good list! Links for Easy Slider seem to be wrong though :)
4 Jun, 2009
Great collection…
TNX
p.s
Last link is not the right one…
4 Jun, 2009
Some great tutorials here. I really want to learn jQuery and I will have to try these out eventually and maybe start to use them in my websites. Thanks for these.
4 Jun, 2009
Useful list. jQuery rocks.
Thanks for sharing :)
4 Jun, 2009
Heu, “Easy Slider 1.5 » do not fonction ?
4 Jun, 2009
Awesome collection, definitely bookmarking this one.
7 Jun, 2009
Great collection of great stuff. Thank you.
9 Jun, 2009
Oh Goood Thanx alot
10 Jun, 2009
nice collection, keep it up bro!
10 Jun, 2009
sweet… this would be useful on my projects. thanks!
11 Jun, 2009
Decided to use this in all my next projects, it give an extra feeling to the user online experience.
11 Jun, 2009
This is fantastic. I’m no guru programmer–so any coding to purchase/get for free is always appreciated. I love not having to use flash for stuff like this too.
13 Jun, 2009
Thanks, there is more reason to comment than ever before!
16 Jun, 2009
wow
19 Jun, 2009
Love these collection! Thanx
21 Jun, 2009
Socool!!
24 Jun, 2009
Nice collection. I didn’t know about the SuperSize gallery and the one using flickr before.
Thanks
25 Jun, 2009
Page bookmarked will keep coming back here for more. Great collection and thanks for sharing
28 Jun, 2009
For the Galleria plugin, the link is dead. The proper link is http://devkick.com/lab/galleria/ so you might want to replace the old link with that.
29 Jun, 2009
Great ! Thanks for this wonderful collection .
30 Jun, 2009
Excellent information. Finding a few such solutions has taken hours in the past.
Thank u.
13 Jul, 2009
Great jQuery tutorials, they may make pics on your blog more eye-catch and also reduce the bounce rate.
25 Jul, 2009
Uhi, very nice Jquery slideshow. I love “GalleryView jQuery Plugin”
27 Jul, 2009
Very exciting. Now I have got to try for myself two of them: slideshow with flickr images and slideshow and details on hover! Thanks a lot!
28 Jul, 2009
Hey, just wanted you to know that the link to Galleria is broken. I think all you need to do is make the uppercase “G” lowercase and you should be golden.
29 Jul, 2009
Nice collection
31 Jul, 2009
Thanks for that
finally i got the rating stuff
2 Aug, 2009
Very good collections, thanks for sharing.
15 Aug, 2009
awesome
5 Sep, 2009
Of the hundreds of jQuery slideshow plugin roundups, this one is by far the best. Nice job.
10 Sep, 2009
Excellent! Exactly the resource that I was looking for!
15 Sep, 2009
Very beautiful galleries
18 Sep, 2009
awesome!!!! Thanks for cutting my research time in half!!!!
18 Sep, 2009
Nice list! I might go for number 15 :-)
27 Sep, 2009
Excellent!Very beautiful galleries
27 Sep, 2009
Great list! the Galleria URL doesn’t work though, I get 404. remove the capital letter and it will work :)
Cheers,
S
28 Sep, 2009
It’s very useful.
Thanks.
29 Sep, 2009
Nice listvery useful!
12 Oct, 2009
What a great collection. Thanks for finding and sharing.
Oscar
12 Oct, 2009
Thanks for sharing i will use this link to customize my web
15 Oct, 2009
Excellent post. Very beautiful image galleries and slideshow plugins.
;)
20 Oct, 2009
wow so cool
22 Oct, 2009
Excellent collection and explanation. I am in the process searching for an online gallery and this is a fantastic resource. Thanks for sharing this with us.
22 Oct, 2009
Great and useful collection
31 Oct, 2009
Nice assortment of plugins as everyone already said :)
A little note though … the link for the Galleria plugin should be http://devkick.com/lab/galleria/. Must be hosted on a linux server because it’s case sensitive !
31 Oct, 2009
great tuts
4 Nov, 2009
Hi,
really nice pluggins. very helpful. I have used one of themr here http://www.officefurnitureindia.com
checkout and let me know hows it.
9 Nov, 2009
It’s very useful.
Thanks.
16 Nov, 2009
Galleria link is broken it should go to http://devkick.com/lab/galleria/
24 Nov, 2009
Hi There,
I am looking for the script of JQuery for following purpose.
” Reordering and Organizing Images” Like we do in picasa?
is there any script available :) ?
Thanks
Regards
Sushant Danekar
3 Dec, 2009
Another nice jQuery image gallery lightbox http://visuallightbox.com/.
Comes with wizard generator.
3 Dec, 2009
Really interesting stuff. Thanks for sharing.
7 Dec, 2009
I like it. Nice collection.
16 Dec, 2009
Really nice collection.
21 Dec, 2009
Incredible how far javascript libraries have come, jQuery is the king as far as i’m concerned.
As far as ease of use, implementation and lots of other arguments, who needs flash?
24 Dec, 2009
Good collection. Thanks for sharing.
29 Dec, 2009
WooooW Nice slidshow
11 Jan, 2010
hmm..
after this, i must change my blog… and use jquery slider .
14 Jan, 2010
Very useful collection
17 Jan, 2010
wow… nice slide show
25 Jan, 2010
Interesting very nice
2 Feb, 2010
thanks for sharing…
100 kinds of javascript image galleries can also be found at http://hgalcollection.0fees.net/Galleries-a/
3 Feb, 2010
Useful collection…..
4 Feb, 2010
Awsome plugins :P
7 Feb, 2010
nice reference ^-^