How to create resizable image using jQuery UI

What Will I Learn?

You will learn how to use jQuery UI
You will learn class to for resizable in jQuery UI
You will learn resizable function
You will learn how to animate resizable

Requirements

Basic Knowledges about HTML
Basic Knowledges about jQuery
Basic Knowledges about JavaScript
You need to install or host jQuery and jQuery UI. You can also add CDN of jquery and jQuery UI if you dont want to install or host it.
An image for sample

Difficulty

Basic

Tutorial Contents

Resizable element is an element that can be resized by the user just by using the mouse. by hovering the cursor down the element will be higher and so when the cursor to the right direction the element will increase in width.

In this tutorial, we will create a resizable image. Because the image is the element that most often need to be resizabeled in a website, especially websites that display images such as website photography. For more details, let's follow and pay attention on the following steps:

[Creating HTML element]

Open your Text editor and create new file. Save as resize.html.
Add the HTML element as usual.

<html>
<head>
<title>Resizable Image</title>
</head>
<body>
</body>
</html>

Create an image element

<img  id="resizable" src="gmb.jpg">

Add .ui-widget-content class to get style form jquery UI and add width="100px" as image width before resizing.

<img class="ui-widget-content" width="100px" id="img" src="gmb.jpg">

[Adding jQuery and jQuery UI CDN]

Because we don't want to install or host the jQuery and jQuery UI file, we should add The CDN as replacement.

jQuery UI is a part of jQuery, so to use jQuery UI we need to add jQuery CDN first. we have many choices CDN that we can use, either Google CDN or Microsoft CDN. For more Detail you can visit jquery official web. Add the CDN in <head> element.

<script src="http://code.jquery.com/jquery-3.3.1.js"></script>

Add the jQuery UI CDN. To get it more you can visit here

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

[Coding jQuery Script]

To write the jQuery UI Script we should open <script> tag. You can put it in element or in <body> or in <head> 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 element that you want to make resizable

$( "#img" )

To make it resizable, add resizable() function

$( "#img" ).resizable();

[Testing]

Save the file and run it on your browser. Then try to resize the image

[Adding animate effect]

To add animage effect juat add animate: true as parameter like this :

$( "#img" ).resizable({
        animate: true
    });

Try to run and see the different

[full code]

<html>
<head>
  <title>Resizable Image</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
 $(document).ready(function() {
    $( "#img" ).resizable({
        animate: true
    });
  });
  </script>
</head>
<body>
<h3>RESIZABLE IMAGE</h3>
<img class="ui-widget-content" width="100px" id="img" src="gmb.jpg">
</body>
</html>

LIVE DEMO

Curriculum

How to Shake Login Form element when invalid entry using jQuery UI

Posted on Utopian.io - Rewarding Open Source Contributors

Your contribution cannot be approved because it is not as informative as other contributions. See the Utopian Rules. Contributions need to be informative and descriptive in order to help readers and developers understand them.

The tutorial doesn't teach more than simple usage of the function. Considering that the actual part is only 1 line of code without enough technical instructions, this tutorial format is open to abuse and not rewarded in Utopian.

Suggestions:

Your contributions in tutorial category are expected to really teach technical instructions which are not too simple as stated in the rules below.
- Tutorials must be technical instructions that teach non-trivial aspects of an Open Source project.
- Design or video editing related tutorials, gameplay, simple on-screen instructions, ubiquitous functions (Save, Open, Print, etc.) or basic programming concepts (variables, operators, loops, etc.) will not be accepted.

You can contact us on Discord.
[utopian-moderator]