30 Scripts For Galleries, Slideshows and Lightboxes

Advertisement

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

  • Minishowcase1
    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.
    Screenshot2
  • JonDesign’s SmoothGallery 3
    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.
    Screenshot4
  • Ajax Photo Gallery5
    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.
    Screenshot6
  • Pyxy-gallery7
    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.
    Screenshot8
  • zenphoto9
    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.
    Screenshot10
  • Couloir.org: Resizing, Fading Slideshow Demo – AJAX Slideshow11
    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 Box12
    A pop-up window that doesn’t suck. GreyBox can be used to display websites, images and other content in a beautiful way.
  • Lightbox213
    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.014 created with one thing in mind, size reduction. Litebox utilizes the 3kb javascript library moo.fx15 in association with prototype.lite, giving us the basic tools we need to make this work and you the ability to expand.
    Screenshot
  • Multifaceted Lightbox16
    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.
    Screenshot17
  • Slightly ThickerBox 1.718
    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.)
  • TripTracker19
    The TripTracker slideshow is a lightweight JavaScript image viewer with an animated slideshow feature.
    Screenshot20
  • Slimbox, the ultimate lightweight Lightbox clone21
    Slimbox is a 7kb visual clone of the popular Lightbox JS v2.022 by Lokesh Dhakar, written using the ultra compact mootools23 framework. It was designed to be small, efficient, more convenient and 100% compatible with the original Lightbox v2.
    Screenshot24
  • Suckerfish HoverLightbox25
    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.
    Screenshot26
  • Suckerfish HoverLightbox Redux27
    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.
  • ThickBox 2.1.128
    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.
    Screenshot29

CSS-Based Image Galleries

  • A Photograph Gallery30
    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.
    Screenshot31
  • A simple CSS photo-album32
    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 Gallery33
    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.
    Screenshot34
  • CSS Image Gallery35
    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+.
    Screenshot36
  • CSS: Photo Showcase37
    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.
    Screenshot38
  • Hoverbox Image Gallery39
    Basically, it’s a super light-weight (8kb) roll-over photo gallery that uses nothing but CSS.
    Screenshot40
  • Photo scroll gallery41
    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.
    Screenshot42
  • Sliding Photograph Galleries43
    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.
    Screenshot44

JavaScript + CSS-based Galleries & DHTML-Galleries

  • xImgGallery – Javascript Image Gallery & Slideshow45
    This script implements a Javascript image gallery and slideshow – all in one file.
    Screenshot46
  • easyAlbum47
    A DOM photo Gallery solution that is browser friendly, keyboard friendly, bandwidth friendly and more.
    Screenshot48
  • ImageGal49
    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 JS50
    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.
    Screenshot51
  • Satellite52
    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.
  • Dhonishow53
    Showing Picture Online with Javascript.

Footnotes

  1. 1 http://minishowcase.frwrd.net/
  2. 2 http://minishowcase.frwrd.net/
  3. 3 http://smoothgallery.jondesign.net/showcase/gallery/
  4. 4 http://smoothgallery.jondesign.net/showcase/gallery/
  5. 5 http://www.agilegallery.com/ajax-photo-gallery.html
  6. 6 http://www.agilegallery.com/ajax-photo-gallery.html
  7. 7 http://fennecfoxen.org/pyxy/gallery
  8. 8 http://fennecfoxen.org/pyxy/gallery
  9. 9 http://www.zenphoto.org/
  10. 10 http://www.zenphoto.org/
  11. 11 http://www.couloir.org/js_slideshow/
  12. 12 http://orangoo.com/labs/GreyBox/
  13. 13 http://www.huddletogether.com/projects/lightbox2/#example
  14. 14 http://www.huddletogether.com/projects/lightbox2/
  15. 15 http://moofx.mad4milk.net/
  16. 16 http://www.gregphoto.net/lightbox/
  17. 17 http://www.gregphoto.net/lightbox/
  18. 18 http://www.jasons-toolbox.com/SlightlyThickerBox/
  19. 19 http://slideshow.triptracker.net/
  20. 20 http://slideshow.triptracker.net/
  21. 21 http://www.digitalia.be/software/slimbox
  22. 22 http://www.huddletogether.com/projects/lightbox2/
  23. 23 http://www.mootools.net/
  24. 24 http://www.digitalia.be/software/slimbox
  25. 25 http://mondaybynoon.com/2006/03/27/suckerfish-hoverlightbox/
  26. 26 http://mondaybynoon.com/2006/03/27/suckerfish-hoverlightbox/
  27. 27 http://mondaybynoon.com/2007/02/19/suckerfish-hoverlightbox-redux/
  28. 28 http://jquery.com/demo/thickbox/
  29. 29 http://jquery.com/demo/thickbox/
  30. 30 http://www.cssplay.co.uk/menu/gallery.html
  31. 31 http://www.cssplay.co.uk/menu/gallery.html
  32. 32 http://www.cssplay.co.uk/menu/photo_album.html#nogo
  33. 33 http://www.cssplay.co.uk/menu/lightbox.html#flower8
  34. 34 http://www.cssplay.co.uk/menu/lightbox.html#flower8
  35. 35 http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/
  36. 36 http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/
  37. 37 http://mikecherim.com/experiments/css_photo_showcase.php
  38. 38 http://mikecherim.com/experiments/css_photo_showcase.php
  39. 39 http://sonspring.com/journal/hoverbox-image-gallery
  40. 40 http://sonspring.com/journal/hoverbox-image-gallery
  41. 41 http://www.cssplay.co.uk/menu/photo_scroll.html#nogo
  42. 42 http://www.cssplay.co.uk/menu/photo_scroll.html#nogo
  43. 43 http://www.cssplay.co.uk/menu/gallery3l.html
  44. 44 http://www.cssplay.co.uk/menu/gallery3l.html
  45. 45 http://cross-browser.com/toys/img_gallery_2.php
  46. 46 http://cross-browser.com/toys/img_gallery_2.php
  47. 47 http://tjkdesign.com/articles/gallery/photo_gallery.asp
  48. 48 http://tjkdesign.com/articles/gallery/photo_gallery.asp
  49. 49 http://dasme.org/imagegal/
  50. 50 http://vikjavev.no/highslide/
  51. 51 http://vikjavev.no/highslide/
  52. 52 http://design.tedforbes.com/
  53. 53 http://www.dhonishow.de/

↑ Back to top Tweet itShare on Facebook

Co-Founder and former CEO of Smashing Magazine. Sven is now writing Science Fiction Stories and looking for a publisher ...

Advertisement
  1. 1

    Son Dakika Haberleri

    August 4, 2010 11:07 pm

    Greate list.
    everybody is looking for an Image Gallery that uses Flickr API to show the photos… But i’m looking for a Flickr-like Gallery. A PHP Script that have almost features of Flickr, like Photo Albums, Tags, Geotagging, Thumbnail generation, Heavy-Ajax-usage, RSS, Flash upload and so on…

    I don’t care about the social thing… Friends, Groups… Just the Album funcionality is ok…

    Does everyone know a script like that?

    0
  2. 152

    Great scripts, but does anyone know of one that would scroll images from right to left, pause when hovered over or can be clicked on to open a new page? maybe to open into a specific gallery category?
    Thanks

    0
  3. 303

    this is for faggots. real developers do it themselves.

    -8
  4. 454

    Want to see a 3D lightbox ?
    try this one with Safari browser !;)
    http://www.baojs.williammcmurray.com/

    1
  5. 605

    Ramesh Vishwakarma

    September 17, 2010 2:12 am

    nice collection of portfolio gallery…. thanks to Smashing Magazine.

    0
  6. 756

    nice collection, quite handy for the simple website builder like myself

    0
  7. 907

    We appreciate smashingmagazine’s efforts to present a useful collection of cute image galleries available online.

    0
  8. 1058

    Great collection!! you are ROCK

    0
  9. 1209

    this sucks! shit!

    -1
  10. 1360

    I released WordPress slideshow plugin. You can see it in action here http://www.sramekdesign.com/wordpress/plugins/all-in-one-slideshow/

    2
  11. 1511

    Greate list.
    everybody is looking for an Image Gallery that uses Flickr API to show the photos…

    0
  12. 1662

    im persian boy. your gallery is very us usefull.

    0
  13. 1813

    wonderful..bravo..this is just the perfect thing I need!

    0
  14. 1964

    Hey, great site you have here, was very fun reading up on your posts.

    0
  15. 2115

    หนังโป๊

    February 12, 2011 9:50 am

    Thanks for action the second to plow this, I finger strongly about it and object learning more on this issue. If thinkable, as you vantage expertise, would you design updating your diary with many entropy? It is extremely implemental for me.

    -1
  16. 2266

    Abderrahmane TAHRI JOUTI

    February 14, 2011 12:19 pm

    I’ll add this one to the list, didn’t make a stand alone script yet but it’s worth looking at:
    http://je-serais-present-aux-mba.com/

    0
  17. 2417

    Great list i have been looking for a solution to update an old dynamic gallery i have neen using for a couole of years now so i will be checking out some of the ones i like to see if i can adapt them to accept dynamic content tganks very much

    -3
  18. 2568
  19. 2719

    I tried out a few before using this one websitepicturegallery.com
    The best thing about it is the fact it uses a database to store the image information but still has a slick ajax based front end (including slide shows).
    Thats it.

    -1
  20. 2870

    These are great scripts!. We’ve been looking for one for a long time, and will be implementing the TripTracker. Thanks.

    0
  21. 3021

    This is a very informative and attractive pic.

    1
  22. 3172

    wow it’s a wonderful i saw your video it’s amassing.

    thanks for sharing.

    photographersgallery.com/by_artist.asp

    0
  23. 3323

    Exactly what I’ve been craving

    Thanks so much for this all in one place!
    I have viewed the videos and it is really great, It give me ideas on how to finish my graphic design courses.

    Many Thanks.

    1
  24. 3474

    Thanks for all the above information.

    However, Is there a script / web service which provides a facility to comment on any pictures ?

    thanks

    regards

    Ameya Gokhale

    1
  25. 3625

    Excellent depth .

    0
  26. 3776

    What sort of camera did you use? That is a really good premium
    quality.

    -1
  27. 3927

    I adore the perspective!

    0
  28. 4078

    What kind of camera is that? That is certainly a really good
    high quality.

    0
  29. 4229

    enchanting snapshot.

    1
  30. 4380

    really good captures!

    1
  31. 4531

    That is a beautiful picture with very good lighting :)

    0
  32. 4682

    30 Scripts For Galleries, Slideshows and Lightboxes | Smashing Coding is actually the #1!

    0
  33. 4833

    I quite like the styles!

    0
  34. 4984

    Hi,
    Overall explanation its better but one think how do apply for each application in ajax…

    0
  35. 5135

    Tremendous issues here. I am very satisfied to see your article. Thanks so much and I’m looking forward to touch you. Will you please drop me a e-mail?

    0
  36. 5286

    Oh my goodness! Amazing article dude! Thanks, However I am encountering difficulties
    with your RSS. I don’t know the reason why I can’t join it. Is there anybody else having identical RSS problems? Anybody who knows
    the answer will you kindly respond? Thanx!!

    0
  37. 5437

    What a material of un-ambiguity and preserveness of valuable know-how
    on the topic of unpredicted emotions.

    Swimming Pool Heater

    -1
  38. 5588

    I’d also recommend this relatively new gallery – dimsemenov.com/plugins/royal-slider/ it’s commercial, but totally worth it.

    4
  39. 5739

    Old, but very useful article, thx :)

    0
  40. 5890

    Valuable information. Lucky me I found your site by chance, and I’m shocked why this coincidence did not came about earlier! I bookmarked it.

    0
  41. 6041

    Great collection of slider plugin. I would also like to mention here another free good jquery slider plugin
    is hi slider (http://www.hislider.com) which is also working good and totally free:)

    0
  42. 6192

    hi

    in slide show “TripTracker” , I don’t want show slide in new window but i don’t know how to can it, is it posilbe show slide in current page ?
    thanks

    0
  43. 6343

    hi

    Please favour me for image galleries html code for blogspot with next and previous buttons ,Explain in details where to insert in blogspot blog. my blog is movie news related .so please do favour for my

    waiting for ur reply

    sheethal

    0
  44. 6494

    great thank to you, man! this program is the one i realy need and searched for too much time! thanks!

    3
  45. 6645

    I think Highslide.js is better

    -1
  46. 6796

    I like that this one changes the mouse pointer to Left and Right arrows

    -5
  47. 6947

    Indeed ImaginLightbox it’s verry complex, and not to say that is free.

    -4
  48. 7098

    re: Joe Nicora & the YUI framework.
    PhotoViewer looks very nice in preview using DW with local files, but only opens single image in new page when live/online. Is there a dependent file that isn’t in the YUI/2.5.0 folder?

    0

↑ Back to top