75 CSS, JavaScript & Flash Photo Galleries, Slideshows, Lightboxes And Scripts

Whatever images you have to present, let it be family photos, vacation snapshots or creative artistic works, you can present them in a variety of ways. Use a big screen, in slide shows or in a thumbnails gallery. However, it’s important to offer it in an attractive and intuitive way. Furthermore, the presentation itself can make images more valuable and simplify the browsing through hundreds of slides.

Of the available hundreds of solutions for web-based galleries here is a selected 75 of them with impressive sideshows, light boxes and galleries you can use for effective presentations of your images. Let’s take a look.

1. SimpleViewer : SimpleViewer is a free, customizable Flash image viewing application.
   
   
2. FlickrViewer : allows you to view a Flickr photo set in SimpleViewer. SimpleViewer is a popular flash photo viewing tool, so FlickrViewer allows you to load photos from one of your flickr photo sets into this.
   
   
3. PictoBrowser : This is probably the easiest method for displaying an image gallery on your site or blog. It takes about a minute or two to set up. Now you can display your flickr photos in style. To build your own go here to the PictoBrowser builder page.
   
   
4. Zenphoto : 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.
   
   
5. FrogJS Gallery : FrogJS is a simple, unobtrusive javascript gallery. It is not a replacement for other thumbnail galleries such as Lightbox JS, but rather a different way of showing galleries. This type of gallery is best used in photo stories and other places where a page-by-page gallery would normally be used.
   
   
6. SlideShowPro : Flash-based slideshow application for displaying photos and videos on your web site. Available as an ActionScript 2 & 3 component for Flash and as a gallery extension for Lightroom, SlideShowPro features over 100 parameters to control color, layout, size, and behavior.
   
   
7. SmoothGallery : 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…
   
   
8. CSS Photo Shuffler : A Javascript + CSS replacement for Flash photo fading slideshow.
   
   
9. Highslide JS : is an open source image, media and gallery viewer written in JavaScript. Some of its advantages are Quick and elegant looking, No plugins like Flash or Java required, Popup blockers are no problem. The content opens within the active browser window,Single click. After opening the image or HTML popup, the user can scroll further down or leave the page without closing it.
   
   
10. CSS Sliding Gallery : 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.
    
    
11. DOM Gallery : Using unobtrusive DOM scripting to create the slideshow on the fly.There are no hidden containers (span, div, …) nor attributes to pollute the HTML markup. What appears in the “slideshow” is nothing other than the value of these 3 attributes alt, title, longdesc.
    
    
12. joshuaink CSS Gallery : 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.
    
    
13. TripTracker Slideshow : The viewer is free to use in personal or commercial web pages, provided that the script is not sold or exchanged for profit. An unbranded version of the slideshow, suitable also for resale, may be purchased for a one-time per-site license fee
    
    
14. AJAX Slideshow : It resizes, it transitions, it fades in and out and it’s not flash! The new AJAX slideshow on the homepage of my site comes to you courtesy of Scott Upton at Uptonic. This smooth, easy to use delight, is a great toolbox addition, for anyone who considers themselves part of the new breed of AJAX designers and developers.
    
    
15. Cross browser CSS slide show : Hover the mouse over Set 1, Set 2 or Set 3 above to drop down the projector screen and show a 4×4 array of photographic slides in both portrait and landscape format.
    
    
16. minishowcase : 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.
    
    
17. Sliding List Gallery : Pure CSS Gallery
    
    
18. Suckerfish HoverLightbox : Being that Suckerfish, Hoverbox, and Lighbox were all written in an organized and straightforward fashion, combining them was fairly simple. JavaScript files are controlling the Suckerfish and Lightbox separate for organizational sake, and also used a separate stylesheet to control the Suckerfish and Lightbox style. Being that all three techniques were developed to work cross browser, only minimal edits were required in the CSS to have the gallery.
    
    
19. 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.
    
    
20. 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.
    
    
21. iPhoto-like image resizing using Javascript : If you use the script.aculo.us slider control to capture input values, it’s really just a matter of converting those values into something useful and modifying styles.

Note: OS X folks using Firefox will likely get some stutter, due to a crippling, 3 year old bug.



22. Filebrowser : The filebrowser is a lightweight PHP application that allows you to thumbnail images and view them in a web browser. That’s it. Short and sweet. Like all of our software at Lussumo, the Filebrowser is 100% open-source. You can take it and alter it and use it free of charge. The GPL is your friend.
    
    
23. image SlideShow : This is a script with a preview pane at top, and a sliding filmstrip at the bottom.
    
    
24. 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.
    
    
25. 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.
    
    
26. GreyBox : GreyBox can be used to display websites, images and other content in a beautiful way.
    
    
27. 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.
    
    
28. Lytebox : Written from the Lightbox class that Lokesh Dhakar (http://www.huddletogether.com) originally wrote. The purpose was to write a self-contained object that eliminated the dependency of prototype.js, effects.js, and scriptaculous.js. Since the original version of Lytebox (which released with iFrame support), major modifications have been made to improve performance as well as “Slideshow” support, “Themes” support, HTML content support (as opposed to just images) and many more configurable options that allow you to customize the look and feel of Lytebox.
    
    
29. A CSS ONLY Light Box : This is a CSS Light Box that with a little bit of ‘expression’ can be made to work in IE6. Not as ‘flash’ as the javascript version but it does work with javascript off in all browsers (except IE6).Just hover over any of the thumbnail images below to open a larger image which will be centered horizontally on the screen.Hover over the white cross to close the large image and reveal the thumbnails
    
    
30. Photo scroll gallery : 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.
    
    
31. 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.
    
    
32. Slightly ThickerBox : 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.
    
    
33. Slimbox 1.7 for MooTools 1.2 : Slimbox is a 4 KB visual clone of the popular Lightbox 2 script by Lokesh Dhakar, written using the compact MooTools javascript framework. It was designed to be very small, efficient, standards-friendly, fully customizable, more convenient and 100% compatible with the original Lightbox 2.
    
    
34. ThickBox 3.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.
    
    
35. CSS Galery 2 : 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.
    
    
36. CSS Photo Album : Well this is about as simple as it gets. 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.
    
    
37. CSS Gallery 3 : 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.
    
    
38. Mike’s Experiments – 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. No magic needed (though magic could be added, but that’s for another day).
    
    
39. xImageGallery : 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.
    
    
40. Satellite™ : 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™. When you upload images to Flickr, your website is automatically updated! You can further take advantage of Flickr’s Organizer to create Photosets and assign Keywords to your images. All of the work you do on Flickr is mirrored on your website via Satellite™.
    
    
41. Dhonishow : Showing Picture Online with Javascript.
    
    
42. Scrolling Photograph Gallery : Just another simple :hover over thumbnail images to give a full size view of each photograph. Works in IE6, Mozilla and Firefox (latest versions) and you can also click the thumbnails to retain the image on the screen. Text can be added at the bottom of each picture.
    
    
43. CSS Gallery from Webreference : this gallery will load fairly quickly with up to twelve medium sized (approximately 400px by 250px and 15-20KB) images, as it requires all the images to be preloaded before it will work. Any more than this will cause the page loading time, to become unacceptable.
    
    
44. CSS xHTML Gallery : Photo gallery with nothing but pure xHTML and CSS.
    
    
45. Dynamic Image Gallery and Slideshow : This extremely lightweight JavaScript image gallery and slideshow script clocks in under 3kb packed and includes a number of cool features.
    
    
46. Photo Album Script : Ideal for displaying multiple images at once, with links to cycle through additional batches of images.
    
    
47. AutoViewer : AutoViewer is a free, customizable Flash image viewer. AutoViewer is designed to display a linear sequence of images and captions.
    
    
48. Facebook Sliders With Mootools and CSS : Looks just a bit like Facebook, doesn’t it? Anyways, play with the image using the provided sliders!
    
    
49. Free Flash Photo Album
    
    
50. Art Flash Gallery
    
    
51. Gallery by using z-index and jQuery : Combine the CSS property ‘z-index’ and the power of jQuery to create a unique gallery which have a appearance of a pile of pictures.
    
    
52. Polaroid Gallery : A free, opensource flash gallery developed by Christopher Einarsrud, in the year of 2006
    
    
53. TiltViewer : TiltViewer is a free, customizable 3D Flash image viewing application.
    
    
54. Flashmo 094 spiral carousel xml : Use the flash source codes at your own risk and flashmo.com is not responsible for anything including ActionScript codes.Although it is not a must, it is better to put a link back to this site “designed by flashmo.com” on your website if you can.
    
    
55. 3D Curve Wall : Unique Flash based 3D curve wall similar to Flashloaded version, but this one is free.
    
    
56. CSS Decorative Gallery : All you need is an extra <span> tag and apply a background image to create the overlaying effect. It is very easy and flexible — see my demos with over 20 styles, from a simple image icon to a rounded corner to a masked layer (both decorative and complex).
    
    
57. Parallax Gallery : In this tutorial, you will learn how to make a Flash parallax scrolling gallery from scratch. Parallax scrolling is frequently used in most 2D animation and games, where the background images and foreground images scroll at different rate of speed. This will create an illusion of depth as the background images are moving slower than the foreground images.
    
    
58. Flash Gallery : A web application that allows you to create a slideshow on your website easy and fast. 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 from Flickr photostream.
    
    
59. Easy Slider : Enables images or any content to slide horizontally or vertically on click. It is configurable with css alone. So, basically you link to plugin file, set the content up and style it with css.
    
    
60. Auto Playing Gallery : Uses the Coda Slider pretty much “out of the box”. Sure the design was heavily altered to fit the job, but the actual functionality wasn’t altered in any way. I recently had the calling to build a “featured content area”. The Coda Slider fit the bill almost perfectly, but it needed a little functionality surgery to do what I wanted it to do.
    
    
61. jQuery Gallery Scroller (jqGalScroll) : Takes list of images and creates a smooth scrolling photo gallery scrolling vertically, horizontally, or diagonally. The plugin will also create pagination to allow you to flow through your photos.
    
    
62. jQuery Virtual Tour : This is an extension to the simple panorama viewer that allows you to play a little bit more with jQuery by adding interactivity to transform some panoramic views into a virtual tour!
    
    
63. jQuery Multimedia Portfolio : This plugin for jQuery will automatically detect the extension of each media and apply the adapted player.
    
    
64. JQZoom : A javascript image magnifier built at the top of the popular jQuery javascript framework.jQzoom is a great and a really easy to use script to magnify what you want.
    
    
65. BarackSlideshow : A very tiny and lightweight slideshow script, that takes the power of MorphList to enhance visualization and navigation of the images (demo).
    
    
66. Ajax Powered Gallery : The photos and titles are read from an XML file, and the thumbnails are pre-generated using Photoshop actions
    
    
67. s3Slider jQuery Plugin : The s3Slider jQuery plugin is made by example of jd`s smooth slide show script.
    
    
68. Javascript Slideshow : 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.
    
    
69. Slideshow 2! : 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. Please view the source of this page for usage information.
    
    
70. Pirolab Lightbox : Lightbox scripts have become a very popular way of displaying images online in recent months. There are a huge number of them available, using a variety of different frameworks and languages. DesignShack offers a new jQuery Lightbox script It has been designed and created by Diego Valobra.
    
    
71. Slider Gallery : This ‘product slider’ is similar to a straight forward gallery, except that there is a slider to navigate the items, i.e. the bit the user controls to view the items.
    
    
72. noobSlide : A lightweight “class” written with the mootools library with which you can build “slides” from simple to complex, of course, to get the maximum benefit you need to learn how to work with mootools.
    
    
73. jFlow Gallery : Using the Wonderful jFlow Plugin
    
    
74. Galleria : 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.
    
    
75. Complex Slideshow : The addition of the four tabs allows you to add up to 72 more photos making a total of 96 possible separate images. As you can see from this demonstration you do not have to populate all the possible positions, the styling can cope with any number from 1 to 24 on each tabbed page.