title: jQuery: Image Highlighting
body: <p>This is probably a simple solution but I am just not seeing it. I appreciate the help.</p>
  
  <p>I am following this guide: <a href="http://tympanus.net/codrops/2010/07/04/image-highlighting-preview/" rel="nofollow">http://tympanus.net/codrops/2010/07/04/image-highlighting-preview/</a></p>
  
  <p>Guide Demo: <a href="http://tympanus.net/Tutorials/ImageHighlighter/" rel="nofollow">http://tympanus.net/Tutorials/ImageHighlighter/</a></p>
  
  <p>And here is my code (also below): <a href="http://jsfiddle.net/Draven/Xa4f3/9/" rel="nofollow">http://jsfiddle.net/Draven/Xa4f3/9/</a></p>
  
  <p>Multiple problems:</p>
  
  <ul>
  <li>It's not showing the zoom, loading, and close icons.</li>
  <li>Overlay is not disappearing when you remove the mouse from over the
  image.</li>
  <li>The image is loading under the "thumbnail".</li>
  </ul>
  
  <p>HTML:</p>
  
  <pre><code>&lt;img src="http://www.daysofthedead.net/los_angeles/images/guests/coming_soon_sunday_hover.png" alt="http://www.daysofthedead.net/los_angeles/images/guests/coming_soon_sunday_hover.png" class="ih_image" width="510" height="150"&gt;
  &lt;div id="ih_overlay" class="ih_overlay" style="display:none;"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.ih_overlay{
      position:fixed;
      top:0px;
      left:0px;
      right:0px;
      bottom:0px;
      background:#000;
      z-index:10;
      opacity:0.9;
      filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);
  }
  img.ih_image{
      margin:10px 0px;
      position:relative;
      -moz-box-shadow:1px 1px 4px #000;
      -webkit-box-shadow:1px 1px 4px #000;
      box-shadow:1px 1px 4px #000;
      opacity:0.7;
      filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
  }
  .ih_image_clone_wrap{
      position:absolute;
      z-index:11;
  }
  .ih_image_clone_wrap span.ih_zoom,
  .ih_image_clone_wrap span.ih_loading,
  .ih_image_clone_wrap span.ih_close{
      position:absolute;
      top:10px;
      right:10px;
      width:24px;
      height:24px;
      text-indent:-9000px;
      -moz-border-radius:6px;
      -webkit-border-radius:6px;
      border-radius:6px;
      opacity:0.8;
      cursor:pointer;
      -moz-box-shadow:1px 1px 2px #000;
      -webkit-box-shadow:1px 1px 2px #000;
      box-shadow:1px 1px 2px #000;
      z-index:999;
      filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
  }
  .ih_image_clone_wrap span.ih_zoom{
      background:#000 url(http://www.daysofthedead.net/images/ih/zoom.png) no-repeat center center;
  }
  .ih_image_clone_wrap span.ih_loading{
      background:#000 url(http://www.daysofthedead.net/images/ih/loader.gif) no-repeat center center;
  }
  .ih_image_clone_wrap span.ih_close{
      background:#000 url(http://www.daysofthedead.net/images/ih/close.png) no-repeat center center;
  }
  .ih_image_clone_wrap img{
      opacity:0.7;
      -moz-box-shadow:1px 1px 10px #000;
      -webkit-box-shadow:1px 1px 10px #000;
      box-shadow:1px 1px 10px #000;
      filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
  }
  .ih_image_clone_wrap img.ih_preview{
      opacity:1;
      position:absolute;
      top:0px;
      left:0px;
  }​
  </code></pre>
  
  <p>​JS:</p>
  
  <pre><code>/**
   * timeout to control the display of the overlay/highlight
   */
  var highlight_timeout;
  
  /**
   * user hovers one image:
   * create a absolute div with the same image inside,
   * and append it to the body
   */
  $('img.ih_image').bind('mouseenter', function() {
      var $thumb = $(this);
  
      var $clone = $('&lt;div /&gt;', {
          'id': 'ih_clone',
          'className': 'ih_image_clone_wrap',
          'html': '&lt;img src="' + $thumb.attr('src') + '" alt="' + $thumb.attr('alt') + '"/&gt;&lt;span class="ih_zoom"&gt;&lt;/span&gt;',
          'style': 'top:' + $thumb.offset().top + 'px;left:' + $thumb.offset().left + 'px;'
      });
  
      var highlight = function() {
          $('#ih_overlay').show();
          $('BODY').append($clone);
      }
      //show it after some time ... 
      highlight_timeout = setTimeout(highlight, 700);
  
      /**
       * when we click on the zoom, 
       * we display the image in the center of the window,
       * and enlarge it to the size of the real image, 
       * fading this one in, after the animation is over.
       */
      $clone.find('.ih_zoom').bind('click', function() {
          var $zoom = $(this);
          $zoom.addClass('ih_loading').removeClass('ih_zoom');
          var imgL_source = $thumb.attr('alt');
  
          $('&lt;img class="ih_preview" style="display:none;"/&gt;').load(function() {
              var $imgL = $(this);
              $zoom.hide();
              var windowW = $(window).width();
              var windowH = $(window).height();
              var windowS = $(window).scrollTop();
  
              $clone.append($imgL).animate({
                  'top': windowH / 2 + windowS + 'px',
                  'left': windowW / 2 + 'px',
                  'margin-left': -$thumb.width() / 2 + 'px',
                  'margin-top': -$thumb.height() / 2 + 'px'
              }, 400, function() {
                  var $clone = $(this);
                  var largeW = $imgL.width();
                  var largeH = $imgL.height();
                  $clone.animate({
                      'top': windowH / 2 + windowS + 'px',
                      'left': windowW / 2 + 'px',
                      'margin-left': -largeW / 2 + 'px',
                      'margin-top': -largeH / 2 + 'px',
                      'width': largeW + 'px',
                      'height': largeH + 'px'
                  }, 400).find('img:first').animate({
                      'width': largeW + 'px',
                      'height': largeH + 'px'
                  }, 400, function() {
                      var $thumb = $(this);
                      /**
                       * fade in the large image. Replace the zoom with a cross,
                       * so the user can close the preview mode
                       */
                      $imgL.fadeIn(function() {
                          $zoom.addClass('ih_close').removeClass('ih_loading').fadeIn(function() {
                              $(this).bind('click', function() {
                                  $clone.remove();
                                  clearTimeout(highlight_timeout);
                                  $('#ih_overlay').hide();
                              });
                          });
                          $thumb.remove();
                      });
                  });
              });
          }).error(function() {
              /**
               * error loading image. Maybe show a message : 'no preview available'?
               */
              $zoom.fadeOut();
          }).attr('src', imgL_source);
      });
  }).bind('mouseleave', function() {
      /**
       * the user moves the mouse out of an image.
       * if there's no clone yet, clear the timeout
       * (user was probably scolling through the article, and 
       * doesn't want to view the image)
       */
      if ($('#ih_clone').length) return;
      clearTimeout(highlight_timeout);
  });
  
  /**
   * the user moves the mouse out of the clone.
   * if we don't have yet the cross option to close the preview, then
   * clear the timeout
   */
  $('#ih_clone').live('mouseleave', function() {
      var $clone = $('#ih_clone');
      if (!$clone.find('.ih_preview').length) {
          $clone.remove();
          clearTimeout(highlight_timeout);
          $('#ih_overlay').hide();
      }
  });​
  </code></pre>