Dojo in XPages – 24: Using a LightboxNano to Display an Attached Image
In the last post, I showed how to create a Lightbox dialog that allows you to cycle through a group of images. In this post, I’ll show how you can create a simpler version that displays a single image with the LightboxNano module.
Dojo in XPages Series
LightboxNano is a lightweight version of a lightbox, designed to display a single image and focus on it by providing an overlay on the rest of the screen.
The control is designed to display a thumbnail and preload the larger image (after a few seconds) so it’s ready to display in full size. It automatically resizes the image as needed to ensure that it fits within the browser window.
From the point where you click on the thumbnail, it provides a nice animation to enlarge and center the full image, leaving a small dotted outline in place of the thumbnail. Clicking anywhere on the page will close the image, providing the reverse animation to shrink the image and move it back to the spot of the original link.
Here are a few screen captures of the animation.
In this example, I’ll show how to create a LightboxNano from the first image attached to a document. If you have large images, you can modify it to use a thumbnail version and load the full version asynchronously.
1) Include the Required Dojo Module
All you need is the
<xp:this.resources> <xp:dojoModule name="dojox.image.LightboxNano"></xp:dojoModule> </xp:this.resources>
2) Add a thumbnail image to the page
Use an Image control to define the path to the image. This example computes the image path for the first file attachment.
I used inline styles to size the image; otherwise it would display full-sized.
3) Create the Lightbox
This code should run on the onClientLoad event of the page.
Since this example creates the LightboxNano programmatically (rather than declaratively), you do not need to set the pages parseOnLoad property to automatically render the LightboxNano.