Allowing multiple pop-ups in Java

Here are some options that come to mind:

Option 1:
Since you open the windows with Javascript, just extend the function to check if another instance of that window is open already, if so, either resize the first popup & image or re-open a new window with the same image to 1/2 width.  Then, fit your next popup window in the 1/2 width space left on the screen.

Option 2:
All of the window flipping may be disconcerting for some users, you might instead consider creating a window with two image locations, when the user clicks on a first home image the left image location is populated and the right image location is empty, when the user clicks on a second home image the right image location is populated.  The process continues, replacing the left image and then the right image etc.

Option 3:
Don't make the user deal with the hassle of popup windows at all, just have a main window with two image locations with a scrollbar beneath each location, allowing the user to scroll through any two of the home images side-by-side.  Of the options listed, this would be my preference if I was to visit the site.

You can keep track of two window objects, and whenever a user clicks on a popup, it creates a new window, focuses them both, and displays them. When you open a second window, it fills the second window object. Then when a third window is opened, it swaps the second window over to the first, and replaces teh second window object, kind of like option2 from ddrudik. Whenever a popup is opened, both windows are set to focus.

Here I cobbled this popupWindow() function together:


<script>

var win1 = null;
var win2 = null;

function popupWindow(url)
{
      var cOptions = 'status=no,directories=no,location=no,menubar=no,toolbar=no,width=615,height=515';

      // Update our objects to reflect users closing the windows.
      if( win1 != null )
            if( win1.closed )
            {
                  win1 = win2;
                  win2 = null;
            }

      if( win2 != null )
            if( win2.closed )
            {
                  win2 = null;
            }
      
      if( win1 == null )
      {
            win1 = window.open(url,'popup1', cOptions);

            if( win2 != null )
                  if( !win2.closed )
                        win2.focus();

            win1.focus();
      }
      else if( win2 == null )
      {
            win2 = window.open(url,'popup2', cOptions);
            if( win1 != null )
                  if( !win1.closed )
                        win1.focus();

            win2.focus();
      }
      else
      {
            win1.close();
            win1 = win2;
            win1.name = 'win1';
            win2 = window.open(url,'popup2', cOptions);

            win2.focus();
            win1.focus();
      }
}
</script>


You'd use it like this:

<a href="javascript:void(0)" onclick="popupWindow('http://www.yahoo.com')">Open Yahoo</a><br>
<a href="javascript:void(0)" onclick="popupWindow('http://www.google.com')">Open Google</a><br>
<a href="javascript:void(0)" onclick="popupWindow('http://www.altavista.com')">Open Altavista</a><br>
<a href="javascript:void(0)" onclick="popupWindow('http://www.msn.com')">Open MSN</a><br>

(This way you get a maximum of two open popup windows. The images are cycled, and opening an image causes both popups to gain focus, for comparison purposes like you said)

not really a solution to your problem, but you might consider not using a normal popup window and instead using something like Lightbox or Thickbox:

http://jquery.com/demo/thickbox/

a lot of users won't like having other windows pop open needlessly.  to get the effect you are talking about here you might need to create one image that contains both photos.

A couple of others:

http://orangoo.com/labs/GreyBox/
http://demo.oscandy.com/slightbox_for_smoothgallery/demo.html

Lightbox and thickbox look *amazing*. You probably want to go with that :( Even though it means I don't get the points.

Lightbox is the original, and I think was mainly for images.  Greybox and Thickbox came a bit later and allowed multiple types of content.  Personally I go for Thickbox because I use jQuery so it's an easy fit.