drag and share
  • Twitter
  • Delicious
  • Facebook
  • Digg
  • Reddit
  • Stumbleupon

40 JavaScript lightbox scripts(included jQuery and MooTools)

By: OSH Editorial    In: Javascript MooTools Prototype Script.aculo.us jQuery

Karma - Responsive bootstrapped webapp

More an more sites are using(or going to use) JavaScript(library or plain) on there website(s). You probably dont see much of these javascript pieces, but one cool piece of JavaScript cant be missed, and it’s called a lightbox.

A JavaScript ligthbox is a fast growing way to present in a nice way an images or something else like inline html, video or an external site without opening a new window. In the old days most images(or other content) where presented in a new tab/window, which isn’t a pretty way to do this if you ask me.

Hello you, if you are new here, you might want to subscribe to our RSS feed for updates on this article and our site.

x

There are a lot of JavaScript library available, so i included a couple of these library’s in this small list. Most of these scripts support all kind of content, just visit here website to see what kind of content they support(a lot of these scripts are updated frequently).

I have included jQuery, Mootools, Yahoo YUI, Prototype, Script.aculo.us and good old plain JavaScript.



jQuery lightboxes


jQuery-Lightbox-Plugin

jQuery Lightbox Plugin

Website | Demo | Javascript library: jQuery



colorbox

Colorbox

Website | Demo(example4) | Javascript library: jQuery



fancybox

Fancybox

Website | Demo | Javascript library: jQuery



thickbox

ThickBox

Website | Demo | Javascript library: jQuery



pirobox

Pirobox

Website | Demo(example1) | Javascript library: jQuery



greybox-redux

Greybox Redux

Website | Demo | Javascript library: jQuery



prettyphoto

PrettyPhoto

Website | Demo | Javascript library: jQuery



Interface-Imagebox

Interface Imagebox

Website | Demo | Javascript library: jQuery



nyromodal

nyroModal

Website | Demo | Javascript library: jQuery


fancyzoom

FancyZoom

Website | Demo | Javascript library: jQuery



shadowbox

Shadowbox

Website | Demo | Javascript library: jQuery



Slightly-Thickerbox

Slightly Thickerbox

Website | Demo | Javascript library: jQuery


Lightbox-for-YouTube-Videos

Lightbox for YouTube Videos

Website | Demo | Javascript library: jQuery



ceebox

CeeBox

Website | Demo | Javascript library: jQuery



popeye

popeye

Website | Demo | Javascript library: jQuery



Mootools lightboxes



slimbox

Slimbox

Website | Demo | Javascript library: MooTools



videobox

Videobox(video only)

Website | Demo | Javascript library: MooTools



milkbox

Milkbox

Website | Demo | Javascript library: MooTools



litebox

Litebox

Website | Demo | Javascript library: MooTools



imagezoom

ImageZoom

Website | Demo | Javascript library: MooTools



remooz

ReMooz

Website | Demo(example1) | Javascript library: MooTools



mediaboxAdvanced

mediaboxAdvanced

Website | Demo | Javascript library: MooTools



quickbox

QuickBox

Website | Demo | Javascript library: MooTools



SqueezeBox

SqueezeBox

Website | Demo | Javascript library: MooTools



bumpbox

BumpBox

Website | Demo | Javascript library: MooTools



Prototype/Script.aculo.us



lightview

Lightview

Website | Demo | Javascript library: Prototype & Script.aculo.us



lightbox2

Lightbox2

Website | Demo | Javascript library: Prototype & Script.aculo.us



lightboxgonewild

Lightbox gone wild

Website | Demo | Javascript library: Prototype & Script.aculo.us



Suckerfish-HoverLightbox-Redux

Suckerfish HoverLightbox Redux

Website | Demo | Javascript library: Prototype & Script.aculo.us



weebbox

WeebBox

Website | Demo | Javascript library: Prototype & Script.aculo.us



YUI



yuilightbox

YUI lightbox

Website | Demo | Javascript library: YUI



photoviewer

PhotoViewer

Website | Demo | Javascript library: YUI



lightboxyui3

Lightbox for YUI 3

Website | Demo | Javascript library: YUI



Javascript



lytebox

Lytebox

Website | Demo | Javascript library: JavaScript



Image-Thumbnail-Viewer

Image Thumbnail Viewer

Website | Demo | Javascript library: JavaScript



floatbox

Floatbox

Website | Demo | Javascript library: JavaScript



tinybox

Tinybox

Website | Demo | Javascript library: JavaScript



topup

TopUp

Website | Demo | Javascript library: JavaScript



highslide

Highslide

Website | Demo | Javascript library: JavaScript


Written by: OSH Editorial

No Bio yet...

Share this Story

If you enjoyed reading, consider sharing the love with the rest of the world.

10 Comments

Stan

July 1, 2010

Great collection!

2 other lightboxes I did using CSS3 gradient and mootools 1.2.4:
http://mootools.standupweb.net/customLightbox.php
http://mootools.standupweb.net/gradientLightbox.php

Mark Dijkstra

July 1, 2010

@Stan: Thanks for the share!!!

Michael Pehl

July 2, 2010

Nice collection of lightboxes. Thanks for sharing :)

Nactumu

July 4, 2010

thanks to share

Felix Nagel

July 6, 2010

Please add my accessible lightbox which has some unique features like (ARIA, WCAG 2.0, browser history and title support, jQuery UI CSS compatible):

http://wiki.github.com/fnagel/jQuery-Accessible-RIA/lightbox

Richard Darell

August 16, 2010

Wow! Love this! I am definitely checking back to go nuts on these scripts. Bookmarked and a great resource when adding that level of interaction to the new sites I am designing. Thanks!

Justin Mrkva

August 26, 2010

Correction: FancyZoom is NOT dependent on jQuery… the dev mentions it specifically.

Omar

March 10, 2011

Nice collection.
I like ColorBox. It suits my website the mostly.

james

April 14, 2011

are there any scripts featured here with the option to download the viewed image(like in facebook)? thanks

vineet

May 24, 2011

Hey, thank you very much.
I had a slide & organic tabs jquery on a single page & wanted a simple lightbox to show-off recent works. I had been trying the traditional lightbox 2.051 but it didnt work coz of conflicts.
But Colorbox worked :)

so thanks a lot, you made my day! :D

p.s.: I’ve check the given URL in a few days, I’ll publish site very soon :)

Add Your Comment

Your name

July 28, 2016

We use Gravatars on OpensourceHunter, they are little icons that appear next to your name on this site and on many others. You can get a Gravatar account for free and any other site that supports it will show your avatar too. Get your Gravators account here!