Enlarge the image by clicking on it using jQuery

Question

How to enlarge an image by clicking on it using jQuery. I am new to this and feel like gathering in circles, please help. Thanks!

Here is the HTML part:

<div class="box"> <img id="image1" src="css/images/smallknife.png"> <p>$50.00</p> </div> <div id="dialog" style="display: none;"> <img src="css/images/smallknife.png"> </div> 

And this is part of jQuery

 $('#image1').click(function(){ $("#dialog").dialog(); }); 

Answer 1

Are you looking for a lightbox plugin like fancybox?

http://fancybox.net/

Answer 2

Barebones Code:

 $(function () { $('#my-image').on('click', function () { $(this).width(1000); }); }); 

http://jsfiddle.net/mattball/YbMTg/

Answer 3

Here are some basic uses.

 var $img = $('img'); // finds all image tags $img.click(function resize(e) { // bind click event to all images $img.css({ // resize the image height: '300px', width: '300px' }); }); 

if you want to bind the click event to a specific image, give the image and id and cache like this

var $img = $('#imageID');

Answer 4

after searching and searching, I found a way to do without using an external JS source and no licensing problems. positioning the absolute and installation width and height up to 100%, play with precision to div, and here it is. I needed to create an additional table in order to be able to center the image, did not work on the div. and don't forget the z-index to place the div and table above all other elements. amuses ...

 function enlargeimage(x) { var a = document.getElementById('_enlargeimg'); a.style.height = x + '%'; a.style.width = x + '%'; x++; if (x < 90) { setTimeout("enlargeimage(\"" + x + "\")", 5);} } function reduceimage(x) { var a = document.getElementById('_enlargeimg'); a.style.height = x + '%'; a.style.width = x + '%'; x--; if (x > 0) { setTimeout("reduceimage(\"" + x + "\")", 5);} else { b = document.getElementById('_enlargediv'); c = document.getElementById('_enlargetable'); b.parentNode.removeChild(b); c.parentNode.removeChild(c); document.body.style.overflow = 'auto'; } } function createelements(imgfile) { var divbackground = document.createElement('div'); divbackground.setAttribute('id', '_enlargediv'); divbackground.style.width = '100%'; divbackground.style.height = '100%'; divbackground.style.position= 'absolute'; divbackground.style.background= '#000'; divbackground.style.left= '0'; divbackground.style.top= '0'; divbackground.style.opacity= 0.7; divbackground.style.zIndex= '1'; document.body.appendChild(divbackground); var tblbackground = document.createElement('table'); tblbackground.setAttribute('id', '_enlargetable') tblbackground.style.width = '100%'; tblbackground.style.height = '100%'; tblbackground.style.position= 'absolute'; tblbackground.style.left= '0'; tblbackground.style.top= '0'; tblbackground.style.zIndex= '2'; tblbackground.style.textAlign = 'center'; tblbackground.style.verticalAlign = 'middle'; tblbackground.setAttribute('onClick', 'reduceimage(90)'); var tr = tblbackground.insertRow(); var td = tr.insertCell(); var nimg = document.createElement('img'); nimg.setAttribute('src', imgfile); nimg.setAttribute('id', '_enlargeimg'); nimg.style.width='0px'; nimg.style.height='0px' nimg.style.borderRadius = '5px'; td.appendChild(nimg); document.body.appendChild(tblbackground); document.body.style.overflow = 'hidden'; enlargeimage(0); } 

Answer 5

This is a method that I would use at this simplest level to enlarge the image with a smooth transition:

 $(document).ready(function(){ $("img").click(function(){ $("img").animate({height: "300px"}); }); }); 

Answer 6

I know this post is old, but in case someone else stumbles upon it, here's how to make an image in the jquery dialog.

 $('img').on('click', function (){ $('body').append('<div id="dialog" title="Image"><img src="' + $(this).attr('src') + '" width="300" /></div>'); $('#dialog').dialog(); }); 

Make sure you have jquery-ui.css, otherwise it will look funny.

Answer 7

Here is a nice piece of code that will switch between an image size of 120px and a width of 400px with a nice slow onclick animation.

 $("img").toggle(function() {$(this).animate({width: "400px"}, 'slow');}, function() {$(this).animate({width: "120px"}, 'slow'); }); 

Answer 8

I chose a simple jquery module. It included everything I needed and is very easy to use.

fooobar.com/questions/1391764 / ...

Answer 9

You can also check out www.point-blankllc.com and see the free PicBoss code. Perhaps he will do what you want, because it will expand the image so that it is as large as possible on the screen while maintaining the image proportions.