16 Free JavaScript Solutions for Displaying Your Images

May 3 2008 by Jacob Gube | 44 Comments

If you’re looking for a way to display your images on a website but don’t have the time to create a custom solution, there’s plenty of free and easy-to-use scripts available at your disposal.

Here, I’ve compiled 16 free image galleries and slideshows for you to take a look at. Though the effects are smooth and their features are robust, none of them use Flash, only JavaScript, and they require very little coding on your part.

1. JonDesign’s SmoothGallery 2.0

SmoothGallery 2.0 is a nifty slideshow gallery that transitions between images very… smoothly. The author tested SmoothGallery 2.0 in Firefox, Opera, IE 6 and 7, and Safari. It requires the mootools JavaScript framework.

SmoothGallery 2.0: Improved Mootools Mojo for Images

SmoothGallery demo

2. (E)2 Photo Gallery

(E)2 Photo Gallery is an open source photo gallery. The current version is still in beta but I’ve tested it to work with Firefox 2, IE 7, and Safari 3. What’s cool about (E)2 Photo Gallery is that the user can change the "skin" of the gallery. It uses the mootools framework and PHP for the photo uploader and image auto-detection features.

(E)2 Photo Gallery

(E)2 Photo Gallery demo

3. jQuery Gallery

jQuery Gallery is a plugin for the jQuery JavaScript library. It uses the Reflection.js script to add a reflection effect dynamically to your images.

Jquery Gallery version 1.0

4. MooPix

MooPix utilizes the Flickr API to dynamically populate your image gallery with pictures from a Flickr account without the need to use server-side scripting.

moopix

5. Highslide JS

Highslide JS is an open source script that uses modal windows instead of pop-up windows to open larger versions of the thumbnail images. It’s free for non-commercial uses.

Highslide JS

Highslide JS demo

6. Flickrshow

Flickrshow is another slideshow that allows you to access photosets, groups, and tags from Flickr. The current version has an improved caching feature which helps make the transition between images quicker and more fluid.

Flickrshow

7. Galleria

Galleria is an image gallery that uses the jQuery library. It’s distributed under the GLP 3.0 License which permits you to modify and re-package the script (granted that you abide by the terms and conditions of the license).

galleria

Galleria demo 1Galleria demo 2

8. LightWindow v2.0

LightWindow 2.0 is an excellent choice for mixed media galleries because it also supports other file types such as Flash movies and video files.

LightWindow v2.0

LightWindow v2.0 demos

9. easyALBUM

easyALBUM prides itself for being an image gallery that uses "super clean markup". It works well with CSS disabled and is compliant with current XHTML web-standards. It also allows the user to navigate through the gallery using keyboard shortcuts.

easyALBUM

10. slideViewer

slideViewer is a plugin for jQuery and uses ordered lists for mark-up which is good for accessibility and with JavaScript turned off.

slideviewer

11. Image Transition Manager

Image Transition Manager provides you 8 transition effects. It was tested by the developer in Firefox 2, Opera, and IE 6 and 7. As an additional measure, I tried it in Safari 3 (and it works). It was developed using the script.aculo.us effects library which in turn requires the Prototype JS framework.

Image Transition Manager: image transitions with scriptaculous

Image Transition Manager demo

12. ThickBox

ThickBox is a script built on top of jQuery. It’s designed to display images as well as other types of document objects. It has the capability of loading content via Ajax requests.

ThickBox 3.1

13. ProtoFlow

ProtoFlow mimics the cover flow effect that you would find in iTunes, the iPhone, and other Apple products. In addition to the ProtoFlow JS and CSS file, it also uses three additional external JavaScript files – Prototype and script.aculo.us and Reflection.js – so make sure you’re willing to pay the price in page weight, additional HTTP requests, and potential decrease in page load times due to the above reasons.

protoflow

ProtoFlow demo

14. Slideshow: A Javascript class for Mootools

Slideshow gives you tons of options and effects for your slideshow gallery. There’s a pan/zoom feature that makes for a very impressive transition between images, all entirely done using JavaScript. It doesn’t come pretty "out of the box", but with some simple CSS magic, it can looks awesome!

Slideshow: A Javascript class for Mootools

15. Javascript Image Gallery Using Mootools

This is a very simple image gallery, great for when you need something up right now. It doesn’t require you to know very much JavaScript to get it to work.

Image Gallery Using Mootools

16. minishowcase

minishowcase gives you the ability to set the language used in your galleries, and it can be configured to detect the user’s language preferences. This image gallery uses PHP for the language selection and automatic thumbnail generation.

minishowcase

minishowcase demo

If you liked this article, you might also like "10 JavaScript Effects to Boost Your Website’s Fanciness Factor" and "40 Excellent Resources for JavaScript Coders".

44 Comments

Geovanny

May 4th, 2008

Nice article thanks

Massimiliano

May 5th, 2008

Very very good article. Thanks you!

Thomas

May 7th, 2008

A useful list of resources, thank you.

mikul gohil

May 9th, 2008

great jobs man good collection

Professional Website Design

May 14th, 2008

good work. thanks for sharing :)

Ahmed Sabbour

May 17th, 2008

I like this one..based on Prototype and Scriptaculous
http://www.nickstakenburg.com/projects/lightview/

Real Estate Graphic Design

May 22nd, 2008

But what about plain old lightbox?

rborn

July 1st, 2008

this is my script – mooZoom –
is not a gallery, but allows you to zoom images in the point desired using only mouse
http://www.rborn.info/products.php

aaron

August 23rd, 2008

hi,

this is fantastic! love it!
a.

GuySurfing on Saturday Afternoon

November 8th, 2008

does anyone know of a slide show script that is like the dell.com home page? I’ve seen very similar home pages before, but I can’t remember them now. This script has the images and then the navigation is on the images, and as the images change, so does the navigation.

it’d be great if the navigation layer was slightly transparent so it wasn’t obtrusive to the image.

Hassan

January 12th, 2009

Wonderfully done. Congrats.

Aritra Sarkar

February 21st, 2009

Very Very nice and helpful.
Thank you.

Arun

February 24th, 2009

Thanks.. Nice work..

Kusal

March 15th, 2009

Thanks a lot, really appreciate this.

sunny

May 13th, 2009

Hi,
Thanks a lot for this,it is very helpful for me…

regards,
sunny

Brick

May 16th, 2009

Thanks for this, been looking for a nice simple gallery i can use to display a few pics and this works a treat. Cheers

Tole

June 3rd, 2009

Hi there,
Useful collection.

I also wrote a Javascript gallery which actually is not “one from the list”. It is something like “appendix to list” because it is iPhone optimized and it is meant to be used in combination with regular one.
The script is called Jaipho and you can check demo on http://www.jaiphodemo.info

Cheers

accounting homework

June 6th, 2009

Good one, galleries can be useful at times especially for projects etc

Thanks for posting them :)

Reiki

June 30th, 2009

Excellent information. Finding a few such solutions has taken hours in the past.

Thank u.

assaf

August 24th, 2009

Do you have a scripts for framing the pictures?

Prashanth

September 1st, 2009

Good one, galleries can be useful at times especially for projects etc

Thanks for posting them :)

Jupiter

September 3rd, 2009

Great list of links. I am preparing to work on a new wedding photography site for myself and am debating on whether I should use a flash image gallery or a Javascript/Ajax one!

Jerry

October 11th, 2009

Hey thanx for the useful links. Helped me a lot. Keep up the good work!!

sajith

October 21st, 2009

Nice work.Thanks

deepak

December 5th, 2009

hey boos it’s nice. this article help me a lot. thanks

konakona

January 8th, 2010

This is great!thank!!!

Chalupa

February 4th, 2010

This free stuff is great – but it prevents that people read the manuals and understand how to use the iQuerie library and mootools framework !!! Don´t copy without thinking!

svnlabs

February 7th, 2010

Hi,
I want hulu like tooltip..
Where I can find that…

SV

Minh Huynh

February 16th, 2010

Thank very much for this nice collection. I have 3 question
– How can I get the code for one of this javascript that I find interested? where to download?
– I have a number of pictures in my computer that I stored them in many folders. What can I do if I want to select an entire folder without using PHP? I don’t really want to publish them on the web. Everything is just for my personal use. Thank you.

Alex

March 21st, 2010

Very useful list. Thank you. The JQuery gallery at number 3 is one that suits the job I am doing at the moment.

Movers

April 30th, 2010

nice posting and thanks for very useful information.

strainer

May 27th, 2010

nice article thanks for the post

Mwipice

June 17th, 2010

How to make a photo more clear?
Using Java?

vainfotech

September 15th, 2010

It is really good.

Thanks.

Slava

October 13th, 2010

A great page for photographers designing their website by themselves. Thanks!

pman

January 31st, 2011

pls i am a starter that needs to learn and wants cool effect on my website, Pls help me.

Julia

March 20th, 2011

This article is FANTASTIC! I can’t thank you enough for writing it. I’ve been trying to figure out a good way to display images on my blog… this was just what I needed. You rock.

Ankita Gupta

May 4th, 2011

perfecto boss, great job buddy…

annai

June 30th, 2011

nice article…thanks for sharing

Sabrina

August 11th, 2011

A great useful list thx a lot

Clocks

October 4th, 2011

This is extremely helpful and I’m confident I’ll be able to figure out how to make my images bigger with something on your list!

Really I just want my images to enlarge as surfers hover over them.

chessca

October 7th, 2011

im chessca sedero its hard for me to upload photo because only 5 photo allow to upload if i have 30 photo i feel tired to upload and upload so i want java because someone say to me its nice but how can i upload java??

dev1

November 21st, 2011

One extremely great javascript photo tag plugin named Smart Tagger can be found at http://www.thesmarttagger.com

It has good example with PHP, AJAX and java too for how to get facebook like photo or image tagging feature in your album.

Leave a Comment

Subscribe to the comments on this article.