Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

jQuery UI - Using Dialogs for Image Popups

DZone's Guide to

jQuery UI - Using Dialogs for Image Popups

· Web Dev Zone
Free Resource

Discover how to focus on operators for Reactive Programming and how they are essential to react to data in your application.  Brought to you in partnership with Wakanda

jQuery is one powerful tool for web developers. It offers a host of ways to make rich web applications even better, and easier to develop. There is no argument from us here at SOTC against jQuery and in fact we have a rich history of jQuery tutorials. But jQuery has a lot to offer other than just code helpers. Today I am going to show you something else jQuery has to offer, the jQuery UI.

Before we get started, I just wanted to note that I am using jQuery 1.4 and jQuery UI 1.8

So let's start with a problem. Say we want a really simple way to create an image previewer. Something that will popup an image in an internal window. It is a fairly simple issue, and one that can be solved quite easily using the jQuery UI components. In this case, we are going to be using a jQuery Dialog component. One note, however, is that we don't include an loading indication in this example, but that should be easy to add on your own. Go ahead and click on the links below to see an example of our solution.

(Click to see the images!)

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.

Learn how divergent branches can appear in your repository and how to better understand why they are called “branches".  Brought to you in partnership with Wakanda

Topics:

Published at DZone with permission of Charlie Key. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}