Jquery: How to enlarge image on mouseover for dynamically generated images

Question

Hi all,

How to enlarge image on mouseover for dynamically generated images from the database.I am using c# code to bind the images in the User Interface. I tried different Jquery plugins but most of them had compatibility issues with some browsers(IE 6). Kindly suggest me a way out.

Thanks.

Answer 1

If you are dynamically adding images to your page (from a database or other external source), your first issue is how to ensure jQuery is made aware of them.

JQuery has a number of event listeners for dynamically-generated content, such as $.live() and $.delegate(). You will want to assign a listener for a content region to look out for any new images being loaded by using one of those two jQuery functions.

Once your code is aware of a newly-added image, your next task is to add the enlarge / shrink behaviour. Depending on what you want to have happen, your likely best option is to use jQuery's $.hover() event. So your code will look something like this:

$("#myContentRegion").delegate("img", "hover", function(){
    $(this).animate({ 
            width: 200, height: 200 
        }, 5000, function() {
    $(this).animate({ width: 100, height: 100 });
  });

});