65 Free JavaScript Photo Gallery Solutions

JavaScript photo gallery, JavaScript image gallery and web photo gallery are indispensable factors in the world of Internet, the world of web from beginning. There are a large numbers of web photo gallery solutions, you can check out some JavaScript photo galleries on [email protected]:

- JavaScript Simple Picture Gallery
- JavaScript Next-Previous Image Gallery
- JaS Gallery

But today in this HTML JavaScript tutorial, I have compiled some impressive JavaScript example code you can use for presenting your pictures on web page effectively. Mostly JavaScript image galleries don't have any technical requirements. All of them don't use Flash, but JavaScript, and they require very little coding. Hope you will enjoy with these web photo galleries, some names I'm impressed: Galleriffic, Slideviewer, Galleria, Spacegallery, Thickbox (jsB@nk using this jQuery plug-in), Fancybox, MooFlow, Lightbox2, Minishowcase, CSS Image Gallery, Highslide JS.

Then check more image slideshow JavaScripts through 16 Free Picture Slideshow Gallery scripts.


Sampled by © JavaScriptBank.com

Updated: April 15th, 2013

There are a large numbers of solutions of web based galleries. I have compiled some impressive scripts you can use for effective presentation of your images. Mostly galleries don't have any technical requirements. None of them use Flash, only JavaScript, and they require very little coding on your part. Hope you will enjoy with these galleries.

Galleriffic

Galleriffic
Galleriffic is jquery gallery created with performance in mind for delivering a high volume of photos. It's features include thumbnail navigation, bookmark-friendly URLs, optional download link for the original image and graceful degradation when javascript is not available.

Slideviewer

Slideviewer
SlideViewer is a lightweight jQuery gallery with a very smooth animation. You can  style it easily and add title to each picture just by specifying the alt attribute.

Galleria

Galleria
Galleria 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.

s3Slider

s3Slider
s3Slider is a jQuery slideshow system for creating smooth transitions with images.

Spacegallery

Spacegallery
Gallery with a nice animation, that is similar to Apple's time machine. When you click on the top image, it fades away and the next one is shown.

Zoomimage

Zoomimage
Present you images in stylish way. The links are unobtrusively highjacked to open the images in an inpage popup with drop shadow and border.

Image gallery by James

Image gallery by James
A simple image gallery/viewer that is fully unobtrusive, so you can still view the images when JS is disabled.

Cycle plugin

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.

Thickbox (JavaScriptBank.com using)

Thickbox
ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.

Fancybox

Fancybox
Fancybox is lightbox plugin that automatically scales large images to fit in window, adds a nice drop shadow under the zoomed item, groups related items and adds navigation through them (uses preloading).

Slideshow2

Slideshow2
Slideshow 2 is a javascript class for Mootools 1.2 to stream and animate the presentation of images on your website.

MooFlow

Mooflow
A beautiful gallery with nice animation and reflections. It supports different image loading methods.

Image gallery with Mootools

Tutorialdog gallery with Mootools
A solution for creating a HTML friendly Javascript image gallery using mootools.

Photo Gallery

e2 Photo Gallery
(E)2 Photo Gallery is a open source gallery designed to allow you to upload your photos to a desired folder, tell the (E)2 Photo Gallery what folder to look at and it will automatically load the images using PHP.

Imago

Imago
Imago is an Ajax Image Gallery with focus on simplicity and ease of use. Whether your photos are on flickr, smugmug or you'd like to host photos yourself, Imago can show them.

Protoflow

Protoflow
ProtoFlow is a coverflow effect written in Javascript. It uses Prototype and Scriptaculous to do bulk of the work and it uses Reflection.js to do all the image reflections stuff!

Lightbox2

Lightbox
Lightbox 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.

Minishowcase

Minishowcase
Minishowcase is a small and simple php/javascript online photo gallery, powered by AJAX/JSON that lets you put easily your images in an online gallery, without having to configure databases or changing and customising code (though you may do it if you feel so) allowing to have an up-and-running gallery in a few minutes.

JonDesign's SmoothGallery

JondesignsSmoothGallery
Unlike other systems out there, JonDesign's SmoothGallery is designed from the ground up to be standard compliant: You can feed it from any document, using custom css selectors. And even better, this solutions is very lightweight: The javascript file is only 16kb.

Ajax Photo Gallery

Ajax Photo Gallery
The AJAX version of AgileGallery is a free AJAX photo gallery that rips through the XML output from Picasa (a free download from google) and generates DHTML for the paging and thumbnails and displays the full sized photos along with any description entered in Picasa. Since this photo gallery uses AJAX technology, it eliminates the need for any page refresh as the user pages through the photos.

zenphoto

Zenphoto
Zenphoto is an answer to lots of calls for an online gallery solution that just makes sense. After years of bloated software that does everything and your dishes, zenphoto just shows your photos, simply. It's got all the functionality and "features" you need, and nothing you
don't. Where the old guys put in a bunch of modules and junk, we put a lot of thought. We hope you agree with our philosopy: simpler is better.

Couloir.org: Resizing, Fading Slideshow Demo - AJAX Slideshow

Litebox
This photo slideshow is a demonstration of Flash-like behavior implemented solely in Javascript, HTML, and CSS. The code is offered as-is - Couloir.org offers no technical support. However, you are permitted to use it on your own project so long as you do so according to the rules outlined in the Creative Commons 'Attribution-ShareAlike 2.0′ License and the license terms contained in the associated, third-party APIs.Grey Box
A pop-up window that doesn't suck. GreyBox can be used to display websites, images and other content in a beautiful way.Lightbox2.
Lightbox JS 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.Litebox
Litebox is a modified version of Lightbox v2.0 created with one thing in mind, size reduction. Litebox utilizes the 3kb javascript library moo.fx in association with prototype.lite, giving us the basic tools we need to make this work and you the ability to expand.

Multifaceted Lightbox

Multifaceted Lightbox
A script (JavaScript) that allows you to focus the users attention on a particular portion of the screen. It creates the equivalent of a modal dialog box - this means that while the user looks at this focused part of the screen, they can't interact with the rest of the screen.

Slightly ThickerBox 1.7

Triptracker
"Previous Image" and "Next Image" links. The result is that you can use Slightly ThickerBox to create image galleries. In addition, you can create groups of galleries by setting a "rel" attribute on the links. (I also moved the Caption and Close link to the top and made the script case insensitive.)TripTracker
The TripTracker slideshow is a lightweight JavaScript image viewer with an animated slideshow feature.

Slimbox, the ultimate lightweight Lightbox clone

Slimbox
Slimbox is a 7kb visual clone of the popular Lightbox JS v2.0 by Lokesh Dhakar, written using the ultra compact mootools framework. It was designed to be small, efficient, more convenient and 100% compatible with the original Lightbox v2.

Suckerfish HoverLightbox

Suckerfish Hover Lightbox
The Suckerfish HoverLightbox is a mashup of three very popular Web design techniques blended together to offer a new way of presenting your image galleries.

Suckerfish HoverLightbox Redux

ThickBox 2.1.1

Thickbox
ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.

A Photograph Gallery

A Photograph Gallery
Just a simple :hover over thumbnail images to give a full size view of each photograph. With all but Opera you can also click the thumbnails to retain the image on the screen. Text can be added at the bottom of each picture. Ideal for photograph albums.

A simple CSS photo-album

A Simple Css Photo Album
The text numbers and images are held in an unordered list without any extra markup (no 'ems' or 'spans' etc). The CSS just styles the text numbers so that they appears in a box and the images so that they are hidden until your visitor clicks a number square.

Cross Browser Multi-Page Photograph Gallery

Cross Browser Multi Page
Based on Suckerfish HoverLightbox this one uses my multi-page layout system but includes images instead of text. Unlike the Suckerfish HoverLightbox this version is pure CSS.

CSS Image Gallery

Dynamicdrive Css Imagegallery
":hover" pseudo class to cause an element to react onMouseover. When that happens, an absolutely positioned container holding the enlarged image, anchored on the page by another container with position set to relative, is shown. Furthermore, it's possible to modify the behavior so the enlarged images are only shown onClick, though IE6 currently doesn't support this behavior well. The gallery works in IE6+, Firefox, Opera 8+.

CSS: Photo Showcase

Css Photo Showcase
This experiment uses CSS and basic markup to create a simple way to display photo thumbnails on your site while offering convenient fast zoom viewing, even for dialup users.

Hoverbox Image Gallery

Hoverbox Imagegallery
Basically, it's a super light-weight (8kb) roll-over photo gallery that uses nothing but CSS.

Photo scroll gallery

Photo Scroll Gallery
A combination of several of my previous galleries to give a scrolling 'thumbnail' image, a medium size image on hover and a full size image on click. The thumbnail, medium size and full size images are all the same image just resized using CSS. The thumbnails are square to make the scrolling area simpler to work with. This does make these images a little distorted but not so much that they look wrong.

Sliding Photograph Galleries

Sliding Photograph Galleries
It is just an unordered list of images that are normally compressed vertically (reduction 8:1). When you hover over one of these compressed images it expands to full size. It is based on my sliding menu system and adapted to use images. No thumbnails are required and all the images are 'pre-loaded'.This method can be used either vertically, as shown, or horizontally.

xImgGallery - Javascript Image Gallery & Slideshow

Ximg Gallery
This script implements a Javascript image gallery and slideshow - all in one file.

easyAlbum

Easyalbum
A DOM photo Gallery solution that is browser friendly, keyboard friendly, bandwidth friendly and more.

ImageGal

imagegal is a simple PHP script that will automagically create a JS/CSS/DHTML powered image gallery for you when dropped into a directory containing images. This simple script was inspired by a Jeremy Keith's article on aListApart.com.

Highslide JS

Highslide Js
Highslide JS is a piece of JavaScript that streamlines the use of thumbnail images on web pages. The library offers these features and advantages: No plugins like Flash or Java required. Popup blockers are no problem. The images expand within the active browser window.

jQuery Gallery

Jquery Gallery version 1.0
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.

MooPix

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.

Flickrshow

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.

Galleria

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 demo 1 - Galleria demo 2

LightWindow v2.0

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.

Image Transition Manager

Image Transition Manager: image transitions with scriptaculous
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.

ThickBox 3.1

ThickBox 3.1
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.

jqGalViewIII

jqGalViewIII

Here we have yet another photo / image gallery, except at this point it is only a proof of concept. I see a ton of photo galleries in Flash and see a lot of effects that just can't be done in JavaScript, but a ton of effects that can be achieved

Modified Hoverbox Image Gallery

Modified Hoverbox Image Gallery
This following is a modified version of Nathan's incredible Hoverbox Image Gallery. This version uses a single image for thumbnail/larger view and partially supports :active and :focus states for keyboard only users.

Spry

Image Gallery with Spry
Image Gallery made with the Spry framework.

FrogJS Javascript Gallery

FrogJS Javascript Gallery
FrogJS is a simple, unobtrusive javascript gallery. It’s not a replacement for other thumbnail galleries like Lightbox JS, but a different way of showcasing galleries.

Photo Folder

Photo Folder
PhotoFolder scans a given folder for JPEG files with any number of thumbnail sizes per image. If the resized images do not yet exist, it will automatically create the thumbnails for you.

Pyxy

Pyxy-gallery
Pyxy-gallery is an AJAX image gallery in PHP and JavaScript, which optionally uses lightbox.js. It is designed to be an ultra-light-weight, "drop-in" image gallery.

Language
Translate this page to English Translate this page to French Translate this page to Vietnamese


Free JavaScript Tutorials & Articles
at www.JavaScriptBank.com