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.
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>
Demo Page for Zooming In/Out Images Using jquery.fs.zoomer.js
Demo of zooming in/out images using jquery.fs.zoomer.js
Source:Zoomer Formstone / Ben Plum
Initially, it is necessary to prepare high-resolution images and be careful not to slow down the display speed.
Please use at your own risk when using this code.
Do not reuse the Google Analytics tag within the demo page tag.
