Click to Zoom and Resize image in javascript

Question

I would like to do something similar to the effect in the link below.

The image is initially rendered depending on the users screen resolution, and if the image is larger than the screen resolution of the user,on click the image in resizes in steps.

Can somebody guide me how to go about it.

I am not that good in jQuery,So would appreciate a "For Dummies" approach.

Thanks

maxedison · Accepted Answer · 2011-11-09 13:14:29Z

3

It's pretty simple. All that's happening is that a click event on the image is changing the image's width and height. Something like this:

var img = $('img');
var zoomWidthIncrement = img.width() * 1/3;
var zoomHeightIncrement = img.height() * 1/3;

img.click(function(){
    img.css({width: img.width() + zoomWidthIncrement, height: img.height() + zoomHeightIncrement});
});

You could also animate this zoom simply by using animate() to change the css values.

edited Nov 9, 2011 at 13:14

answered Nov 9, 2011 at 11:59

maxedison

17.6k15 gold badges72 silver badges118 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Shomz Over a year ago

You mean my superior math skills? ;) Nah, just wondered why didn't you do "/3" right away. Still upvoted you.

maxedison Over a year ago

For educational clarity. The OP is a noob, and I thought it would be clearer this way. Probably makes no difference though.

Teun Pronk · Accepted Answer · 2011-11-09 12:04:27Z

0

I recently used this in a project aswell. you could try this: You need 2 versions of the pictures for this method, a normal one and a zoomed one.

$('#myDiv').click(function () {
    if ($('#myDiv').length != 0) { return; }
    $('body').prepend('<div id="myDiv" class="mapTileOverlay"></div>');
    $('#myDiv').html('<div class="topOverlay"></div><div class=" overlayLarge"><div class="jqContentContainer"><div class="closeArea"><img src="<%=Utility.RawApplicationPath%>/static/images/game/office/closeButton.png"></div><img class="illustration" src="myImgBigVersion"  alt="Text illustration"></div></div><div class="bottomOverlay"></div>'); //<form class="formPMPStart" method="post" action="/game"><input type="submit" id="btnStart" class="gameContinue" value="Continue" /></form>
    $('#jqmdeskComputer').jqm({ modal: false, onShow: myOpen, onHide: myClose }).jqmAddClose($('div.closeArea')).jqmShow();
});

Probably not exactly what you wanted but I hope this code can help you get what you had in mind :)

answered Nov 9, 2011 at 12:04

Teun Pronk

1,39714 silver badges25 bronze badges

3 Comments

Teun Pronk Over a year ago

@maxedison solution is probably better and easier. But if you zoom in on a small picture it can get blurry.

maxedison Over a year ago

My solution assumes that the image you're zooming in on is the full-resolution one, just as it is in the example offered by the OP.

Teun Pronk Over a year ago

I know, thats why I gave you a +1 mate ;)

Collectives™ on Stack Overflow

Click to Zoom and Resize image in javascript

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related