image-enlarge

I have a dynamically generated set of images (with a comment near every image). I want to display every image with max-width and max-height of 48 px, but when the user is hovering over an image it grows to max-width and max-height of 200px. But without moving everything else on the page. This is the code that generates the images: $(function(){ $.getJSON("inc/API.php", {command : "getUserComments", userid : getQueryStringValue("userid")}, function(result) { for (var i = 0; i<6; i++){ $("#divUserCommentsContent").append("<div id='divUserComment'><div id='divCommentTime'>"+ result[i]

I'm not sure where I'm going wrong. I'm trying to create a very simple hover-enlarge plugin with Jquery using the scale function. Here is my code: $(document).ready(function(){ $("#content img").toggle("scale",{ percent: "80%" },0); $('#content img').hover(function() { $(this).css("cursor", "pointer"); $(this).toggle("scale",{ percent: "90%" },500); }, function() { $(this).toggle("scale",{ percent: "80%" },500); }); }); Here's a small example: http://jsfiddle.net/8ECh6/ Here's the page: http://samples.zcardna.com/health.html If somone knows where I've gone wrong that would awesome! THANKS!

How do I open / enlarge an image in a modal using jquery / js and not data attributes ? Anytime a user inserts an image into a content editor I need it to be clickable to expand in a modal with js, so I cannot rely on the user to input data attributes they don't know how to use. I tried:- <a href="/myImage.png" id="pop"> <img src="/myImage.png" style="width: 400px; height: 264px;"> Click to Enlarge </a> jQuery :- $("#pop").on("click", function() { $(this).modal(); }); Do I need to add info to the jquery to pass the image source to appear in the modal? Thank you!!! martinezjc You can try this