BestWeb Nashville

CSS Photo Galleries

Nashville Web Design Resources

 barred owl at Radnor Lake in Nashville Tennessee

NOTE: Be sure to see the link(s) at bottom of this page for additional resources if you are looking for free, public domain, dynamic photo galleries that you can use in your projects without having to be a programmer.

We have decided to compile a list of some of the best free photo gallery apps that can be implemented on client websites. Clients who would like a photo gallery or slideshow on their sites can review these examples and select the gallery application that best meets their needs. Just let us know.

There are three categories of galleries here:

  1. Ajax Image Galleries and Lightboxes
  2. CSS-Based Image Galleries
  3. JavaScript + CSS-based Galleries and DHTML-Galleries

NOTE: Most of these photo gallery apps are shown in an even more aesthetic, useful way at the supreme web development blog known as Smashing Magazine. You may prefer to peruse these CSS photo gallery options on Smashing Magazine's post entitled 30 Scripts For Galleries, Slideshows and Lightboxes.

Ajax Image Galleries and Lightboxes

Minishowcase Photo Gallery

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 customizing code (though you may do it if you feel so) allowing to have an up-and-running gallery in a few minutes.
http://minishowcase.net/

SmoothGallery from JonDesign

Using mootools v1.11, this JavaScript gallery and slideshow system allows you to have simple and smooth (cross-fading) image galleries, slideshows, showcases and other cool stuff on your website.
http://smoothgallery.jondesign.net/

AgileGallery - 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.
http://www.agilegallery.com/ajax-photo-gallery.html

JoshuaInk.com - CSS Photo Gallery Template

The technique is based on Eric Meyer's pure CSS popups and as you would except this method applied to the thumbnails works well in Firefox, Safari, Opera etc. Although Eric's demo works in Internet Explorer, I ran into some problems layering over images. NOTE: This is an older gallery template that does not play well with recent versions of IE; fixes are possible, but you will have to come up with them yourself.
http://joshuaink2006.johnoxton.co.uk/templates/gallery/index.htm

Lightbox2

Lightbox2 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.
http://www.huddletogether.com/projects/lightbox2/

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.
http://fennecfoxen.org/pyxy/gallery/p>

Multi-faceted Lightbox from GregPhoto

This is a script (JavaScript) that allows you to focus the user’s 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.
http://www.gregphoto.net/lightbox/

Slightly ThickerBox 1.7

Slightly ThickerBox is a modification of Cody Lindley’s Thickbox script. I modified it for use on my Jason’s Toolbox Redesign. The modifications allow the script to generate “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.)
http://www.jasons-toolbox.com/SlightlyThickerBox/

TripTracker Slideshow

The TripTracker slideshow is a lightweight JavaScript image viewer with an animated slideshow feature.
http://slideshow.triptracker.net/

Slimbox

Slimbox, the ultimate lightweight Lightbox clone, 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.
http://www.digitalia.be/software/slimbox

Suckerfish HoverLightbox

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.
http://mondaybynoon.com/2006/03/27/suckerfish-hoverlightbox/

Suckerfish HoverLightbox Redux

The Redux has a number of improvements, mostly visual, but some behavioral changes as well. Before going into detail, it’s important to give due credit to those who helped make the Suckerfish HoverLightbox a possibility.
http://mondaybynoon.com/2007/02/19/suckerfish-hoverlightbox-redux/

ThickBox 2.1.1

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.
http://jquery.com/demo/thickbox/

CSS-Based Image Galleries

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. This is ideal for photograph albums.
http://www.cssplay.co.uk/menu/gallery.html

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.
http://www.cssplay.co.uk/menu/photo_album.html

Cross-Browser, Multi-Page Photograph Gallery

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.
http://www.cssplay.co.uk/menu/lightbox.html
New version:
http://www.cssplay.co.uk/menu/slide_show.html

CSS Image Gallery

This is a purely CSS based image gallery that displays larger versions of thumbnail images dynamically when the mouse hovers over them. A rich HTML caption can be added to the enlarged image, and every aspect of the Image Gallery exists as plain HTML on the page. The idea is to use CSS’s “: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+.
http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/

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.
http://green-beast.com/experiments/css_photo_showcase.php

Hoverbox Image Gallery

This is a super light-weight (8kb) roll-over photo gallery that uses nothing but CSS.
http://sonspring.com/journal/hoverbox-image-gallery

Photo Scroll Gallery

This is 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.
http://www.cssplay.co.uk/menu/photo_scroll.html

Sliding Photograph Galleries

This 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.
http://www.cssplay.co.uk/menu/gallery3l.html

JavaScript + CSS-based Galleries and DHTML-Galleries

xImgGallery

This script implements a JavaScript image gallery and slideshow - all in one file. Unlike version 1, this script (version 2) does not reload the page, just the images - and it has an auto-slide feature. It now supports captions. The code is still quite ugly but I'm working on cleaning it up and improving it. This is a self-contained demo - it does not use a JavaScript library. Eventually I'll make an object out of this and include it in the X library.
http://cross-browser.com/toys/img_gallery_2.php

easyAlbum

This is a DOM photo gallery solution that is browser friendly, keyboard friendly, bandwidth friendly, and more.
http://tjkdesign.com/articles/gallery/photo_gallery.asp

ImageGal

ImageGal is a simple PHP script that will automatically 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.
http://dasme.org/imagegal/

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.
http://highslide.com/
http://highslide.com/index.htm
http://highslide.com/examples/gallery-dark.html

Satellite Image Gallery

Satellite is an all in one photo gallery website that takes advantage of Yahoo Flickr’s image hosting and management tools. You can upload and manage your images using Flickr and host your portfolio on your own server via Satellite.
http://design.tedforbes.com/

Dhonishow Image Gallery

Dhonishow shows pictures online in a very artistic, creative way using JavaScript.
http://www.dhonishow.de/

More Resources: Dynamic Photo Galleries

Stunning Collection of Dynamic Photo Galleries -- Nowadays it's hardly possible to find a person in the Net who doesn't have a website. Even if you have no any business online, you may easily create a personal website or a blog just for your soul where you may write about yourself, your family and even pets, express your thoughts and opinions on different issues. But what personal website can be without a photo gallery? If you want to share your pictures with your friends, you need an attractive Flash photo gallery to make the slideshow more dynamic, eye-catching and impressive...In this roundup you will find the most impressive Flash galleries and javascript galleries handpicked from all over the Internet: from web based scripts to Flash components ready to be integrated into your website. You won’t need any programming skills to install or use it. Just embed it into your website and script will automatically form a slideshow from a specified folder or an XML files or from Flickr photostream. All these Flash galleries are free, so you may use them for any purposes...