Hack #78. Customize Pop-up Image Windows

Have your thumbnails open slick, customizable pop-up windows.

There are times when it pays to have a compulsive personality, which you probably like to call "attention to detail."

On eBay, for instance, "attention to detail" makes your listings look more professional and will likely compel you to more carefully describe and photograph your items, both of which are good ways to inspire trust with your bidders [Hack #8] and set a proper expectation [Hack #50] . But why stop there?

If you're including clickable thumbnails [Hack #77] or video clips [Hack #58] in your listings, you can customize the pop-up windows that appear using JavaScript.

Unfortunately, this is not as easy as it sounds. On most other web sites, you could do this quite simply with the window.open JavaScript statement, but as described in the Preface, eBay displays the "Your listing cannot contain JavaScript" error if you try to submit a description containing the window.open statement in any context.

The Code

Instead, a slightly more complex script is needed. Start by placing the following JavaScript code in the beginning of your listing description:

<script language="JavaScript"> 
     var w = window;
     var whack = w.open;
     function ohack(url, name, attributes) { return (new Object()); } 
     w.open = ohack;

     var objImage = new Image();

     function showpic(url) {

    objImage.src = url;
   width = objImage.width;
     height = objImage.height;

     if (width == 0) {
       retry = 'showpic("' + url + '")';
       setTimeout(retry, 300);
       } else { 
    var flags = "width=" + width + ",height=" + height + 
                ",resizable=no,scrollbars=no,menubar=no,toolbar=no" + 
				",status=yes,location=no,alwaysraised=yes" + 
				",innerHeight=0,innerWidth=0";

    var contents="<html><head><title>Photo Viewer</title></head>" + 
                "<body topmargin=0 leftmargin=0 rightmargin=0 " +
				"bottommargin=0 marginwidth=0 marginheight=0><img src=" +
				url + "></body></html>";
    popup = whack('', "mywindow", flags); 
    popup.document.write(contents); 
        }
       } 
      // --></script>

Then, set up each of your thumbnails [Hack #77] to call the script, like this:

	<a href="javascript:showpic('http://www.your.server/bigphoto.jpg');"><img 
	src="http://www.your.server/thumbnailphoto.jpg"></a>

where http://www.your.server/thumbnailphoto.jpg is the full URL of the thumbnail image and http://www.your.server/bigphoto.jpg is the full URL of the full-size version.

Running the Hack

To try it out, just click the thumbnail image. The full-size version will appear in a slick, minimalist window—perfectly sized to fit the image—like the one in Figure 5-12.

How It Works

The first thing the script does (lines to ) is fabricate a new function, whack, which is merely an alias for the window.open statement. This allows the script to work in eBay listings.

Use custom pop-up windows to make your pictures look more professional

Figure 5-12. Use custom pop-up windows to make your pictures look more professional

Warning

By the time you read this, eBay may have modified their JavaScript policies in such a way as to prohibit some or all of the code employed by this hack. (Such is the nature of hacking.) Now, these policies, not surprisingly, are in place to help reduce the kinds of abuse that are rampant elsewhere on the Internet (in this case, pop-up ads). If this happens, please take a moment to contact eBay and ask them to reduce the restriction. If they get enough such requests, perhaps they'll set up a registry of sorts, allowing honest sellers to apply for the right to include unrestricted JavaScript in exchange for promising to use that right responsibly. In the mean time, check www.ebayhacks.com for any necessary revisions to this, or any other code in this book.

The rest of the script consists of the showpic routine, called whenever someone clicks one of your images.

In order to size the window properly, the code pre-loads the image into the objImage object , and then sets the width and height variables to the dimensions of the image. Since the image may take a second or two to load, the script checks the width variable before continuing; if width is zero, the code retries the showpic routine roughly three times per second until width is nonzero, indicating that the image has loaded successfully. (A nice sideeffect of this is that the window will never open if the image is missing or corrupt.)

Next, the flags variable specifies the attributes of the pop-up window so that it's not cluttered with toolbars, menus, or scrollbars, and so that it is sized to fit the image.

Rather than just opening the window to the provided URL, the script creates a little page on the fly to hold the picture . This allows all the margins to be set to zero, which ensures that the image appears snug against the sides of the window.

At long last, the code opens a new window and fills it with the prepared content .

There are a bunch of different things you can do to customize the link, as well as the window it opens:

If JavaScript is disabled in the bidder's browser, the link won't do anything at all. To make your links idiot-proof, so-to-speak, use this slightly more complicated code instead:

<a href="http://www.your.server/bigphoto.jpg" target="_blank"
	onClick="showpic('http://www.your.server/bigphoto.jpg');return 
	false;"><img src="http://www.your.server/thumbnailphoto.jpg"></a>

This version of the link is similar to the original, except the href parameter now points directly to the full-size image and the JavaScript code is called from the onClick event. Notice the return false; statement, which tells the browser to ignore the href parameter. If JavaScript is disabled, however, it works like one of the ordinary thumbnail links in [Hack #77] .

You can specify a title to appear at the top of the pop-up window by replacing the text "Photo Viewer" on line with something else. Here might be a great place to attribute eBay Hacks (hint, hint).