10 jQuery plugins for showing image gallery
An image gallery is part of the modern web 2.0 design. There are many ways to show it. For eg: thumbnail listing of images – clicking will show the corresponding large image in an overlay div – like lightbox. The other method is, list images inline – no popups.
Here I’ve listed 10 jQuery plugins which can be used for this type of gallery. All these plugins can show images with some transition effects. I didn’t consider lightbox like (popup) scripts. But you may be interested in the following articles.
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.
The core of Galleria lies in it’s smart preloading behaviour, snappiness and the fresh absence of obtrusive design elements. Use it as a foundation for your custom styled image gallery.
| Dependencies | jQuery 1.2 |
|---|---|
| Size | Less than 5KB (Compressed) |
| Restrictions | None (GPL) |
| Demo | Open | Open in new window |
| Info & Download | Open |
Gallerific
Features
- Smart image preloading after the page is loaded
- Thumbnail navigation (with pagination)
- Support for bookmark-friendly URLs per-image
- Slideshow (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
| Dependencies | jQuery 1.2 |
|---|---|
| Size | 12 KB (Minified) |
| Restrictions | None |
| Demo & Download | Open | Open in new window |
S3 Slider
It is a simple & lightweight jQuery plugin which can show images with captions. It is useful, if we want to show image slide shows without thumbnails.
| Dependencies | jQuery 1.2 |
|---|---|
| Size | Less than 2KB (Packed) |
| Restrictions | None |
| Demo | Open | Open in new window |
| Info & Download | Open in new window |
Coda Slider
Though it is not limited to showing images, it is still an option to show images.
Read more
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
| Dependencies | jQuery 1.2, jQuery Easing plugin |
|---|---|
| Size | Less than 2KB (Packed) |
| Restrictions | None |
| Demo & Download | Open | Open in new window |
Easy Slider
This is a multipurpose sliding gallery. It can show images or text contents.
| Dependencies | jQuery 1.2 |
|---|---|
| Size | 8KB (Uncompressed) |
| Restrictions | None |
| Demo | Open | Open in new window |
| Info & Download | Open in new window |
Crossfade
It supports some very advanced transition effects like Ken Burns effect. The transitions can be customized.
| Dependencies | jQuery 1.2 |
|---|---|
| Size | Less than 12KB |
| Restrictions | None (GPL) |
| Demo & Download | Open | Open in new window |
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.
| Dependencies | jQuery 1.2 |
|---|---|
| Size | Less than 6KB |
| Restrictions | None |
| Demo & Download | Open | Open in new window |
9. Enhance Gallery
| Dependencies | jQuery 1.2 |
|---|---|
| Size | Less than 4KB |
| Restrictions | None |
| Demo & Download | Open | Open in new window |
jQuery Cycle plugin
The jQuery Cycle Plugin is a lightweight slideshow plugin. 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.
| Dependencies | jQuery 1.2 |
|---|---|
| Size | 18 KB (With all transition effects – Core plugin 9KB) |
| Restrictions | None |
| Demo & Download | Open | Open in new window |
Space Gallery
| Dependencies | jQuery 1.2 |
|---|---|
| Size | 13 KB |
| Restrictions | None |
| Demo & Download | Open | Open in new window |
Image Flow
Another image gallery that mimics apple’s coverflow animation.
Read more
Related posts:
- 10 Mootools plugin for showing image gallery
- Highslide – The best image gallery script?
- 10 jQuery plugins for manipulating images
- Image Flow 0.9
- 3 jQuery plugins to show context menu
If you like this post, please share it so that others can also find this
Awesome list.
Easyslider is our favorite. clients love it.
Thank you
T.
Very good collection! Thank you.
thanku.i ned this type of image galarys..thanks a lot
Good one, image rotator can be useful at times especially for projects etc
Thanks for posting them
I have a viaw your showing image gallery and I am impressed.Becouse your good lesson and image project.Thanks for information
Excellent information. Finding a few such solutions has taken hours in the past.
Thank u.
Great list, best plugins, I like it!
y those php files in the image url gets included? images r not appearing
Is there any free alternate.
Wondering how to get the image flow 0.9 above with the 3d/mirror imaging?
Great list. Thank you for posting
Nice…The information is more useful to me….
This is really beautiful..
these are great. thank you for sharing…..
Really good information….
Great stuff….
Still can’t find light box for single image with cool round corners box and custom close baton
Gallerific looks nice…will use it in website for wedding dresses, but after adding text under thumbs
Hi,
I have a question.
I want to show images gallery linking to recent post in sidebar of my wordpress.
Do you know the code or plugin?
here’s the example
I hope you can help me.
Thank you.
These are very useful indeed! Thank you for posting!
A new jQuery slider plugin has been released which offers a very professional implementation of the Ken Burns effect. Though it is a premium plugin (licence $12) the feature set well worth it. Compare it to the Ken Burns plugin features in this list (especially in older browsers) and you will see the big difference.
Check out the 5 demos here: http://pixelentity.com/previews/components/estro/
Great Slides
Exactly what I have been craving
Thanks so much for this all in one place!
I have viewed the videos and it is really great, It give me ideas on how to finish my graphic design courses.
Many Thanks.
Ohh!! Good work!! Thak you very much. Good gallery
scripts are really COOL