How to create zoom in and out an image using jQuery
What Will I Learn?
- You will learn how to get image width
- You will learn how to get image height
- You will learn how to set image height and width using jQuery
Requirements
- Basic knowledge about HTML
- Basic knowledge about JavaScript
- Basic knowledge about CSS
- You have to install or host the jQuery file, You can add jQuery CDN if you don't want to install or host it
- To practice this tutorial you need a text editor and a browser
Difficulty
- Basic
Tutorial Contents
The process of zooming in a website is often done, especially on the image element. On this occasion we will explore how to zoom in and zoom out using jQuery. To zoom in and out, you can use height () and width () method. For more details, let's look at the following steps.
- Open your Text editor
- Create new file save as
zoom.html - Add an image to the same folder of
zoom.html. for example here I addpic.JPG - Add the HTML element as usual.
<html>
<head>
<title>ZOOM</title>
</head>
<body>
</body>
</html>
- Create zoom in button
<button id="in">+</button>
- Create zoom out button
<button id="out">-</button>
- Display an image using
<img>html tag. and set a sample image width and height. For this image I set 320 for width dan 240 for height.
<img src="pic.JPG" width="320px" height="240px">
Adding jQuery Script
- As we know, to use jQuery we need to install or host it. Or we can also add jQuery CDN if we don't want to install or host it. we also have many choices CDN that we can use, either Google CDN or Microsoft CDN. For more Detail you can visit jquery official web. In this tutorial I use Google CDN. Add the CDN in
<head>element.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
- To write the jQuery Script we should open
<script>tag. You can put it in<head>element or in element.
<script></script>
- Before add more event in jQuery. There is an event that we should add for the first. It is
ready()event. this event to make sure that all html elements are loaded. if it is, then it will load jQuery script. So, all jQuery Script must write in this function event.
$(document).ready(function(){
});
- Select the zoom in button by id and add the click event function.
$("#in").click(function(){
});
- Set the image width and height. we can use
width()andheight()method. With the parameter is image size now + 100. So when user click + button, the image width and height will increase 100
$("img").width($("img").width()+100);
$("img").height($("img").height()+100);
- To zoom out, select the zoom out button then add the click event function.
$("#out").click(function(){
});
- To zoom out we can set the parameter image height and width now - 100.
$("img").width($("img").width()-100);
$("img").height($("img").height()-100);
Save and run the file.
try to click + button.
try to click - button.
FINISH, for the full code you can copy bellow:
<html>
<head>
<title>ZOOM</title>
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
</head>
<body>
<center>
<h3>ZOOM BUTTON</h3>
<button id="in">+</button>
<button id="out">-</button>
<br><br>
<img src="pic.JPG" width="320px" height="240px">
</center>
<script>
$(document).ready(function(){
$("#in").click(function(){
$("img").width($("img").width()+100);
$("img").height($("img").height()+100);
});
$("#out").click(function(){
$("img").width($("img").width()-100);
$("img").height($("img").height()-100);
});
});
</script>
</body>
</html>
LIVE DEMO
Curriculum
This is my fisrt tutorial contributions about jQuery
Posted on Utopian.io - Rewarding Open Source Contributors
Hey @rejacole I am @utopian-io. I have just upvoted you!
Achievements
Suggestions
Get Noticed!
Community-Driven Witness!
I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!
Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x
Thank you for the contribution. It has been approved.
You can contact us on Discord.
[utopian-moderator]
What a marvelous tip of how to make zoom in and zoom out using jQuery. It's very beneficial for the one who needs to do so. Thanks bro..