Create a Dojo Lightbox with dojox.image.Lightbox

By  on  

One of the reasons I love the Dojo Toolkit is that it seems to have everything.  No scouring for a plugin from this site and then another plugin from that site to build my application.  Buried within the expansive dojox namespace of Dojo is dojox.image.  dojox.image is host to many common UI plugins, the most popular being dojox.image.Lightbox, a great solution if you're looking to create a reliable, elegant Lightbox with Dojo.  Let me show you how use dojox.image.Lightbox in your next web application!

dojox.image.Lightbox and dojox.image.LightboxDialog Features

The dojox.image.Lightbox resource has many cool features:

  • Integrated theming and images
  • Keyboard accessible
  • Resizes when the viewport changes
  • Flexible with numerous options
  • Declarative or Programmatic instance creation
  • Works with Dojo data stores

Let me show you just how easy it is to use Dojo's Lightbox solution!


dojox.image.Lightbox doesn't require any of the Dijit themes but does require its own CSS file:

<style type="text/css">
	/* bring in the lightbox CSS */
	@import "";

All of the imagery required comes via the CSS file -- no need to add your own styles.

The HTML and JavaScript

The first step in using any Dojo resources is adding a SCRIPT tag with a path to Dojo within the page and requiring the desired Dojo Toolkit resources:

<script src=""></script>
<script type="text/javascript">
	// Request dependencies

The dojox.image.Lightbox resource can be used declaratively (with HTML) or programmatically (with JavaScript).  If you plan to use declarative widget creation, you'll need to set the djConfig object's parseOnLoad property to true before loading Dojo:

// Parse the page upon load
djConfig = { parseOnLoad: true };

With parseOnLoad in place, you can add links to the page with the data-dojo-type attribute set to dojox.image.Lightbox and instance-specific options within the data-dojo-props attribute.  Here's a sample:

<div id="imageHolder">
	<a href="slideshow/cricci1.jpg" data-dojo-type="dojox.image.Lightbox" data-dojo-props="group:'GoddessPics',title:'Christina Ricci',href:'slideshow/cricci1.jpg'"><img src="slideshow/cricci1.jpg" alt="Christina Ricci" /></a>
	<a href="slideshow/cricci2.jpg" data-dojo-type="dojox.image.Lightbox" data-dojo-props="group:'GoddessPics',title:'Christina Ricci',href:'slideshow/cricci2.jpg'"><img src="slideshow/cricci2.jpg" alt="Christina Ricci" /></a>
	<a href="slideshow/cricci3.jpg" data-dojo-type="dojox.image.Lightbox" data-dojo-props="group:'GoddessPics',title:'Christina Ricci',href:'slideshow/cricci3.jpg'"><img src="slideshow/cricci3.jpg" alt="Christina Ricci" /></a>
	<a href="slideshow/cricci4.jpg" data-dojo-type="dojox.image.Lightbox" data-dojo-props="group:'GoddessPics',title:'Christina Ricci',href:'slideshow/cricci4.jpg'"><img src="slideshow/cricci4.jpg" alt="Christina Ricci" /></a>
	<a href="slideshow/cricci5.jpg" data-dojo-type="dojox.image.Lightbox" data-dojo-props="group:'GoddessPics',title:'Christina Ricci',href:'slideshow/cricci5.jpg'"><img src="slideshow/cricci5.jpg" alt="Christina Ricci" /></a>

Groups allow you to have images available within...groups... with next and previous buttons.  The title property provides a ...title... and the href property provides the content which should load within the lightbox. You may have any number of groups on the page.  That's all that's needed to create a simple Dojo Lightbox declaratively!

If you're looking to create your Lightbox programmatically, no problem -- that's easy too!  Add your images to the page the same way you did above, minus the data-dojo-type and data-dojo-props attributes, and instead use the following JavaScript code:

// When the DOM is ready and resources are loaded...
dojo.ready(function() {
	// Create an instance
	var lightbox = new dojox.image.Lightbox({ title:"Christina Ricci", group:"GoddessPics", href:"slideshow/cricci1.jpg" });
	// Start it up!

With your instance created, start adding more images:

// Add another image by using the lightbox's _attachedDialog method...
	title:"Christina Ricci 2", 
	group:"GoddessPics",  // Can be same group or different!

Regardless of declarative or programmatic implementation, you can show or hide the lightbox with the respective methods:

// Show the lightbox;
// Hide the lightbox!

As you'd expect with any Dojo Toolkit resource, dojox.image.Lightbox provides the usual onShow, onHide, and other utility methods that are helpful in customizing the Lightbox usage.

dojox.image.Lightbox and dojox.image.LightboxDialog are great resources available within Dojo's "treasure chest", DojoX. Other classes within the dojox.image namespace include Gallery, Slideshow, and Magnifier. Look forward to tutorials about those soon!

Recent Features

  • By
    9 More Mind-Blowing WebGL Demos

    With Firefox OS, asm.js, and the push for browser performance improvements, canvas and WebGL technologies are opening a world of possibilities.  I featured 9 Mind-Blowing Canvas Demos and then took it up a level with 9 Mind-Blowing WebGL Demos, but I want to outdo...

  • By
    Create a CSS Cube

    CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals.  Add animation and you've got something really neat.  Unfortunately each CSS cube tutorial I've read is a bit...

Incredible Demos

  • By
    jQuery topLink Plugin

    Last week I released a snippet of code for MooTools that allowed you to fade in and out a "to the top" link on any page. Here's how to implement that functionality using jQuery. The XHTML A simple link. The CSS A little CSS for position and style. The jQuery...

  • By
    jQuery Comment Preview

    I released a MooTools comment preview script yesterday and got numerous requests for a jQuery version. Ask and you shall receive! I'll use the exact same CSS and HTML as yesterday. The XHTML The CSS The jQuery JavaScript On the keypress and blur events, we validate and...


  1. Quick note: WebKit has an outstanding issue the load event firing properly. The team is aware of the issue and looking to fix it:

  2. Jack

    This seems a bit odd, can you not just specify a parent element to assign the lightbox to the images within? Rather than adding them all separately? Or am I being an idiot?

    PS – loving all the Dojo stuff, as a pretty experienced jQuery dev, I’ve been looking into a new library andDojo is winning right now.

  3. Hi David, Great article again!.. .this is very amazing.

  4. Alex

    The resizing for viewport feature is particularly valuable. I haven’t found a good lightbox plugin for mootools which does this. Thanks!

  5. I understand the built-in aspect of this, but doesn’t Shadowbox.js do a better job? And when integrated with MooTools, the transitions are amazingly smooth. I was getting some perceived lag with the demo on this computer (XP Pro 2.6GHz Dual Core 2GB RAM, Integrated Graphics). And Shadowbox even has the option to integrate with Dojo (along with MooTools, jQuery, Prototype, YUI and Ext). So far, I haven’t had a situation where Shadowbox wasn’t perfect for the job.

    But maybe I’m just being contrary.

  6. Petah

    Not the best lightbox effect ive seen. It was jumpy and couldn’t click next/prev on the image itself. Also it faded to white between images.

  7. DRoss

    I have to click the tiny arrows at the bottom to switch between images? Really?

  8. Ok first off you can’t go wrong with Christina Ricci. However, I agree with Petah … It’s too jumpy … I think a small adjustment will make it better … Thanks for the share.

  9. jun.p


    thanks for your lightbox tutorial

    But I discovered something that when I put menubar with lightbox, it has some issues. the lightbox doesnt work.

    try it please with your side, because I cannot make it work.

    please help and thanks

  10. Jerrhann

    Thank you for sharing! However, code does not work. Calls to the; return error: “Lightbox is not defined”

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!