While working on a new example for flexwires, I built simple Flex component to display thumbnail images. When you click on the thumbnail, the full size image is displayed as a modal pop-up. The idea is similar to Lightbox, a popular JavaScript component. It’s a very simple UI control, sure, but I think it’s definitely useful in a wide range of Flex projects, so I wanted to share it. Click the image below to view a Flickr search app that demonstrates the PopUpThumbnail control:

Usage is pretty simple. It’s a subclass of the familiar mx.controls.Image, with one important change: the source property applies to the full-size pop-up content. A new property, thumbnailSource is what gets displayed in the small-size thumbnail.

<flextoolbox:PopUpThumbnail source="lolcat-big.png"
    thumbnailSource="lolcat-small.png"/>

Surprisingly, I discovered some challenges in building this component. In particular, I had one requirement that made things a little interesting. If no thumbnail is specified using the thumbnailSource property, one is automatically created by taking a bitmap snapshot of the full-size content. In this case, the full-size content must be loaded immediately. Normally, to save bandwidth, the full-size content is loaded only when it is needed (when the thumbnail is clicked). In addition to loading images from external sources, there’s also the possibility that the full-size content could be generated at runtime in Flash Player. My upcoming example for flexwires manipulates BitmapData, so there’s no need to wait for a network operation. This creates a fun little maze of activity where the internal loading mechanisms in SWFLoader may or may not dispatch Event.COMPLETE to tell me that a thumbnail can be created, that I can display a progress indicator, or that the full-size content is ready to be shown and animated.

You’ll find some interesting extensibility points in this component, if you’re interested. For instance, you can customize the progressIndicator style to display something other than a ProgressBar control. A simple SWF animation might be used instead, or a custom subclass of ProgressBar with a wildly different appearance (I can’t wait until Flex 4 skinning is mainstream. That’ll make it even easier). Another thing to note is that normally, you simply have to click anywhere to hide the full-size content pop-up after it has been shown. If you want to display something more complex than an image, such as interactive content, you can change the clickToClosePopUp property to false and set up your full-size content to dispatch CloseEvent.CLOSE when it is ready to be hidden. Imagine loading a questionnaire or a wizard when some item is clicked, or even a game, and you’ll have an idea why I made that possible.

Download the component SWC and source code from my Google Code repository. API documentation for PopUpThumbnail is available as part of the common documentation with my other “Flex Toolbox” controls like ZoomFrame and CheckBoxList. As with most of my other open source code, PopUpThumbnail is available under the terms of an MIT-style license.