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!!!