Zooming Content in a Presentation

Zoomooz is a jQuery plugin that enables HTML elements to be zoomed in or out. It works by using CSS transforms to scale the elements. In this post, we will construct this simple demo. Notice that clicking on the logo brings it front and centre in the Presentation, while clicking off of it returns it to its original position.

Start by downloading the plugin from here. The download includes numerous files, many of which aren't strictly necessary in order to use the functionality. Here are the files that are needed:

The HTML

And here is what the HTML of the digital signage Presentation looks like:

The only thi

ng special about this HTML is that one of the elements has been assigned a class of zoomTarget. This means that the logo will have zooming enabled, while the text will not.

The Code

The final piece that is needed is this bit of jQuery:

$(document).ready(function() {
  $(".zoomTarget").click(function(evt) {
    evt.stopPropagation();
    evt.preventDefault();
    $(this).zoomTo({targetsize:1.25, duration:600});
  });

  $(window).click(function(evt) {
    evt.stopPropagation();
    $("body").zoomTo({targetsize:1.0});
  });

  $("body").zoomTo({targetsize:1.0});
});

This snippet of code attaches a click event to the zoomTarget element. Once selected, the element will scale to roughly 1.25 times its size over a period of 600ms. Conversely, using a value of 0.75 as the targetsize would scale the image down. When the window object is clicked, all zoomed elements will move back to their original size and position.

A Word of Warning

One thing to be aware of is that scaling in this way can pixelate an image if it is scaled to a size that is larger than its native dimensions. In the demo, this has been minimized somewhat by initially scaling the logo down to half its original size:

img {
  -webkit-transform:scale(0.5);
}

Now when the logo is zoomed, it won't be quite so pixelated. In general, this technique will work much better with a high resolution image.