Question

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.

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.
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.

Answer 1

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 ..

Answer 2

using the same plugin and with ajax this work perfectly:

.
.
.
$.post("ajax/showAlbum.php", { directory: "whatever" },
   function(data) {$( #first ).append(data);
$( #first a ).imgPreview({
    preloadImages:       true ,
    });
.
.
.

友情链接