This JavaScript code snippet helps you to create a functionality to zoom in and zoom out div element. It uses the jQuery library to enable straightforward zoom actions for a specific div tag. You just need to add a “target” class to your div, and you’re all set for easy zooming with zoom-in, zoom-out, and reset controls.
You can apply this code to websites displaying images, maps, or detailed content, offering users the ability to zoom in for closer inspection.
How to Zoom in Zoom Out div Using JavaScript
1. First of all, load the Font Awesome CSS by adding the following CDN link into the head tag of your HTML document.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
2. Create a div element with a unique class name, such as “target”, to apply the zoom functionality to. Similarly, create buttons for zoom in, zoom out, and reset with appropriate classes.
<a class="btn zoom"><i class="fas fa-search-plus"></i></a> <a class="btn zoom-out"><i class="fas fa-search-minus"></i></a> <a class="btn zoom-init"><i class="fas fa-recycle"></i></a> <div class="box target"> <h3>Target Box</h3> <p>Height 300px</p> <p>Width 300px</p> </div> <div class="box not-target"> <h3>Not Target Box</h3> <p>Height 300px</p> <p>Width 300px</p> </div>
3. Style your target div and buttons for a visually appealing interface. Ensure the target div has initial styles and dimensions.
body {
margin: 30px;
}
.box {
display: inline-block;
background: linear-gradient(25deg, #F13F79, #FFC778);
color: white;
font-size: 25px;
padding: 40px;
width: 300px;
height: 300px;
}
.btn {
width: 30px;
height: 30px;
background: #FFF;
border: 1px solid #005bac;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
color: #005bac;
padding: 15px 10px 5px;
position: fixed;
text-align: center;
-ms-user-select: none;
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
transition: all 0.3s ease;
z-index: 1;
}
.btn:hover {
background: #eef;
}
.zoom {
bottom: 190px;
}
.zoom-out {
bottom: 120px;
}
.zoom-init {
bottom: 50px;
}
4. Now, load the jQuery library by adding the following CDN link just before closing the <body> element.
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
5. Finally, add the following JavaScript code to handle the zoom functionality. This code listens for clicks on zoom in, zoom out, and reset buttons and adjusts the scale of the target div accordingly.
var zoom = 1;
$('.zoom').on('click', function(){
zoom += 0.1;
$('.target').css('transform', 'scale(' + zoom + ')');
});
$('.zoom-init').on('click', function(){
zoom = 1;
$('.target').css('transform', 'scale(' + zoom + ')');
});
$('.zoom-out').on('click', function(){
zoom -= 0.1;
$('.target').css('transform', 'scale(' + zoom + ')');
});
That’s all! hopefully, you have successfully created a functionality to zoom in and zoom out div using JavaScript. If you have any questions or suggestions, feel free to comment below.
