
Images are best presented and more manageable to the viewer if you add a visually appealing effects to your gallery and make it more easier to navigate. I have listed here the best JavaScript image galleries and also included some of the best tutorials on how to make one and use them in your own site.
1. 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.
2. GalleryView

GalleryView aims to provide jQuery users with a flexible, attractive content gallery that is both easy to implement and a snap to customize.
3. Supersized

Supersized is a jQuery plugin that resizes images/backgrounds to fit the whole screen & display them as a slideshow. The plugin preloads the images and offers various transition effects for presenting them. An optional prev-next-pause control makes navigating easier & with the help of options provided, Supersize can be easily customized.
4. Galleriffic

Galleriffic was inspired by Mike Alsup’s Cycle plugin, but with performance in mind for delivering a high volume of photos. This is my first experiment with jQuery, so I would love feedback on how to improve this plugin. I am not so great at spelling, and it was much later that I realized that the more appropriate spellings would be Gallerific or Gallerrific, but is too late now for a name change, so Galleriffic remains.
5. fsgallery

It basically loads image links one by one and replaces it with a full screen image gallery. It scales the image using CSS only (some JS for IE6) and I used jQuery all over.
Just like Galleria, it preloads images in advance for super fast viewing
Some 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.
6. (E)2 Photo Gallery

(E)2 Gallery Pro is built using Mootools Javascript Library to offer web developers/photographers or anyone who wants to showcase their photos, videos or flash work without major programming.
Features:
- Multiple Galleries
- Videos
- Slide Show
- Customizable CSS
- XML Driven
- Sell Your Prints
7. Flickrshow

Flickrshow is a lightweight, cross-browser javascript slideshow, providing you with an easy way to display your Flickr images on your own website. It is simple to install and can be used to access images within Flickr groups or photosets, or using a tag-based search.
The latest version of Flickrshow addresses all of the concerns raised in the last release. Improved or additional features include:
- Compatibility with photosets, groups and tags – Access your Flickr images in any way you want, including multiple tag searches.
- Improved caching of images – The completely rebuilt cache reflects changes in your photostream more immediately and in a much faster way.
- Automated playback of your slideshow – It really is a slideshow now, with a play/pause button to automatically show all of your images.
- Unlimited themes – Use a simple CSS stylesheet to design your slideshow to match your website.
8. Pikachoose

Pikachoose is a lightweight Jquery Image Gallery 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 javascript image gallery shouldn’t be a complex thing.
Now PikaChoose comes packaged with SliderJS. Alot of people have been asking me for a carousel for PikaChoose, and SliderJS will fulfill your needs! Instructions are included in how to add SliderJS onto your slideshow, but its easy enough to figure out just by peeking at the source code in the included example. I’m positive you’ll choose PikaChoose as your javascript image gallery!
9. Slideshow 2

Slideshow 2! is a javascript class for Mootools 1.2 to stream and animate the presentation of images on your website. This page features some examples of how Slideshow might be used to enhance the presentation of images on your website.
10. Animated JavaScript Slideshow by Leigeber

This dynamic JavaScript slideshow is feature packed and under 5KB. It is the long awaited update to my previous script here. A few new features include description support, link support, no naming restrictions, portrait image support, graceful degradation and active thumbnail status.
Here is an example of the markup to build a slideshow
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<ul id="slideshow"><br> <li><br> <h3>Image One</h3><br> <span>photos/image-one.jpg</span><br> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p><br> <a href="#"><img src="thumbnails/image-one.jpg" alt="Image One" /></a><br> </li><br> <li><br> <h3>Image Two</h3><br> <span>photos/image-two.jpg</span><br> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p><br> <img src="thumbnails/image-two.jpg" alt="Image Two" /><br> </li><br> </ul> |
11. Imago

Imago is an Ajax Image Gallery with focus on simplicity and ease of use. It’s plain JavaScript and build on the mature ajax library mootools. No server side scripting is required! Neither is flash. Whether your photos are on flickr, smugmug or you’d like to host them yourself, Imago can show them.
12. Spacegallery – jQuery plugin

Spacegallery is a very simple but nice image gallery built with jQuery. It is a static gallery where images are hardcoded in the HTML and presented with a beautiful grow – fade out effect.
13. Prototype extension: Showcase

Showcase.js needs the Prototype JavaScript framework (version 1.6) and the effects.js component of Script.aculo.us (version 1.8) in order to function.
14. ImageFlow

ImageFlow is an unobtrusive and userfriendly JavaScript image gallery which is licensed under a Creative Commons Attribution-Noncommercial 3.0 Unported License. This means you need the author’s permission to use ImageFlow on commercial websites.
Tutorials
1. Create a Spectacular Photo Gallery with MooTools – NETTUTS+

2. Creating a polaroid photo viewer with CSS3 and jQuery – marcofolio.net

3. jQuery plugin – Easy Image or Content Slider – cssglobe

4. Creating a Slick Auto-Playing Featured Content Slider – CSSTrick

5. Create Featured Content Slider Using jQuery UI


Tags: 


Pingback: Ultimate Reference of Javascript Image Galleries and Slideshows | INSIC 2.0 Web Development & Design Blog
Pingback: Twitted by krispouille