Treehouse

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!

ydkjs-1.png

Recent Features

  • 5 HTML5 APIs You Didn&#8217;t Know&nbsp;Existed

    When you say or read "HTML5", you half expect exotic dancers and unicorns to walk into the room to the tune of "I'm Sexy and I Know It."  Can you blame us though?  We watched the fundamental APIs stagnate for...

  • 9 Mind-Blowing WebGL&nbsp;Demos

    As much as developers now loathe Flash, we're still playing a bit of catch up to natively duplicate the animation capabilities that Adobe's old technology provided us.  Of course we have canvas, an awesome technology, one which I highlighted

  • CSS&nbsp;Filters

    CSS filter support recently landed within WebKit nightlies. CSS filters provide a method for modifying the rendering of a basic DOM element, image, or video. CSS filters allow for blurring, warping, and modifying the color...

Incredible Demos

  • Upload Photos to Flickr with&nbsp;PHP

    I have a bit of an obsession with uploading photos to different services thanks to Instagram. Instagram's iPhone app allows me to take photos and quickly filter them; once photo tinkering is complete, I can upload the...

  • MooTools Link&nbsp;Fading

    We all know that we can set a different link color (among other properties) on the hover event, but why not show a little bit more dynamism by making the original color fade to the next? Using MooTools 1.2,...

  • Google Extension Effect with CSS or jQuery or MooTools&nbsp;JavaScript

    Both of the two great browser vendors, Google and Mozilla, have Extensions pages that utilize simple but classy animation effects to enhance the page. One of the extensions used by Google is a basic margin-top animation to switch between...

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!

Use Code Editor