views:

745

answers:

1

I'm using jquery's load to bring in thumbnails via ajax. I'd like to user to be able to hover over the cropped thumb to view a small uncropped version of the image using imgPreview plugin. If they click on it, then bring up the full sized image in a lightbox (fancybox).

For the lightbox, I have:

$("ul#plant_gallery li a").livequery( function(){   
    $(this).fancybox ({ 'overlayOpacity': 0.9, 'overlayColor': '#000', });
});

And for the tooltip uncropped image hover, I have:

$('ul#plant_gallery li a').live('mouseover', function()
{
    if (!$(this).data('init'))
    {
        $(this).data('init', true);
        $(this).imgPreview({imgCSS: { width: 200 }, srcAttr: 'rel'})
        (
            function()
            {

            },

            function()
            {
            }
        );
        $(this).trigger('mouseover');
    }
});

How can I combine these two into one? Should I be using either jquery's live or livequery? Thanks for your help!

+1  A: 

I think you don't NEED to combine them, have you tried:

$("ul#plant_gallery li a").live('click', function(){   
    $(this).fancybox ({ 'overlayOpacity': 0.9, 'overlayColor': '#000', });
});

And leaving the other function as it is?

Jahvi