This is our last widget for this page and is very simple to implement. No AJAX is involved in it as well.

Before coding, we need to set up images that we will use in this widget. Create a folder named images inside the Chapter11 folder. Inside the images folder, keep five images of your choice. For this example, I named them 1.jpg, 2.jpg, and so on. Create another folder named thumb inside the images folder. Now create small versions (preferably around 300 px wide) of these five images and place them in the thumb folder. With this we are good to proceed to the code.

We will create an array of images and their names, which we will display in a dropdown. Selecting an image will display its thumbnail. Clicking on the thumbnail will display its larger version in the jQuery UI dialog box.

Go to the setupImageSelector method of the dashboard object and write the following code that will set up the images array, display images names in dropdown, and bind the event...