Jquery wait for all the images to be loaded before calling an action, such as image caption

Recently I've just wanted a nice rollover caption implemented on our wedding invitation website, such on a list of wedding invitations, when you hover on one, a caption will be shown. Of course, there are some wedding invitation categories that would have more cards than others so we need paging. And I implemented the paging using ajax calls. This is the part that complicates everything since the caption library should only be called once all the images are loaded.

At first I tried window load function, it worked on all the first page. But on pages with paging, it failed. So if you have a case where you only display the image on 1 page you can try:
$(window).load(function () { $("#templates").ImageOverlay({ border_color: "#6f5140", overlay_text_color: "#FFF", overlay_color: "#6f5140" }); });
I'm assuming you have a div with "templates" id, which contains images element for the image caption library mentioned below.

But what really work, is on the page (below) where the images are rendered (im my case it's a partial view). I've insert the following script:
$('#templates').waitForImages(function () {
        $("#templates").ImageOverlay({ border_color: "#6f5140", overlay_text_color: "#FFF", overlay_color: "#6f5140" });
    });


FYI, I've used the ff library:
Image caption script (jquery): http://code.google.com/p/jquery-imageoverlay/
Wait for all images script (jquery): https://github.com/alexanderdickson/waitForImages/blob/master/README.md

 To see how it actually work, you can look at the ff website: http://kalidadprintsandfavors.com/wedding-invitations/wedding-invitations
Jquery wait for all the images to be loaded before calling an action, such as image caption Jquery wait for all the images to be loaded before calling an action, such as image caption Reviewed by Edward Legaspi on Wednesday, April 11, 2012 Rating: 5

No comments:

Powered by Blogger.