DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones AWS Cloud
by AWS Developer Relations
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones
AWS Cloud
by AWS Developer Relations
Building Scalable Real-Time Apps with AstraDB and Vaadin
Register Now

Trending

  • Extending Java APIs: Add Missing Features Without the Hassle
  • Comparing Cloud Hosting vs. Self Hosting
  • Observability Architecture: Financial Payments Introduction
  • Effortlessly Streamlining Test-Driven Development and CI Testing for Kafka Developers

Trending

  • Extending Java APIs: Add Missing Features Without the Hassle
  • Comparing Cloud Hosting vs. Self Hosting
  • Observability Architecture: Financial Payments Introduction
  • Effortlessly Streamlining Test-Driven Development and CI Testing for Kafka Developers
  1. DZone
  2. Coding
  3. Frameworks
  4. jQuery UI - Using Dialogs for Image Popups

jQuery UI - Using Dialogs for Image Popups

Charlie Key user avatar by
Charlie Key
·
Apr. 27, 10 · News
Like (0)
Save
Tweet
Share
28.00K Views

Join the DZone community and get the full member experience.

Join For Free

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!)

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.

JQuery UI Dialog (software)

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

Opinions expressed by DZone contributors are their own.

Trending

  • Extending Java APIs: Add Missing Features Without the Hassle
  • Comparing Cloud Hosting vs. Self Hosting
  • Observability Architecture: Financial Payments Introduction
  • Effortlessly Streamlining Test-Driven Development and CI Testing for Kafka Developers

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com

Let's be friends: