jQuery image gallery preview image popup

Question

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

Typically, the `.hover()` method signature includes a `mouseenter` and a `mouseleave` event like so `hover( handlerIn(eventObject) , handlerOut(eventObject) )`. You seem to have all the events. My guess is they might be cancelling out each other or mashing up together to create a frankin-event of sorts. Will take a look in another 15 mins odd to see if I can figure something out. — Abhilash, Nov 05 '12 at 04:50

VIDesignz · Accepted Answer · 2012-11-05T06:52:15.500

2

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

edited Nov 05 '12 at 06:52

answered Nov 05 '12 at 04:58

VIDesignz

4,703
3
25
37

Thanks but I still would like the half second delay, if that's possible? – JV10 Nov 05 '12 at 06:09
That's getting closer. Just needs to make sure the other sibling previews close as well. – JV10 Nov 05 '12 at 06:35
Just added one more tweak in case you want the fade in to be longer than .fadeIn(0) – VIDesignz Nov 05 '12 at 06:52

score 0 · Answer 2 · answered Feb 04 '13 at 12:03

You could try this example.

http://nemanjamilosavljevic.com/javascript/gallery_view/ This is a gallery that I've made, and it does what you needed, and also it allows a user to move their mouse, and still have the large image opend.

Hope that the approach helps you, or that you can use an entire example.

Cheers ;)

jQuery image gallery preview image popup

2 Answers2