Dojo in XPages – 26: Combining Badge with LightboxNano

In the last two posts, I showed how to implement a Badge to display a set of thumbnail images with some animation as well as the LightboxNano widget to display an image in a specialized dialog. In this post, I’ll show how to combine the two so you can create the badge and add the ability to click on any thumbnail to see the full-sized image in a dialog when clicked.

Dojo in XPages Series

Dojo in XPages — All Blog Posts

Sample Widget

The effect that we’re going for is to have the badge to display the set of thumbnail images and animate them, but have the ability to see any of the thumbnails full-sized.

The source also shows a variation on how to define a LightboxNano widget declaratively, rather than programmatically, as shown in a previous post.

1) Include Required Resources

We’ll need to include two dojo modules (dojox.Image.Badge and dojox.Image.LightboxNano) and the image.css stylesheet on the page.

<xp:this.resources>
  <xp:dojoModule name="dojox.image.Badge"></xp:dojoModule>
  <xp:dojoModule name="dojox.image.LightboxNano"></xp:dojoModule>
  <xp:styleSheet href="/.ibmxspres/dojoroot/dojox/image/resources/image.css"></xp:styleSheet>
</xp:this.resources>

2) Set the Page Property to Parse Dojo on Load

Since we’ll use a declarative approach to create both the badge and the lightbox nano widgets, the page’s Trigger Dojo parse on load property must be selected (dojoParseOnLoad="true")

3) Create a Badge DIV and add LightboxNano Images

For the Badge container, add a div with the dojoType set to dojox.image.Badge.

Define the number of rows and columns to display the images with attributes of the div.

The main difference between this and the example in the last post is that we use a tags around each xp:image tag to set up the LightboxNano for each image. The xp:imagetags populate the badge and the a tags open the images in the LightboxNano dialog. (In this example, they are all using images included within the application as image resources.)

If you have separate thumbnail and full-sized images, you should use the thumbnails within the xp:image tags and the full-sized images on the a tag.

<div dojoType="dojox.image.Badge" rows="2" cols="6" cellSize="100" children="img.badgeIMG">

  <a data-dojo-type="dojox.image.LightboxNano" href="nature1.jpg">
    <xp:image url="/nature1.jpg" id="image13" styleClass="badgeIMG"></xp:image>
  </a>
  <a data-dojo-type="dojox.image.LightboxNano" href="nature2.jpg">
    <xp:image url="/nature2.jpg" id="image1" styleClass="badgeIMG"></xp:image>
  </a>
  <a data-dojo-type="dojox.image.LightboxNano" href="nature3.jpg">
    <xp:image url="/nature3.jpg" id="image2" styleClass="badgeIMG"></xp:image>
  </a>

  <!-- Code for 9 additional images in this example left out -->

</div>

Take a look at the previous post on the Badge widget for more information on customizing the badge thumbnail gallery display (size, speed, layout, and timing).