Register now or login here to start promoting your blog and your favourite articles.
10+ jQuery photo gallery and slider plugins
29 Apr 2009 - 55 Comments
I have collected 14 jquery photo gallery and slider plugins. They transform a group of photos into gallery or slider with animation effect and some of them include captions too.
Author: kevin | Source: queness

Introduction

A picture is worth a thousand word. No doubt about it. Most of the information based website such as CNN, ESPN, they are all using a massive photo slide show on its front page. It's a very effective method to attract viewers' attention.

So, here you go. 15 jQuery based photo gallery and sliders. Enjoy.

jQuery Cycle

Official Website | Demo
jQuery Cycle

The jQuery Cycle Plugin is a lightweight slideshow plugin. Its implementation is based on the InnerFade Plugin by Torsten Baldes, the Slideshow Plugin by Matt Oakes, and the jqShuffle Plugin by Benjamin Sterling. It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and many transition effects. It also supports, but does not require, the Metadata Plugin and the Easing Plugin.

Pikachoose

Official Website | Demo
Pikachoose

Pikachoose is a lightweight Jquery plugin that allows easy presentation of photos with options for slideshows, navigation buttons, and auto play. Pikachoose is designed to be easily installed, easy to setup, and well... all around easy. Creating an image gallery shouldn't be a complex thing. I've created a new plugin that I'm packaging with PikaChoose called SliderJS.

s3Slider

Official Website | Demo
s3Slider

The s3Slider jQuery plugin is made by example of jd's smooth slide show script. I needed something like that for jQuery (for my web site kruskica.net). Since i didnt find it after a small research i decided to build it by my self.

Galleria

Official Website | Demo
Galleria

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.

slideViewer

Official Website | Demo
slide viewer

slideViewer is a lightweight (1.5Kb) jQuery plugin wich allows to instantly create an image gallery by writing just few lines of HTML such as an unordered list of images

Image Flow

Official Website | Demo
Image Flow

Image flow is inspired by Apple's cover flow. The javascript renders the cover flow effect without any noticeable flaw. Keyboard navigation (arrow keys), mouse scroll and dragging is supported. Very cool script to use.

jQuery Gallery Scroller

Official Website | Demo
jQuery Gallery Scroller

jQuery Gallery Scroller (jqGalScroll) takes list of images and creates a smooth scrolling photo gallery scrolling vertically, horizontally, or diagonally. The plugin will also create pagination to allow you to flow through your photos.

Spacegallery

Official Website | Demo
space gallery

I particularly love this one. It's really cool. If you are familair with Apple's mac os leopard. Yes, this image gallery display photo just like the time machine does.

Easy Slider

Official Website | Demo
easy slider

Easy Slider (as I call this 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.

jFlow

Official Website | Demo
jFlow

A pretty neat photo slider. It featured in nettut, if you try to make yourself a photo slider. Visit this site.

Supersized

Official Website | Demo
supersized

A fullscreen photo gallery. It resizes images to fill browser while maintaining image dimension ratio. No extra whitespace, no scrollbars - the entire browser window is always filled.

Simple jQuery Slideshow

Official Website | Demo
simple jquery slideshow

A simple tutorial, and it shows us how to create a really simple jquery photo slideshow.

CrossSlide

Official Website | Demo
CrossSlide

CrossSlide is a jQuery plugin that implements in Javascript some common slide-show animations, traditionally only available to the web developer via Adobe Flash™ or other proprietary plugins. CrossSlide builds upon jQuery's animation facility, so it is as portable across browsers as jQuery itself (a lot.)

Innerfade

Official Website | Demo
innerfade

InnerFade is a small plugin for the jQuery-JavaScript-Library. It's designed to fade you any element inside a container in and out. These elements could be anything you want, e.g. images, list-items, divs. Simply produce your own slideshow for your portfolio or advertisings. Create a newsticker or do an animation.

Conclusion

I hope you all love this collection. :)

Copyright & Usage

The effects and techniques demonstrated in tutorials on Queness can be used in whatever manner you wish without attribution. You cannot copy whole tutorials (unless permission is given), either in English or translated to another language.

Share This Post to Support Me! :)


Comments

Edward.H on 29 Apr 2009 says:
thanks for your useful article,I have submitted a link of this article to our webiste www.webmasterclip.com in order to share it with more people.
Luc.P on 30 Apr 2009 says:
jQuery Cycle or Easy Slider ususally do what I need, but I've also found that jquery.scrollable ( http://flowplayer.org/tools/scrollable.html ) is pretty powerful, and probably the best I've come across...
Emanuele on 30 Apr 2009 says:
I think that you missed the jQuery Lightbox plugin http://leandrovieira.com/projects/jquery/lightbox/
holou on 30 Apr 2009 says:
Read this article in a nice way.
Brady J. Frey on 1 May 2009 says:
I love that Galleria - we used it on http://bentlyreserve.com/conferences.php to keep our mobile audience, much better than the flash junk.
majorca on 1 May 2009 says:
so many good ones, hard to pick which one to use
Nathan Searles on 3 May 2009 says:
Another great photo gallery and content slider is loopedSlider. It's one of the few that loops! http://code.google.com/p/loopedslider/
Rahul on 5 May 2009 says:
Nice collection indeed. Each of these are just wonderful sliders.
Jane Loke on 13 May 2009 says:
Whoa...funky compilations~! especially the space gallery! =)
Suzuki on 14 May 2009 says:
excellent collection and explanation. I am in the process searching for an online gallery and this is a great resource. Thanks for sharing.
Cinematography on 18 May 2009 says:
Thanks a lot for this, it is very helpful for me…
Hari on 20 May 2009 says:
nice and useful articles..
webfixeddotnet on 27 May 2009 says:
Superb!!!
accounting homework on 5 Jun 2009 says:
Good one, galleries can be useful at times especially for projects etc

Thanks for posting them :)
alelacayip on 12 Jun 2009 says:
thanks,this is really usefull
monsta on 17 Jun 2009 says:
Thanks a lot.
โหลดเพลง on 17 Jun 2009 says:
It's nice gallery.
Anthony Alexander on 17 Jun 2009 says:
InnerFAde is the best out of all these bloated contraptions.
Mr Hoang on 19 Jun 2009 says:
Good post. I link it.
evasan on 20 Jun 2009 says:
I thing spacegallery is very interesting too.
Is it possible that images moves automaticly (without clic)?
dave on 27 Jun 2009 says:
anyone does know any plugin go read jpgs like book reader? i convert pdf to jpg files and i'd like to use a simple gallery to go back and next page with just a simple zoom,
thanks !
reiki on 30 Jun 2009 says:
Excellent information. Finding a few such solutions has taken hours in the past.

Thank u.
Heloril on 1 Jul 2009 says:
NotesForLightBox is a simple, unobtrusive script used to overlay images on the current page. It's a snap to setup and works on all modern browsers.
The current functionalities are:

Rounded corners light box
Navigation with buttons
Real slide show with progress bar

Live demo:
http://www.notesfor.net/post/NotesForLightBox.aspx
Digg for programmers on 7 Jul 2009 says:
Wow, nice collections. Thanks
Tapeten online on 12 Jul 2009 says:
wow nice gallery. More please!
wendy on 6 Aug 2009 says:
great find it so long time
mamdouh on 9 Aug 2009 says:
thanks
hapleng on 17 Aug 2009 says:
thank you for informations
mp3 on 27 Aug 2009 says:
Wow graet excellent
ipod on 27 Aug 2009 says:
Thanks a lot it very helpful.
Michael on 31 Aug 2009 says:
One of the best slider lists ive seen.
michael on 31 Aug 2009 says:
One of the best slider lists ive seen.
excel help on 4 Sep 2009 says:
This is really beautiful. Inspiration by the design literally!
Matteo on 13 Sep 2009 says:
Great list; I want to suggest also this one:
http://pupunzi.wordpress.com/2009/02/28/mbgallery/
Thomas Kahn on 14 Sep 2009 says:
If you like smooth scrolling, try my plugin SmoothDivScroll: http://www.maaki.com/thomas/SmoothDivScroll
Rushi on 17 Sep 2009 says:
Where i find list of slider .
shankysharma on 6 Oct 2009 says:
i like all scripts.keep it up and add in more examples.
tiesto on 11 Oct 2009 says:
its greath broo thanks for shared
Web Suunnittelua on 22 Oct 2009 says:
Great scripts, these are perfect for project Im working on now. Thanks for posting!!
M.S.ENGINEERING on 23 Nov 2009 says:
Good work... Nice scripts..... Very helpful and creative..... thanks for sharing.....
M.S.ENGINEERING on 23 Nov 2009 says:
Awesome.... very useful for us....Thanks for sharing.......
Devin Walker on 2 Dec 2009 says:
Awesome post, Im going to implement Easy Slider on my site!

Thanks,

Devin
Naveen on 17 Dec 2009 says:
Interior designing is the arrangement of living space i.e. organizing, managing and planning of the interiors of rooms at homes, offices, retail shops, airports, exhibition halls, conference centers, theatres, film studios and commercial establishments etc. The objective of Interior design is to achieve functionality and to create the right kind of atmosphere as to the user’s needs and also for the right budget.
kevin on 20 Dec 2009 says:
thx. greate post, keep it up!!
TheWebLeap on 22 Dec 2009 says:
Hi, great slider! I didn’t see an answer to this in the comments-
-is there anyway to make it continuous instead of rewinding back to the start? so f.e. 1,2,3,4,1,2… instead of passing by 3,2,1 to go back to slide 1.
Thanks
jiaho on 5 Jan 2010 says:
Some of them are so beautiful,and i like use <a href="http://www.chinajiaho.com/Wholesale-mobile-phones-slide-cellphones_c1037
">dual sim phone</a> to write my blog.
Jquery Applications on 5 Jan 2010 says:
I particularly like JQuery Gallery Scroller and Galleria. Infact Galleria is so configurable that it makes my mouth water.
fede on 12 Jan 2010 says:
Excellent list...not sure about which to use in my site but it will be one of them for sure. Good work!

Federico
www.maitravelsite.com
anadikt on 15 Jan 2010 says:
Thanks. It's nice gallery.
Trk on 20 Jan 2010 says:
great examples
Shamima Sultana on 22 Jan 2010 says:
Nice site
sepetli platform on 31 Jan 2010 says:
this information most important for me.
thanks...
Everest on 3 Feb 2010 says:
Superb gallery.....
Wholesale on 5 Feb 2010 says:
so many good ones, hard to pick which one to use,really cool
çiçekçi on 7 Feb 2010 says:
hi good work Thank you! I was looking for a nice simple slider like this!

Leave a comment

http://
Subscribe RSS Subscribe RSS, Keep yourself updated with queness latest posts!
Pixel Crayons Buy and Sell Flash Buy and Sell Flash

Buy wholesale computers directly from China at DHgate.com

Discover the tools to build your e-Commerce Site with Netfirms

  •  
  •  
  •  
  •  
  •  

Community News

Recent Comments

Random Posts


View all posts and news Back to top

About the Author

A web designer and developer who is passionate and keen on contributing to the web development industry. Feel free to say hi to me, or follow me on twitter.

Kevin Liew

Partner

  • Web and Designers
  • CSS Style
  • PV.M Garage Blogzine - (Italian)
  • TutsValley
  • Designrfix
  • CoolVibe
  • Web Developer Juice
  • Denbagus
  • Web Hosting Secret Revealed
  • PSD to HTML Conversion
  • BlueHost