O'Reilly

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!

The CSS

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 "http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/image/resources/Lightbox.css";
</style>

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="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"></script>
<script type="text/javascript">
	// Request dependencies
	dojo.require("dojox.image.Lightbox");
</script>

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>
</div>

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!
	lightbox.startup();
})

With your instance created, start adding more images:

// Add another image by using the lightbox's _attachedDialog method...
lightbox._attachedDialog.addImage({
	title:"Christina Ricci 2", 
	group:"GoddessPics",  // Can be same group or different!
	href:"slideshow/cricci2.jpg"
});

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

// Show the lightbox
lightbox.show();
// Hide the lightbox!
lightbox.hide();

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!

O'Reilly Velocity Conference
Save 20% with discount code AFF20

Recent Features

Incredible Demos

Discussion

  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:

    http://dojo-toolkit.33424.n3.nabble.com/dojox-image-Lightbox-Chrome-td1629734.html

  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

    Hello,

    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 lightbox.show(); 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!

Recently on David Walsh Blog

  • Preventing Side Effects in JavaScript

    JavaScript is very dynamic these days but I still see a lot of legacy code, whether it be for optimal backward compatibility or simply that the code hasn't been maintained.  One of the practices that makes me cringe is coding that creates unwanted side effects.  What's a side...

  • Access Mac Camera by Command Line

    With all of my recent command line tutorials, I've really gotten excited about the shell's simplicity and realized the true power of using the underlying technology of pretty UIs.  Since I work from home, I spend a lot of time on video calls, so when...

  • Open Files from Command Line on OS X

    I'm as much of a fan of application UIs as anyone else but I'm finding myself working more and more from the command line lately.  Much of that is becoming obsessed with media manipulation but I'm forcing myself to use less UIs so that I...

  • Get Stock Quotes From Command Line

    When I conned my way into my first professional programming gig, I didn't really think much about money -- just that I was getting my foot in the door.  But as my career has gone on, I've been more aware of money, investing, and retirement.  I've recently...

  • Geolocation API

    One interesting aspect of web development is geolocation; where is your user viewing your website from? You can base your language locale on that data or show certain products in your store based on the user's location. Let's examine how you can...