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:
- It’s not showing the zoom, loading, and close icons.
- Overlay is not disappearing when you remove the mouse from over the
image. - The image is loading under the “thumbnail”.
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();
}
});
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:
In addition the image size difference will be fixed if you remove the
widthandheightsettings from the originalimgtag 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:
DEMO
Hope this helped.