Transform, Scale, Zoom, and more: across browsers

mag-inIn the process of creating an internal tool for my team I found that trying to zoom an image and move it around was not as simply as a single “zoom” CSS attribute. While Chrome supports “zoom” and it works quite well, the other browsers don’t work consistently, especially if you store the zoom and position values in a script. I stored the positions on the images to be replayed and I found all kinds of inconsistencies across browsers.  What did work consistently is the  transform CSS property, but that brought another challenge.

The challenge is I want to programmatically  move and zoom around the image and using a function like jQuery’s animate function needs to use a numerical value. The solution was not so easy to find on the web. The best response I found was this answer on StackOverFlow.

Below you see my zoomImage function where a zoom value is passed in and the image is animated to the new zoom level. First thing is to animate a psuedo property (which you can name it want you want, I named mine “myzoom”). Then use the step function to actually execute the animation:

function zoomImage(z){
$('#zoomimage').animate({ myzoom: z }, {
 step: function(now,fx) {
 $(this).css('-webkit-transform','scale('+now+')');
 $(this).css('-moz-transform','scale('+now+')'); 
 $(this).css('-ms-transform','scale('+now+')');
 $(this).css('-o-transform','scale('+now+')');
 $(this).css('transform','scale('+now+')'); 
 },
 duration:'slow'
 },'linear');
}

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s