How to Zoom In/Out Images Using jquery.fs.zoomer.js｜DAD UNION

In this article, we will introduce how to zoom in and out (zoom display) images with large vertical and horizontal sizes using jquery.fs.zoomer.js.

Image Used

We used a jpg image with a size of 644px width × 828px height.

Image for zoom (zoom in/out)

CSS Code to Zoom In/Out Images Using jquery.fs.zoomer.js

Load the jquery.fs.zoomer.css file. Change the following as needed.

<style type="text/css">
<!--
.zoomer_wrapper{
	border: 1px solid #ddd;
	border-radius: 3px;
	height: 500px;
	margin: 10px 0;
	overflow: hidden;
	width: 100%;
}
.zoomer.dark_zoomer{
	background: #333 url(zoomer-bg-dark.png) repeat center;
}
.zoomer.dark_zoomer img{
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
-->
</style>
<link href="jquery.fs.zoomer.css" rel="stylesheet" type="text/css" media="all">

HTML Code to Zoom In/Out Images Using jquery.fs.zoomer.js

Prepare an image to be zoomed in and out (class=”zoomer_wrapper zoomer_basic”).

<h1>Click “+” and “-” to zoom in and out the image.</h1>


    


<div class="zoomer_wrapper zoomer_basic">
        <img src="i01.jpg" alt="Image for zoom (zoom in/out)">
</div>

JavaScript Code to Zoom In/Out Images Using jquery.fs.zoomer.js

Load jquery and jquery.fs.zoomer.js, then write $(“.zoomer_basic”).zoomer() for the area (.zoomer_basic) where the zoom in/out images are set.

<script src="jquery-1.9.0.min.js"></script>
<script src="jquery.fs.zoomer.js"></script>
<script>
$(document).ready(function() {
	$(".zoomer_basic").zoomer();
});
</script>