jQuery image gallery preview image popup
- by JV10
I've created an image gallery with the preview image popup on hover.
http://jsfiddle.net/WSfka/
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);
}
});
