General, Inspiration

Ultimate Reference of Javascript Image Galleries and Slideshows

Jul 30, 2009 insic 29 Comments

image gallery list
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

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

gallery view

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

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

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

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

e2 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

flickershow

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

pikahoose

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

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

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

11. Imago

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

space gallery

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

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

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+

nettuts+

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

marcofolio

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

cssglobe

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

csstrick

5. Create Featured Content Slider Using jQuery UI

webdeveloperplus

About the author: insic

Subscribe in my RSS Feed for more updates on Web Design and Development related articles. Follow me on twitter or drop a message to my inbox.

  • http://itlivewire.com/devblog/ itlivewire

    very nice article, good collection you have there insic

  • http://www.foxyturkey.com Yigit Ozdamar

    Some of them are really nice but there is also a lot of ordinary styles.

  • http://usman.coislamscience.com Usman Arshad

    Really nice collection, thanks for sharing

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

  • Pingback: Twitted by krispouille

  • http://www.aledesign.it aledesign.it

    Fantastic post, some gallery are really nice.Gallery View and image flow are my preferite!Thanks for sharing

  • http://nwagi.com Ashish Lohorung Rai

    Just too cool list.. thanks for putting up..

  • http://www.all-maroc.com/vb abdelah

    good
    thanks

  • http://www.kionux.com.br Daniel

    Nice collection… I should add another nice tutorial from design mag (http://designm.ag/tutorials/image-rotator-css-jquery/) Thx

  • http://creativefeed.nardyello.com Nardyello

    Perfect collection! Thanks for sharing! :D

  • http://www.doublejdesign.co.uk/ Jack

    Very nice and useful. Thanks.

  • http://aext.net Lam Nguyen

    Very cool list. Thanks. That’s the best list I’ve ever seen.

  • http://slapandthink.com/ SAT

    Hi, nice list ! Thanks

    And fore everyone whos is interested, i’ve made a tutorial, how to install the jQuery plugin named “Spacegallery”

    Here : http://slapandthink.com/blog/?p=107 (in french)

    @+

  • http://myboodesign.com boo

    nice post … !!!

  • http://www.cre8ivecommando.com Cre8ive Commando

    Nice collection. Thanks :-)

  • http://www.ph-creative.com PhCreative

    These are great. We’re always on the look out for some new design ideas in our websites. I really like number 5.

  • http://www.sizlopedia.in/ ravi

    Really nice collection, thanks for sharing

  • http://os.laroouse.com esranull

    best post thanks

  • http://denbagus.net denbagus

    thank you for share great information about jquery

  • http://izdelava-spletnih-strani-1a.blogspot.com/ izdelava spletnih strani

    I was using slider.js then lightbox but will definetly try some of these galleries. Nice post.

  • http://www.deepubalan.com Deepu Balan

    Really a wonderful post. Really useful stuff, Appreciate your efforts in putting this together…

    -Deepu

  • Alex Rajan

    Thanks for your collection

  • http://www.horesh-studios.com/blog Motti

    i’ve been using some of this galleries for many projects already, u just got to love the jquery technology, just great

    thanks for sharing!

  • http://www.velorastudios.com Bryan McAnulty

    Great list. Some very impressive and creative galleries in there.

  • Simon Ansong

    Too good. Nice one buddy, keep it up. I am so in love with the great list. hehe :D

  • http://www.onextrapixel.com Aidan

    Nice article. However isn’t there should be an about page or contact mode to get in touch?

  • http://www.labinterio.com Fume hood

    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.

  • http://www.orchidscallacar.com ranji

    nice collection thanks for sharing it

  • http://www.creativebis.com safety products

    good post