I've created an image gallery with the preview image popup on hover.
Hover over the thumbnail images and the larger image preview displays.
I'm not happy with the way preview images can flash between moving around the thumbnail images. How can I simplify the script and improve the preview image popup?
$(document).ready(function() {
$('.imageGalleryAlbum li a img').mouseenter(function() {
$(this).closest('li').find('.preview').delay(500).fadeIn(1);
$(this).closest('li').siblings().find('.preview').fadeOut(1);
return;
});
$('.imageGalleryAlbum li .preview').hover(function() {
$(this).closest('li').siblings().find('.preview').fadeOut(1);
return;
});
$('.imageGalleryAlbum li .preview').mouseleave(function() {
$(this).closest('li').find('.preview').fadeOut(1);
$(this).closest('li').siblings().find('.preview').fadeOut(1);
return;
});
$('.imageGalleryAlbum li .preview').click(function() {
$(this).closest('li').find('.preview').fadeOut(1);
$(this).closest('li').siblings().find('.preview').fadeOut(1);
return;
});
});
$(document).mouseup(function(e) {
var container = $(".preview");
if (container.has(e.target).length === 0) {
container.fadeOut(1);
}
});
THIRD UPDATE
Try this
var x;
$(document).ready(function() {
$('.imageGalleryAlbum li a img').on('mouseenter', function() {
$('.preview').stop().hide();
x = $(this).closest('li').find('.preview');
if( $(x).is(':visible') ) {
$(x).show();
} else {
$('.preview').hide();
$(this).closest('li').find('.preview').stop().delay(500).fadeIn(0);
}
});
$('.preview').parent().on('click mouseleave', function() {
$('.preview').hide();
});
});
$(document).mouseup(function(e) {
var container = $(".preview");
if (container.has(e.target).length === 0) {
container.fadeOut(1);
}
});