I saw a really neat lightweight lightbox a while ago and decided to make a version for Dojo. I’ve dubbed this version the LightboxNano because it is under 2K over the wire after a build and being gzip’d.

The LightboxNano is not a dijit._Widget. It is designed to be very lightweight and only requires Dojo core and dojo.fx. The LightboxNano was coded for Dojo 1.2, but should work with past versions with little or no modifications.

Features

For being so small, it packs a handful of features:

  • Automatically resizes large images to fit in browser window.
  • Preloads the larger image to make loading faster.
  • Keyboard accessible.
  • Instantly makes your website awesome.

Example

The LightboxNano is really easy to use. Here’s an example:

<script src="/path/to/dojo.js" type="text/javascript"></script>
<script type="text/javascript">
    dojo.require("dojo.parser");
    dojo.require("dojox.image.LightboxNano");
</script>

<a dojoType="dojox.image.LightboxNano" href="/path/to/large/image.jpg">
    <img src="/path/to/small/image.jpg">
</a>

To see it in action, click the image below:

Styling

When the LightboxNano is created, it adds two <div> tags inside the anchor tag: one for the enlarge icon and one for the loading icon. For example, you can define styles like this:

a:hover .dojoxEnlarge {
    display: block !important;
}
.dojoxEnlarge {
    background: url(images/enlarge.png) no-repeat 0 0;
    top: -5px;
    left: -5px;
    margin: 0 !important;
    width: 16px;
    height: 16px;
}
.dojoxLoading {
    background: #333 url(images/loading-dark.gif) no-repeat center center;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border: 2px solid #000;
    height: 24px;
    opacity: 0.8;
    filter: alpha(opacity=80);
    padding: 6px;
    width: 24px;
}

Usage

You can declaratively create the LightboxNano using a dojoType on an <a> or <img> tag. Or you can choose to programatically create the LightboxNano:

<script type="text/javascript">
    dojo.addOnLoad(function(){
        new LightboxNano({
            href: "/path/to/large/image.jpg"
        }, "myLink");
    });
</script>

<a id="myLink" href="/path/to/large/image.jpg">
    <img src="/path/to/small/image.jpg">
</a>

If you want to access it for some reason, you’ll need to use its jsId.

Parameters

href – String
URL to the large image to show in the lightbox.

duration – int
The delay in milliseconds of the LighboxNano open and close animation.

preloadDelay – int
The delay in milliseconds after the LightboxNano is created before preloading the larger image.

File Sizes

The LightboxNano is pretty small, but it relies on several other core Dojo components. If you do a custom Dojo build containing the LightboxNano and dojo.parser, the dojo.js is 96KB. If you enable HTTP compression on the web server, you can get that down to a nice 32KB.

Limitations

  • The LightboxNano does not reposition itself when the browser window is resize or scrolled.
  • In IE6, drop down select lists bleed through the LighboxNano layer. This can be fixed with an iframe shim. This was skipped to keep the size down and because we all want IE6 to just go away.

Future Improvements

There’s always things that can be done to improve the LightboxNano. Here’s a couple ideas and you’re welcome to make suggestions in the comments.

  • Add support for displaying a caption.
  • Add support for dojox.embed to play Flash or Quicktime movies.

Try it Today!

You can download the LightboxNano files here: LightboxNano.tar.gz [594KB]. Soon, the LightboxNano will be in dojox, so you won’t need to install it separately.

You can view the original test page here: http://download.dojotoolkit.org/release-1.3.1/dojo-release-1.3.1/dojox/image/tests/test_LightboxNano.html.

If you end up using the LightboxNano, feel free to link to your site so everyone can see your new awesome website!


3 Comments

  1. [quote]
    When the LightboxNano is created, it adds two div tags inside the anchor tag: one for the enlarge icon and one for the loading icon
    [/quote]

    Is it valid to have block level elements (divs) inside inline elements (anchors)?

    Comment by Anonymous — October 15, 2008 @ 9:31 pm

  2. Does it matter? It works in all browsers. The divs are created after page load, so the page still validates. These divs are non-essential… they are simply there for visual feedback. Web pages that use Dojo declaratively don’t validate as XHTML anyways because of the dojoType attribute.

    I could have used span tags instead, but then I would have had to set their display=”block” to honor the width and height, which just ends up eating up precious bytes.

    Comment by Chris Barber — October 16, 2008 @ 4:45 am

  3. Tried to get this working with no luck. I’d really appreciate an “installation for dummies” howto.

    Comment by tk — May 5, 2011 @ 11:30 pm

RSS feed for comments on this post. TrackBack URL

Sorry, the comment form is closed at this time.