CODEWITHSUNDEEP
jquery
Draven
Draven

Reputation: 1467

jQuery: Image Highlighting

This is probably a simple solution but I am just not seeing it. I appreciate the help.

I am following this guide: http://tympanus.net/codrops/2010/07/04/image-highlighting-preview/

Guide Demo: http://tympanus.net/Tutorials/ImageHighlighter/

And here is my code (also below): http://jsfiddle.net/Draven/Xa4f3/9/

Multiple problems:

HTML:

<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">
<div id="ih_overlay" class="ih_overlay" style="display:none;"></div>

CSS:

.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;
}​

​JS:

/**
 * 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 = $('<div />', {
        'id': 'ih_clone',
        'className': 'ih_image_clone_wrap',
        'html': '<img src="' + $thumb.attr('src') + '" alt="' + $thumb.attr('alt') + '"/><span class="ih_zoom"></span>',
        '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');

        $('<img class="ih_preview" style="display:none;"/>').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();
    }
});​

Upvotes: 1

Views: 1023

Answers (1)

Nope
Nope

Reputation: 22339

I had another look and there was one change which indeed seemed to have made a lot of difference.

When making the clone you specified one of the settings to be
'className': ih_image_clone_wrap',

Replace that with:
'class': 'ih_image_clone_wrap',

See full code:

var $clone = $('<div />', {
    'id': 'ih_clone',
    'class': 'ih_image_clone_wrap',
    'html': '<img src="' + $thumb.attr('src') + '" alt="' + $thumb.attr('alt') + '"/><span class="ih_zoom"></span>',
    'style': 'top:' + $thumb.offset().top + 'px;left:' + $thumb.offset().left + 'px;'
});

In addition the image size difference will be fixed if you remove the width and height settings from the original img tag as you mentioned in the comments.

If you want it to be 510 x 150 just apply the same to your clone and you are good to go.

Unless I'm mistaken this seemed to have fixed all issues:

  • It's not showing the zoom, loading, and close icons (fixed)
  • Overlay is not disappearing when you remove the mouse from over the image (fixed)
  • The image is loading under the "thumbnail" (fixed)

DEMO

Hope this helped.

Upvotes: 1

Related Questions