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 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 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 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 is a jQuery slideshow system for creating smooth transitions with images.
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.
Present you images in stylish way. The links are unobtrusively
highjacked to open the images in an inpage popup with drop shadow and
border.
A simple image gallery/viewer that is fully unobtrusive, so you can still view the images when JS is disabled.
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 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 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).
Slideshow 2 is a javascript class for Mootools 1.2 to stream and animate the presentation of images on your website.
A beautiful gallery with nice animation and reflections. It supports different image loading methods.
A solution for creating a HTML friendly Javascript image gallery using mootools.
(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 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 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!
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 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.
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.
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 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
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 Lightbox2 .
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.
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.
"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
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.
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.
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.
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.
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.
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.
":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+.
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.
Basically, it's a super light-weight (8kb) roll-over photo gallery that uses nothing but CSS.
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.
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.
This script implements a Javascript image gallery and slideshow - all in one file.
A DOM photo Gallery solution that is browser friendly, keyboard friendly, bandwidth friendly and more.
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 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 is a plugin for the jQuery JavaScript library. It uses the Reflection.js script to add a reflection effect dynamically to your images.
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
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 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 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
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
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.
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
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.
Image Gallery made with the Spry framework.
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.
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-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
More
Chinese
Taiwan
Deutsch
Italian
Janpanese
Korean
Turkish
Indonesian
Ukraine
Polish
Spanish
Slovenian
Recent articles Insights for Advanced Zooming and Panning in JavaScript Charts How to open a car sharing service Vue developer as a vital part of every software team Vue.js developers: hire them, use them and get ahead of the competition 3 Reasons Why Java is so Popular Migrate to Angular: why and how you should do it The Possible Working Methods of Python Ideology JavaScript Research Paper: 6 Writing Tips to Craft a Masterpiece Learning How to Make Use of New Marketing Trends 5 Important Elements of an E-commerce Website Top view articles Adding JavaScript to WordPress Effectively with JavaScript Localization feature Top 10 Beautiful Christmas Countdown Timers Top 10 Best JavaScript eBooks that Beginners should Learn 65 Free JavaScript Photo Gallery Solutions 16 Free Code Syntax Highlighters by Javascript For Better Programming Best Free Linux Web Programming Editors Top 50 Most Addictive and Popular Facebook mini games More 30 Excellent JavaScript/AJAX based Photo Galleries to Boost your Sites Top 10 Free Web Chat box Plug-ins and Add-ons The Ultimate JavaScript Tutorial in Web Design