How do I show an enlarged version of a thumbnail properly even when I'm close to the edges of a container div or the browser?
<p>I have a div full of 60x60 images arranged in rows of 5.  I want to show an enlarged version (at 300x300 max) of each thumbnail when you hover each image.  I have a surrounding div that hides overflow, so if you hover over an image at one of the corners, the enlarged image will get cut off, so I need to flip the image to the other side.  The code I have currently fails at addressing this clipping problem.  Any ideas how to properly implement this, or are there any packaged solutions out there (preferably using jQuery)?</p>

<pre><code>  $('a.thumb img').live('mouseover', showThumbnail);
  $('a.thumb img').live('mouseout', function() { $('#image-thumbnail').hide(); });
  $('#images a.thumb').live('click', function() { return false; }); /* disable clicks */

  function showThumbnail() {
    var pos = { left: this.offsetLeft, top: this.offsetTop }
    var css = { }

    css['left'] = pos.left + 60 + 5;
    if (css['left'] + 300 &gt; this.offsetParent.offsetWidth)
    {
      css['right'] = pos.left - 5 + 'px';
      delete css['left'];
    } else {
      css['left'] += 'px';
    }

    css['top'] = pos.top + 60 + 5;
    if (css['top'] + 300 &gt; this.offsetParent.offsetHeight+50)
    {
      css['bottom'] = pos.top - 5 + 'px';
      delete css['top'];
    } else {
      css['top'] += 'px';
    }

    $('#image-thumbnail').css(css);

    $('#image-thumbnail').html("&lt;img style='max-width: 300px; max-height: 300px;' src='" + $(this).parent()[0].href + "' /&gt;").show();  
  }
</code></pre>
