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 add pic.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() and height() 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