jQuery UI - Using Dialogs for Image Popups

Image 1 Image 2 Image 3

jQuery UI always begins with HTML. Before you can popup anything, we have to have the HTML to act as our window. Now, looking over the jQuery docs, it can sometimes be a little vague, so here is what our dialog HTML will look like:

<div id="dialog" title="An Image!" style="display: none;">
  <img id="image" src=""/>
</div>

The div is our dialog window, and anything inside of it will be inside the dialog, i.e. its contents. For now we want to hide the div, so we can show it later. For this simple tutorial, I went ahead and just added the css at the element level. Notice the image does not have a src set. This we will set on the fly. Speaking of, now we have to get to our Javascript.

For the Javascript, I decided to put most of our code inside a function, so we can call up an image popup anywhere we want. Remember, reusability is good code. So here is the function I have come up with:

PreviewImage = function(uri) {

  //Get the HTML Elements
  imageDialog = $("#dialog");
  imageTag = $('#image');
 
  //Split the URI so we can get the file name
  uriParts = uri.split("/");

  //Set the image src
  imageTag.attr('src', uri);
 
  //When the image has loaded, display the dialog
  imageTag.load(function(){

    $('#dialog').dialog({
      modal: true,
      resizable: false,
      draggable: false,
      width: 'auto',
      title: uriParts[uriParts.length - 1]
    });
  });  
}

Most of what we have here is pretty self explanatory. We pass in a URI for our image, then set our image src to that URI. Along the way we split the URI up, so we can set the dialog title to the image file name. The only tricky part is when to display the dialog.

In order for the dialog to correctly display, as in correctly positioned and sized, we have to wait for the image to load, then display the dialog. The dialog function itself can take in a few parameters, in the typical jQuery object/array form. For our purposes we pass in only a few things.

The first "option" we pass in is a modal option. When set to true, a background pops up with our dialog, preventing the user from doing anything while the dialog is up. The next set of options make the dialog stay in place and stay the same size. For this particular job, we don't need the user to resize or move the window.

The next option we have to set is the width. Normally the width is defaulted to 300px, so we have to set it to auto, so it resizes with our content. Lastly we set the title of our dialog window to the file name of the image displayed. You can really change the title to be anything you want, but I thought using the file name would be at least informative.

So now that we have our function, but now how do we use it. Well for this tutorial, we are going to create a few links that open some images. The anchor tags look like so:

<a id="image1" href="http://www.switchonthecode.com/sites/all/themes/sotc/images/header_logo.gif">
Image 1</a>
<a id="image2" href="http://shannaro.files.wordpress.com/2009/04/explosion.jpg">
Image 2</a>
<a id="image3" href="http://thefuturebuzz.com/pics/icanhascheezeburger/technician%20cat.jpg">
Image 3</a> 

What we have here is a set of pretty strait forward links. We are going to utilize jQuery to turn these links into dialog popups. Here is how we are going to do it:

$(document).ready(function() {
       
  $('body a').click(function(event){
       
    event.preventDefault();
    PreviewImage($(this).attr('href'));
                                       
  });                          
});

That's it. What we are doing in this code is taking every anchor tag inside the body and creating a click event for it. First we have to stop the anchor from actually going to the image in our browser, i.e. prevent the default behavior. Once we have everything locked down, we display our dialog, passing in the link's href. This makes it so we can use the anchor tags normally, but change the functionality behind them.

So that is a basic, practical use for jQuery UI. This is just one of the many, many ways you can use the components offered by this extensive UI library. I would suggest taking a look at the documentation and see what awesome things there are for yourself. This is it for this tutorial, more UI to come soon. Just remember, when you need coding help, all you have to do is Switch On The Code.