views:

295

answers:

1

there are various good jquery image preview plugins out there. however, all of the ones i've tested havent worked on image links that are embedded in the DOM with ajax.

i have tested use jquery live feature, but it doesnt work flawless.

$('a.preview').live('mouseover', function() {
    $(this).imgPreview({
        imgCSS: {
            //width: '200px'
        },
        preloadImages:      'true',
    });
});

im using this one: http://www.webresourcesdepot.com/jquery-image-preview-plugin-imgpreview/

the problem is that i have to use jquery live as u see above. but there is 2 flaws.

  1. if i move the mouse over the thumbnail the first time it doesnt show the preview, i guess that is because i hasnt fetched the image yet. so i have to move the mouse away from the image and back over the image again, then it'll be shown. and that is very annoying.

  2. it doesnt preload the images. if you check on their website they are using it like this instead:

    $('a.preview').imgPreview({ preloadImages: 'true', });

and that will preload all previews after DOM is fully loaded. but i have encapsulated the function. but even if i didnt, it cant cause i add these image links with ajax AFTER DOM is loaded.

i wonder if someone knows about a plugin that could do same stuff on ajax-loaded elements, both preview and preload.

thanks.

+2  A: 

adding it to the mouseover will not help, as the whole point is to preload the images before they get moused over ... (so that they are available at mouseover)..

you should add the $('a.preview').imgPreview(...) right after you attach the new links (from ajax) to the dom ..

Gaby
tried that but that will be as buggy cause if you use the function 2 times, then it will show double previews..and that will also defeat the purpose of preloading in the background if i put it after each ajax element cause then it has to wait til it is fully preloaded before it request for the next image, so it will not work on the background...problematic! hasnt someone tried to preview ajax embedded image links?
weng
when you fetch the images from the ajax call, you could make them have an additional class like 'newimage' and only use the preview on those images, and then remove that image .. so the preview will only be applied to the new ones ... just thinking ...
Gaby