Search code examples
jqueryimagegallerypreview

jQuery image gallery preview image popup


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

Solution

  • THIRD UPDATE

    Try this

    Updated your fiddle

    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);
            }
        });