Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

30 Scripts For Galleries, Slideshows and Lightboxes

Family photos, vacation snapshots or creative artistic works: whatever images you have to present, you can present them in a variety of ways. On a big screen, in slide shows or in a thumbnails gallery. However, to convey the message of presented data effectively, 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.

There are literally hundreds of solutions for web-based galleries out there. We’ve selected 30 scripts of impressive slideshows, lightboxes and galleries you can use for effective presentations of your images. Most of them don’t have any technical requirements, so you can use them right away. Let’s take a look.

Ajax Image Galleries & Lightboxes Link

  • Ajax Photo Gallery1
    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.

    Screenshot2
  • Pyxy-gallery3
    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.

    Screenshot4
  • zenphoto5
    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.

    Screenshot6
  • Couloir.org: Resizing, Fading Slideshow Demo – AJAX Slideshow7
    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.
  • Multifaceted Lightbox8
    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.

    Screenshot9
  • TripTracker10
    The TripTracker slideshow is a lightweight JavaScript image viewer with an animated slideshow feature.

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

CSS-Based Image Galleries Link

  • A Photograph Gallery15
    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.

    Screenshot16
  • A simple CSS photo-album17
    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.

    Screenshot
  • Cross Browser Multi-Page Photograph Gallery18
    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.

    Screenshot19
  • CSS Image Gallery20
    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+.

    Screenshot21
  • CSS: Photo Showcase22
    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.

    Screenshot23
  • Hoverbox Image Gallery24
    Basically, it’s a super light-weight (8kb) roll-over photo gallery that uses nothing but CSS.

    Screenshot25
  • Photo scroll gallery26
    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.

    Screenshot27
  • Sliding Photograph Galleries28
    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.

    Screenshot29

JavaScript + CSS-based Galleries & DHTML-Galleries Link

  • xImgGallery – Javascript Image Gallery & Slideshow30
    This script implements a Javascript image gallery and slideshow – all in one file.

    Screenshot31
  • easyAlbum32
    A DOM photo Gallery solution that is browser friendly, keyboard friendly, bandwidth friendly and more.

    Screenshot33
  • ImageGal34
    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 JS35
    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.

    Screenshot36
  • Satellite37
    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.
  • Dhonishow38
    Showing Picture Online with Javascript.

Footnotes Link

  1. 1 http://www.agilegallery.com/ajax-photo-gallery.html
  2. 2 http://www.agilegallery.com/ajax-photo-gallery.html
  3. 3 http://fennecfoxen.org/pyxy/gallery
  4. 4 http://fennecfoxen.org/pyxy/gallery
  5. 5 http://www.zenphoto.org/
  6. 6 http://www.zenphoto.org/
  7. 7 http://www.couloir.org/js_slideshow/
  8. 8 http://www.gregphoto.net/lightbox/
  9. 9 http://www.gregphoto.net/lightbox/
  10. 10 http://slideshow.triptracker.net/
  11. 11 http://slideshow.triptracker.net/
  12. 12 http://www.digitalia.be/software/slimbox
  13. 13 #
  14. 14 http://www.mootools.net/
  15. 15 http://www.cssplay.co.uk/menu/gallery.html
  16. 16 http://www.cssplay.co.uk/menu/gallery.html
  17. 17 http://www.cssplay.co.uk/menu/photo_album.html#nogo
  18. 18 http://www.cssplay.co.uk/menu/lightbox.html#flower8
  19. 19 http://www.cssplay.co.uk/menu/lightbox.html#flower8
  20. 20 http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/
  21. 21 http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/
  22. 22 http://mikecherim.com/experiments/css_photo_showcase.php
  23. 23 http://mikecherim.com/experiments/css_photo_showcase.php
  24. 24 http://sonspring.com/journal/hoverbox-image-gallery
  25. 25 http://sonspring.com/journal/hoverbox-image-gallery
  26. 26 http://www.cssplay.co.uk/menu/photo_scroll.html#nogo
  27. 27 http://www.cssplay.co.uk/menu/photo_scroll.html#nogo
  28. 28 http://www.cssplay.co.uk/menu/gallery3l.html
  29. 29 http://www.cssplay.co.uk/menu/gallery3l.html
  30. 30 http://cross-browser.com/toys/img_gallery_2.php
  31. 31 http://cross-browser.com/toys/img_gallery_2.php
  32. 32 http://tjkdesign.com/articles/gallery/photo_gallery.asp
  33. 33 http://tjkdesign.com/articles/gallery/photo_gallery.asp
  34. 34 http://dasme.org/imagegal/
  35. 35 http://vikjavev.no/highslide/
  36. 36 http://vikjavev.no/highslide/
  37. 37 http://design.tedforbes.com/
  38. 38 http://www.dhonishow.de/
SmashingConf Barcelona 2016

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Advertisement

Sven is the co-founder and former CEO of Smashing Magazine. He's now writing at his Conterest Blog, where he focuses on blogs, content strategy and publishing — all in German.

  1. 1

    Lightbox is defenitly the way to go if you want the ability to show a thumbnail and provide the visitor a nice, clean and intuitive big image of it.
    Thanks for this useful post!

    0
  2. 2

    What about Scott Schiller’s 35mm Photo Viewer:
    http://www.schillmania.com/projects/35mm/

    I think his is really cool, works very well. Always been a fan of his work.

    0
  3. 3

    Very Thanks!
    ขอบคุณมากครับ

    2
  4. 4

    Thak you for this post. I realy need, all of them in one place.

    -2
  5. 5

    rss-feed.se - senaste nyheterna

    May 18, 2007 12:17 am

    Kind of nice, but I don’t like Gallerys at all.

    :D

    -37
  6. 6

    criticalerror

    May 18, 2007 7:59 am

    2 Good works in the same day!!!
    Keep going!!!!

    0
  7. 7

    The CSS one looks nice.

    3
  8. 8

    That’s another PHP gallery script which can be added to the list:: http://andyydev.com/project.php?file=QuickGal

    -4
  9. 9

    Sherif Mansour

    May 18, 2007 9:19 am

    Top stuff again Smashing Magazine – great list

    1
  10. 10

    this is perfect for my next gallery :) thanks smashing magazines

    -2
  11. 11

    Famous Photos

    May 18, 2007 3:44 am

    You missed one: http://imagin.ro , very powerful and complex …

    5
  12. 12

    Hi: I ran into yet another gallery solution last night called simpleviewer. Free for personal use, very easy to use (even for the technodolt) and very neat presentation with easy navigation. There is a version that integrates very well with Picasa2. Using the Picasa version means you don’t even have to create your own thumbnails. If you add captions to your Picasa gallery, these are included with the gallery images. If you don’t add captions in Picasa, the image file names are displayed instead. Captions are better. :)

    -2
  13. 13

    Ive tried most of these galleries but the one I keep going back to now isnt on this list

    have a look at Photostack

    http://photostack.org/

    -5
  14. 14

    Sean McManus

    May 18, 2007 4:28 pm

    Great list, thanks. I’ll check them out. Some of the screenshots are a bit confusing though – it’s hard to see where the screenshot starts and your content ends.

    -2
  15. 15

    Thanks for putting this list together, handy having a list of galleries, slideshows and lightboxes all in one place.

    0
  16. 16

    great scripts for web albums,
    thanks…

    0
  17. 17

    An example of lightbox2 implementation with flickr http://flickr.mathewvp.com

    0
  18. 18

    Personally I use Flickr to archive all my photos and recently I came across this script from naggle.com which provides a beautiful gallery with seamless integration with the Flickr API.

    -1
  19. 19

    Hey.. it’s very nice to see all good image galleries in a single page.. i was searching for a good image gallery to use in my site.. thanks to smashing magazine..lots of million thanks to you…

    0
  20. 20

    that is cool! thanks a lot

    0

↑ Back to top