Ajax and XML: Ajax for lightboxes

Use Ajax techniques to create lightboxes, pop-ups, windows, and faders

In a world where everything is designed to amaze and distract, it's awfully difficult to get a user's attention. Learn how to use new techniques such as lightboxes, pop-ups, windows, and fading messages with your Ajax tools to get your users' eyes on your content.

Jack D. Herrington, Senior Software Engineer, Leverage Software Inc.

Jack D. Herrington is a senior software engineer with more than 20 years of experience. He's the author of three books: Code Generation in Action, Podcasting Hacks, and PHP Hacks. He has also written more than 30 articles. You can reach Jack at jherr@pobox.com.



25 September 2007

Also available in Russian Japanese

It's possibly an urban legend, but I was told many years ago of a user interaction experiment in which USD100 (100 U.S. dollars) was taped beneath someone's seat while that person was using a desktop application on a computer. In the status bar of the application, it said, "There is $100 taped underneath your seat." The money was never found or claimed by any of the participants, which tells you just how poorly the status bar communicates information and how hard it is to get people's attention nowadays.

This article shows several techniques that use a combination of PHP, Dynamic HTML (DHTML), and Asynchronous JavaScript™ + XML (Ajax) to throw content right into users' lines of sight so that it really grabs their attention.

Tooltips

Setting the status bar in the browser is easy, but doing something useful—like popping up a tooltip—is a bit more difficult. To make it easier on myself, I employ a tooltip library that's freely available on the Web and built on the excellent Prototype.js JavaScript library. Listing 1 shows the code for this tooltip.

Listing 1. index.html
<html>
<head>
<script src="prototype.js" type="text/javascript"></script>
<script src="tooltip.js" type="text/javascript"></script>
<style>
body { font-family: arial,verdana; }
.popup { padding:10px; border:1px solid #ccc;
 background:#eee; width:250px; font-size: small; }
</style>
</head>
<body>
<div id="book1">Code Generation In Action</div>
<div id="popup1" class="popup">
</div>
</body>
<script type="text/javascript">
new Ajax.Updater( 'popup1', 'text.php' );
new Tooltip('book1', 'popup1')
</script>
</html>

The page first employs an Ajax call to update the contents of the tooltip by using the Ajax.Updater class from the Prototype.js library. It then assigns the tooltip to the book1 <div> tag using the Tooltip class that the tooltip library provides.

Listing 2 shows the code for the content of the tooltip.

Listing 2. text.php
An excellent book on code generation and generative programming
by Jack Herrington.

Now, when I bring up the page in my browser, I see something like Figure 1.

Figure 1. The text before the mouse rolls over it
The text before the mouse rolls over it

And when I hover my mouse over it, I get the pretty little pop-up window in Figure 2.

Figure 2. The pop-up window
The pop-up window

Live demo of a tooltip

View a live, online demo of the tooltipOpen link to view tooltip demo in new window.

Tooltips are an easy way to unclutter your page and provide content on demand to users. If users want to know more about something, they can simply hover their mouse over it and get details. And those details can be arbitrarily complex, including images, tables, and formatting.


Lightboxes

Lightboxes are the newest and most novel way to drive your readers' attention to a particular element on the page. In the case of the example below, I have an image thumbnail on the page, and when users click it, they're shown a larger version in a "lightbox."

To create this effect, I use the excellent Lightbox JS 2.0 library, which is also built on the Prototype.js framework. Listing 3 shows the example code.

Listing 3. index.html
<html>
<head>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
</head>
<body>
<a href="images/megan1_400_320.jpg" rel="lightbox">
<img src="images/megan1_400_320.jpg" width="100" height="80"
  alt="Megan" border="0" /></a>
</body>
</html>

When I navigate to the page, I see just the thumbnail, as in Figure 3.

Figure 3. The image before clicking it
The image before clicking it

But when I click it, I see a full-sized image elegantly displayed in the center of the window, as shown in Figure 4.

Figure 4. The lightbox with the full-sized image
The lightbox with the full-sized image

Even better, all the material in the background is grayed out, so that my eye is further drawn to the content in the center of the display.

Live demo of lightbox

View a live, online demo of the lightboxOpen link to view lightbox demo in new window.

If you aren't familiar with the term lightbox, that's okay: It's an esoteric term used in photography circles. Back in the days of film photography, a device called a lightbox was literally a box about six inches deep, a couple of feet across on both sides, with some clear white plastic on the top of it. A light in the middle of the box would provide even illumination across the surface. So, you placed your slides or negatives on the lightbox and, using a loupe, which is just a fancy magnifying glass, you inspected each image. You can think of the lightbox shown in Figure 4 as a photo that you're viewing through a loupe on a lightbox. Thus, the term.

But what happens if instead of an image you want to highlight some text?

Text lightboxing

A variation of the lightbox idea has been implemented on a site called Particle Tree. This one has the advantage of being able to display any arbitrary HTML code, fetched using Ajax, from the server. I use it to display some additional text to users.

Listing 4 shows the main page code.

Listing 4. index.html
<html>
<head>
<title>
Lightbox Text Test
</title>
<link rel="stylesheet" href="css/default.css" media="screen,projection" type="text/css" />
<link rel="stylesheet" href="css/lightbox.css" media="screen,projection" 
  type="text/css" />
<script type="text/javascript" src="scripts/prototype.js"></script>
<script type="text/javascript" src="scripts/lightbox.js"></script>
</head>
<body>
<a href="text.php" class="lbOn">More About This Article</a>
</body>
</html>

In Listing 5, you see the HTML code that Ajax fetches and then displays.

Listing 5. text.php
<p>This article covers the basics of AJAX Lightbox that
shows text blocks instead of images</p>

<p><a href="#" class="lbAction" rel="deactivate">
Return to article list</a></p>

When I bring up the code in my browser, I see Figure 5.

Figure 5. Text you can click for more information
Text you can click for more information

And when I click the text, I see the lightbox with the content of the page, as in Figure 6.

Figure 6. The text lightbox in action
The text lightbox in action

Live demo of text lightbox

View a live, online demo of the text lightboxOpen link to view text lightbox demo in new window.

This is a great way to provide additional material on products or articles listed on the page without moving users away from the page. Instead, you indirectly draw their attention to the additional content you want to provide. As with any HTML code, this can be more text content, images, or even a form such as a registration, comment, or login form.


Windows

I mentioned using a lightbox for a form in the previous example, but that's not really what users expect when they see a form. What they really expect is a window. Thankfully, in the Prototype library, you'll find an excellent window implementation that comes with a variety of different skins to give you whatever look and feel you choose.

The window code also uses Ajax through Prototype to get the content to present in the window frame. I start with Listing 6, which is the page that hosts the window.

Listing 6. index.html
<html>
<head>
<script type="text/javascript" src="javascripts/prototype.js"></script> 
<script type="text/javascript" src="javascripts/effects.js"></script>
<script type="text/javascript" src="javascripts/window.js"></script>
<script type="text/javascript" src="javascripts/window_effects.js"></script>

<link href="themes/default.css" rel="stylesheet" type="text/css" ></link>
<link href="themes/spread.css" rel="stylesheet" type="text/css" ></link>
</head>
<body>
<a href="javascript:void showWindow();">Show Window</a>
<script>
function showWindow()
{
  win = new Window( { className: 'spread', url: 'test.html',
    title: 'Simple Window', width:400,
    height:300, destroyOnClose: true, recenterAuto:false } ); 
  win.showCenter();
}
</script>
</body>
</html>

The JavaScript code here responds to the click of the Show window button by creating a new window with the specified width, height, title, and content specified by a given URL. It then shows the window using the showCenter() method, which pops it into the middle of the browser window.

Listing 7 shows the content for the window.

Listing 7. test.html
<h1>Registration</h1>
<p>You need to first register the product before...</p>

When I navigate my browser to the first page, I see something like Figure 7.

Figure 7. The window link
The window link

Not much to look at, but when I click it, wow! What a difference, as in Figure 8.

Figure 8. The window that pops up
The window that pops up

It's a bit gaudy, but it definitely gets your attention. You don't have to have the lime green thing, though. Several different skins are available for you to select.

But what I really wanted to do was a form, right? In particular, I want a login form on the main page so when I click the Login button, a login form pops up. Listing 8 shows the code for the main page.

Listing 8. form.php
<html>
<head>
<script type="text/javascript" src="javascripts/prototype.js"></script> 
<script type="text/javascript" src="javascripts/effects.js"></script>
<script type="text/javascript" src="javascripts/window.js"></script>
<script type="text/javascript" src="javascripts/window_effects.js"></script>

<link href="themes/default.css" rel="stylesheet" type="text/css" ></link>
<link href="themes/spread.css" rel="stylesheet" type="text/css" ></link>
</head>
<body>

<div id="myloginform" style="display:none;overflow:clip;padding:10px;">
<form id="loginfrm">
<table>
<tr><td>Login</td><td><input type="text" name="name" /></td></tr>
<tr><td>Password</td><td><input type="password" name="password" /></td></tr>
</table>
</form>
<button onclick="login()">Login</button>
</div>

<a href="javascript:void showWindow();">Login</a>
<script>
var g_loginWindow = null;

function login()
{
  new Ajax.Request( 'login.php', {
    parameters: $('loginfrm').serialize(),
    method: 'post',
    onSuccess: function( transport ) {
       g_loginWindow.close();
    }
  } );
}

function showWindow()
{
  g_loginWindow = new Window( { className: 'spread', title: "Login",
    destroyOnClose: true,
    onClose:function() { $('myloginform').style.display = 'none'; } } ); 
  g_loginWindow.setContent( 'myloginform', true, true );
  g_loginWindow.showCenter();
}
</script>

</body>
</html>

This one has the content for the window on the page itself. But, when the user clicks the Login button on the form, it uses the Ajax.Request object to request a login with the server. Listing 9 shows the simple login script, which is far more complex in practice.

Listing 9. login.php
<true />

Now, when I bring up this page, I get a login link, as in Figure 9.

Figure 9. The login link
The login link

And when I click the link, I see a very cool Web 2.0-style login window, as in Figure 10.

Figure 10. The login window
The login window

Live demo of window

View a live, online demo of the windowOpen link to view window demo in new window.

When I click Login, it sends the user name and password to the server, which can verify the credentials and set a session cookie as well as reply with a response that indicates that I should be forwarded to the home page.

This is the type of functionality that can really bring a pop to the application and give users a sense that they're using something more akin to a desktop application than something on the Web.


Fader messages

Another new way to communicate with users is the fader message—that is, a message that pops up in a known, but valuable, piece of screen real estate to tell users that something important has occurred. In this case, I use the Scriptaculous effects library, which is also built on Prototype.js, to implement the fader message.

It starts with the page in Listing 10.

Listing 10. index.html
<html><head>
<style>
.alert { 
  opacity: 0.0;
  border:2px dashed black;
  padding:5px;
  background:#eee;
  font-family: arial, verdana;
  font-weight: bold; }
</style>
<script src="lib/prototype.js"></script>
<script src="src/effects.js"></script>
<script>
function submit()
{
 new Ajax.Updater( 'result', 'alert.html', {
  method: 'get',
  onSuccess: function() {
   new Effect.Opacity('result',
    { duration: 2.0, from: 0.0, to: 1.0 } );
   new Effect.Opacity('result',
    { delay: 10.0, duration: 2.0, from: 1.0, to: 0.0 } );
  } }
 );
}
</script>
</head><body>
<div id="result" class="alert"></div><br/><br/>
<button onclick="submit()">Submit</button>
</body></html>

Ideally, the page is some sort of form with a Submit button. Then, when the user clicks Submit, the server is sent the form data and replies with a message. This message is then shown in an area that fades up to display the message, then fades away. In this case, I left out the form elements, so I just have the Submit button.

The Submit button sends an Ajax request to the alert.html page. It then puts the result of that page in the result <div> tag, which then fades in and out using the Scriptaculous effects classes.

Listing 11 shows the code for the alert page.

Listing 11. alert.html
A new record has been added.

When I bring up the page in my browser, I see something like Figure 11.

Figure 11. The Submit button for a form
The Submit button for a form

Once again, not much too look at. Imagine a set of form fields with some data before the Submit button.

When I click Submit, the alert fades up, as shown in Figure 12.

Figure 12. The faded-in message announcing the addition of a message
The faded-in message announcing the addition of a message

Live demo of fader

View a live, online demo of the faderOpen link to view fader demo in new window.

After a few seconds, the message fades away.

This is a simple, yet very effective way to communicate with users. As long as you don't overuse it, it taps directly into the keen sense of awareness for objects appearing and disappearing. That's a survival instinct that's bred into humans. So, it's something you pay attention to. As long as it's well used, it's a powerful way to get users' attention quickly.

Conclusion

Hopefully, this article has provided you with a whole new set of tools to interact with and alert your users in novel ways. Over time, I'm sure they will be overused and become just as ineffective as the status bar. But for the time being, these tools can provide a fun, effective, and Web 2.0 way to get people's attention.


Download

DescriptionNameSize
Sample codex-ajaxxml6-lightbox.zip1573KB

Resources

Learn

Discuss

Comments

developerWorks: Sign in

Required fields are indicated with an asterisk (*).


Need an IBM ID?
Forgot your IBM ID?


Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.

 


The first time you sign into developerWorks, a profile is created for you. Select information in your profile (name, country/region, and company) is displayed to the public and will accompany any content you post. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name



The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 


All information submitted is secure.

Dig deeper into XML on developerWorks


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=XML, Web development
ArticleID=255655
ArticleTitle=Ajax and XML: Ajax for lightboxes
publish-date=09252007