Apply Smooth Zoom Effect To Images With Zoomer

By Irfan. in Web Design. Updated on May 30, 2023.

There’s a quote that goes, “a picture is worth a thousand words.” In web design, it becomes even more relevant. Especially when it’s about showcasing products, like in an e-commerce site for example. People need to get a clear grasp and be able to look at the product in a visual manner before they make a purchase after all.

Making the image as large as possible can’t solve this problem, as it will also take a huge amount of available space. Therefore the best choice is to make the image zoomable. With Zoomer you can make that happen with ease.

Zoomer is a free javascript library that enables your image to be zoomable. When it’s enabled, it will add its own style and a button for zooming in and out. It also supports multiple images, which will automatically be turned into an image gallery.

Optimizing Images for Websites (Ultimate Guide)

When it comes to website performance, image optimization plays a key role. Large, unoptimized images can slow down... Read more

Initialization

Before initializing it, first include the Zoomer script (which you can get from GitHub page) into your project like so:

 <script src="js/jquery.fs.zoomer.js" type="text/javascript"></script>

Zoomer will surround the image with its style and add a zooming in and out button. You should include the Zoomer stylesheet before the closing tag of head as well.

 <head>
 ..
 <link href="css/jquery.fs.zoomer.css" rel="stylesheet" type="text/css">
 ..
 </head>

Zooming In And Out

To create a new Zoomer, easily include an image inside a wrapper. Don’t forget to give the wrapper fixed height and width as all available space will be filled by the new markup. For instance, I create a wrapper with the name of .zoomable and define the height to 500px and the width to 100% like so:

 .zoomable { 
	 height: 500px; 
	 width: 100%; 
 }

Then I wrap the image I want to make zoomable, as per below:

 <div class="zoomable">
 <img src="img/image-demo.jpg" />
 </div>

The plugin will resize the image until some empty space for the wrapper is available. And if you add more images inside the wrapper, the plugin will automatically detect it then build its own gallery with a pagination button.

So, is the image zoomable? Not yet. We still need to call the plugin and include the class we’ve just created inside it:

 $(".zoomable").zoomer();

It’s done! The image is zoomable now.

Giving Options

If you not satisfied with the button, the background, the zooming increment etc, you can customize it by adding a small javascript snippet. Just put it into the plugin script like so.

$(".zoomable").zoomer({
  customClass: "custom",
  increment: 0.05
});

The customClass option can replace the background wrapper of the plugin while increment can be used to increase the degree of your zooming, and whether it is “smooth” or “rough”.

You can also handle a really large image that has been sliced into equal tiles with Zoomer. To do this, you must pass the tiles when initializing the plugin with source. Give it a thumbnail then declare all the sliced image sources using the following snippet:

$(".zoomable").zoomer({
  source: {
    thumbnail: "img/thumbnail.jpg",
    tiles: [
      ["img/01-01.jpg", "img/01-02.jpg", "img/01-03.jpg"],
      ["img/02-01.jpg", "img/02-02.jpg", "img/02-03.jpg"],
      ["img/03-01.jpg", "img/03-02.jpg", "img/03-03.jpg"]
    ]
  }
});

In the HTML code, just call the wrapper without the img source like so:

 <div class="zoomable">
 </div>

Final Thought

Images can give users more detailed representation. There are many ways to display images to be as detailed as possible, such as applying a lightbox or hover zoom. Zoomer gives you an additional option to do this. If you have any other ways, share it with us in the comment box below.