Zoom images with JQzoom

Today I am going to show you how to implement an image zoom mechanism using JQuery with the JQzoom plugin . This technique consists of hovering the mouse over a certain area of ​​the image and an instant zoom of the selection appears beside it . This is widely used in e-commerce sites , as it is possible to check every detail of a product.

Before starting, it is important that we download the plugin files and organize our files and directories.To download the plugin and its files, click here . Unzip the files.

Create a folder with the name of your project (in my case, I created a project called jqzoom ). Inside that folder I will copy the subfolders css, images and js unzipped from the plugin download.

Now I will create the index.html file , which is where I will implement our example.

But before that it is important to copy a high resolution image and a thumbnail ( thumb ) of it into the images folder (these are the images that will be used in the example). In my case, I copied the ferrari.jpg and ferrari_thumb.jpg images into the images folder .

Now, let’s go to the implementation of the index.html file

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
    <head>
        <title>JQZoom</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="js/jquery-1.6.js" type="text/javascript"></script>
        <script src="js/jquery.jqzoom-core.js" type="text/javascript"></script>
        <link rel="stylesheet" href="css/jquery.jqzoom.css" type="text/css">
        <script type="text/javascript">
            $(document).ready(function(){
                $('.jqzoom').jqzoom({
                    zoomType : 'reverse'
                });
            })
        </script>
    </head>
    <body>
        <a href="images/ferrari.jpg" class="jqzoom" title="Imagem">
            <img src="images/ferrari_thumb.jpg" title="Ferrari" />
        </a>
    </body>
</html>

In the header of the file I import the 2 files from the plugin + the jquery. Then, in the body of the document, just create a link with the href defined for the image in normal (large) size and define a class. Link in place a img with reduced image ( thumb).

In lines 9 to 15 I inform you that the class defined in the link should receive the zoom effect In the plugin function I can define some parameters to customize the effect. In the example I just stated that the zoom type (zoomType) would be reverse.

Here are some parameters that can be used:

  • zoomType: Type of zoom to be used. Standard: standard (Other options: reverse, drag and innerzoom )
  • zoomWidth: Zoom width. Standard: 300
  • zoomHeight: Zoom height. Standard: 300
  • xOffset: Horizontal zoom distance from the thumb. Default: 10
  • yOffset: Vertical zoom distance from the thumb. Default: 0
  • position: Place where the zoom will appear in relation to the thumb. Default: right (Other options:  top, left  and  bottom )
  • preloadimages: Whether to load the large image before applying the effect. Default: true
  • preloadText: Text that appears while the large image is being loaded. Default: Loading Zoom
  • title: Displays a small title in the zoom window. If the title property of the large image link is set, it will be used. Default: true
  • lens: Shows a lens in the thumb image that follows the movement of the mouse cursor. Default: true
  • imageOpacity: Opacity of the image when zoomType is set to reverse. Default: 0.4
  • showEffect: The effect of when the zoom is triggered. Default: show  (Another option: fadein )
  • hideEffect : The effect of when the zoom is disabled. Default: hide (Another option: fadeout )
  • fadeinSpeed: Effect speed if showEffect is set to fadein. Default: slow (Other options: fast or time (in milliseconds) )
  • fadeoutSpeed: Effect speed if hideEffect is set to fadeout. Default: 2000 (Other options: fast , slow or time (in milliseconds) )

And ready, just run your project and see how interesting this effect is.

To see the example of this post, click here . To download the files for this example, click here.

Hugs!!!

He has a degree in Information Systems, a postgraduate degree in Database Systems and a master's degree in Education with a focus on Sociocommunity Technologies. He works as a teacher of technical and technological education at the Federal Institute of Education, Science and Technology of São Paulo, teaching subjects in the areas of programming, database, project development and software engineering.

Posts relacionados

Leave a Reply

Your email address will not be published. Required fields are marked *