jQuery: Image Highlighting
<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>
