I've received a few emails with questions about PopBox and like any good tech support I decided to post the answers to mitigate repeat questions. That said, if you can't find the answer here then please feel free to contact me and I'll see what I can do.

What is PopBox?

PopBox is an image magnification javascript solution for dynamically moving and resizing images on your web page. For a good introduction and the latest version please see the PopBox product page.

What development environment do you use for Javascript?

I use Microsoft's Visual Studio for 99% of my development, including script work. There may be better editors out there, but I already know VS very well and the way it integrates debugging with Internet Explorer is really nice. I am looking forward to the next version which I hear has much better intellisense for client-side script.

What browsers will work with PopBox?

PopBox has been tested with the following browsers:
  • Internet Explorer 7
  • Internet Explorer 6
  • FireFox 2.0.0.8
  • FireFox 2.0.0.7
PopBox has been independently tested with the following browsers and no errors have been reported:
  • Safari 3
  • Opera 9.x
  • Mozilla 1.9
  • Mozilla 1.8
  • Mozilla 1.7
Those should account for nearly all your traffic. If you have a bug to report feel free to contact me.

Is the popped image centered on the thumbnail?

No. The popped image is centered in the browser page by default. You can use the PopEx method to position it wherever you want though.

Can I use this inside a Flash-based web site?

Yes! It can be used in any web page that supports HTML. Wait - that's all of them...

Why does Visual Studio show red squiggly lines under all the pbsrc HTML attributes?

Technically speaking the pbsrc attribute is not in the HTML schema so it is not recognized by Visual Studio - or probably any other HTML editor. It's what is known as a "custom attribute."

Custom attributes are not compliant with XHTML Strict. Why do you use them?

I know that custom attributes are not "XHTML Strict" compliant. I believe that the XHTML Strict specification has some flaws and is largely irrelevant anyway. (See this article on codinginparadise and this one on quirksmode.)
I use them because they are the easiest and most expressive way of conveying the needed properties.

I don't like custom attributes. Do I have to use them?

No. But you're really limiting yourself to defining pops the older 1.x way instead of the fancy-shmancy 2.0 way, which means you can't use a separate image for the thumbnail. Some of the attributes have a fallback built-in though - such as using the "title" attribute if you don't define a "pbCaption" for the caption.

I don't want to use your stinkin' pbCaption non-strict-compliant "Custom" attribute. Can't I use the "title" attribute instead?

M'kay. Yes. That's been built in since the addition of pbCaption.

It isn't working! I have some other script that works just fine when the page loads but PopBox doesn't. Why?

You are probably loading your other scripts in the onload event handler on the <body> tag. Don't! Doing that will override all dynamically loaded scripts. If you need to run additional code at page load then place the function call in the window.onload event prior to declaring the PopBox script.
// no parameters
window.onload = MyFunction;

// or if it takes paramenters
window.onload = function(){MyFunction(param1, param2 param3);};

I used the window.onload event for my other function and now it runs immediately while PopBox waits until the page loads. Why?

The most common reason is that you are calling the other function in the window.onload as opposed to setting it in the window.onload.
// incorrect. This sets the return value to the onload handler
// and also calls it immediately while the page is still loading
window.onload = MyFunction();

// correct way
window.onload = MyFunction;

How do I create a clickable popped image?

Because the image that is popped is actually a copy of the original image placed on the page using "absolute" positioning it is NOT part of the flow that includes your <a> tag anymore.
The problem with a clickable Popped image is of course that a link implies that it will be clicked in order to go somewhere, so you have to make sure that PopBox calls are NOT made in the onclick handler. What that means is you have two options if you want a hyperlinked PopBox image:
Option 1: Don't Pop on onclick.
You can still Pop on the onmouseover event handler and put the hyperlink call in the onclick event handler, just as I did on my home page and the main products page. The image tag looks like this:
<img id="imgPopBox" alt=""
title="Click to go to the PopBox product page!"
src="products/images/PopBox.gif"
border="0"
class="PopBoxImageLink"
style="width: 100px; height: 49px;"
onmouseover="PopEx(this,-50,-23,200,98,20,null);"
onmouseout="Revert(this,20,null);"
onclick="window.location.href='Products/PopBox/Default.aspx';" />
Option 2: Don't Revert on ondblclick.
This would allow you to Pop when the user clicks on the image, but it wouldn't Revert if they clicked on it again, but would instead go to your hyperlink. You can still set onmouseout to Revert if you want to. The image tag would then look like this:
<img id="imgPopBox" alt=""
title="Click to go to the PopBox product page!"
src="products/images/PopBox.gif"
border="0"
class="PopBoxImageLink"
style="width: 100px; height: 49px;"
onmouseout="Revert(this,20,null);"
onclick="PopEx(this,-50,-23,200,98,20,null);"
ondblclick="window.location.href='Products/PopBox/Default.aspx';" />

Why are the pictures popping behind my other page content?

Some code editors automatically place z-index values on absolutely positioned content that conflict with the z-index values used by PopBox. PopBox has a start z-index value of 100, so if all z-index content on your page is less than 100 you won't have a problem, but if you have more than 100 items or your z-index values are 100 or higher then you may see some unusual behavior.
Absolutely positioning everything on your page isn't really considered good design, so if you can avoid it then you'll have the added bonus of not conflicting with PopBox anymore. If you can't (or won't) avoid it there are two easy solutions:
Option 1: Don't use z-index values greater than 99.
I know that sounds obvious, but if you only need 50 values and you're starting at 500 you may run into trouble. If you need 50 values and you're starting at 1 you will be just fine.
Option 2: Modify the PopBox z-index start value.
You can set the super-secret PopBox z-index value to start at a higher number to avoid conflicts, but keep in mind that I have not tested this exhaustively and can't guarantee numbers over 1000. Theoretically it should work fine into the tens of thousands, but I'm making no promises.
Set the start number after the PopBox script declaration like so:
<script src="/yoursite/scripts/PopBox.js" type="text/javascript" />
<script type="text/javascript">
popBoxZ = 500;
</script>

I've set the z-index on my absolutely positioned objects and the images are still popping behind. What gives?

Absolute positioning is a tricky thing, but since you're reading this I obviously didn't scare you away from it so here are some basic positioning rules to help you troubleshoot the problem:
  1. If the item does not have a z-index it will be placed under any other sibling item that appears after it.
  2. If the item does have a z-index its position relative to other sibling items is determined by that z-index, but always appears on top of sibling items without a z-index.
  3. Then the browser walks up the html node tree and positions the items parent container according to rules 1 & 2.
  4. Repeat step 3 until you hit the <body> tag.
This means that in the following example image1 will display above image2, even though image2 has a higher z-index, because the parent container displays above the other parent container.
<div style="position: relative; z-index: 10;">
   <img id="image1" style="z-index: 100;" src="image1.gif" alt="" />
</div>
<div>
   <img id="image2" style="z-index: 200;" src="image2.gif" alt="" />
</div>

I'm not using absolute positioning but the images are still popping behind my select boxes, list boxes and drop downs. Now what do I do?

In some browsers (cough... IE) certain HTML elements like select boxes will always render on top of the Z order because of the way that browser (again cough... IE) renders those types of windows.
Luckily there are two solutions from which you can choose:
  1. Use the PopEx method instead of the Pop method to explicitly place the Popped image on the page away from the offending HTML elements.
  2. Use the PrePopProcessing and PostRevertProcessing events to hide and show the select box by getting its Id and setting its visibility style to "hidden"/"visible".

Can I place a hyperlink or "Buy Now!" link in the caption?

Yes, you can place textual links (not graphics or buttons) in the pbCaption, but it's tricky about what can be included and what can't. Basically you can't include any double quotes so you have to be creative. Take a look at the sample below:
<img id="imgBlueScoop1" alt=""
src="images/BlueScoopSmall.JPG"
pbsrc="images/BlueScoop.JPG"
class="PopBoxImageSmall"
onclick="Pop(this,50,'PopBoxImageLarge');"
title="Click to magnify/shrink"
pbCaption="This is the best scoop money can buy! <a href='' onclick='return AddToCart();'>Buy Now!</a> You won't regret it!" />
You can define a method in script, AddToCart, that then processes this click. The tricky part is how to pass information to the method since you can't use double quotes and you've already used up your single quotes in the onclick handler. You do have a few options:
  1. Pass an integer like a SKU number:
    AddToCart(12345);
  2. Pass any object or object property:
    AddToCart(imgBlueScoop1);
    AddToCart(imgBlueScoop1.id);
  3. Pass any valid script variable:
    AddToCart(strProductId);
    AddToCart(arrayOfProductIds[imgBlueScoop1.id]);
Your AddToCart method would then have to extract the product on which you've clicked and do the processing part to add it to the cart.
Remember to return false from the method so the hyperlink doesn't reload the page.

Is PopBox compatible with iframes?

Yes and no, but more no than yes. If you are willing to accept the trade-offs then it might be worth it to you.
As long as the script is embedded in the same frame as the image it should work, which means you just need to figure out how to trigger a cross-frame event for whatever you're clicking in the other frame. I don't believe a cross-frame method call would be sufficient, but I'd have to look into that - or someone could try it and let me know. Think of a frame as a script sandbox - I know it's not exactly that, but it's close.
Personally I'm not a fan of iframes. I think there are too many bugs and quirks associated with them.
Some browsers always display iframes above other absolutely positioned content on the page (article here), so I can't really recommend them for PopBox since PopBox relies heavily on the animation of an absolutely positioned image. The image would always display behind the iframe.
If you can avoid iframes on pages with images to pop I think you'll be much better off.

This is wicked cool! Can I send you some money?

Thanks. And thanks. But it's free - as in "doesn't cost anything."

No really! I really want to send you some money!

And it's really still free.

Can't I please please please send you some money?

If I were to give in to you then I'd have to give in to everybody and when I was freaky stinkin' rich everyone would think I just did it for the money, which for a free product is secondary, or perhaps tertiary.
If you're going to be super insistent I suppose you could PayPal a donation to my email address, but I don't have a business PayPal account so I can only accept something like 5 donations a year so you'd better make it count. Frankly I'd rather you just linked to my site and sent me an email.

Support

Didn't find your question answered above? Email it to me!

Since this is free I won't promise more than I can deliver while still working a day job, but I'll do my best. Be sure to sign up for my mailing list or subscribe to my RSS feed to be informed of the latest developments.

Powered by PopBox!