File Size: 421KB
Total Views: 1537
Date Created:
Last Modified Date:
Official Website: Go to website
License: MIT
jQuery Zoom is a lightweight and easily configurable jQuery plugin for zooming images. it supports hover, click, grab and toggle options, you can choose any one of them as per the requirements.
Features:
- It can be installed with
NPM. - Very simple image zoom jquery plugin that supports on hover, click, grab and toggle.
- Lightweight and easy to implement.
Install with NPM
$ npm install jquery-zoomHow to use it:
1. Include the Javascript jquery.zoom.min.js at the bottom of the web page.
<script src="path/to/jquery.zoom.min.js"></script>2. Add the basic HTML to the page.
<div class="zoom" id="default-zoom">
<img src="path/to/demo-1.jpg" alt=""/>
</div>3. Initialize the plugin and we’re ready to go.
$('#default-zoom').zoom();Plugin’s default options:
| Property | Default | Description |
|---|---|---|
| url | false | The url of the large photo to be displayed. If no url is provided, zoom uses the src of the first child IMG element inside the element it is assigned to. |
| on | ‘mouseover’ | The type of event that triggers zooming. Choose from mouseover, grab, click, or toggle. |
| duration | 120 | The fadeIn/fadeOut speed of the large image. |
| target | false | A selector or DOM element that should be used as the parent container for the zoomed image. |
| touch | true | Enables interaction via touch events. |
| magnify | 1 | This value is multiplied against the full size of the zoomed image. The default value is 1, meaning the zoomed image should be at 100% of its natural width and height. |
| callback | false | A function to be called when the image has loaded. Inside the function, `this` references the image element. |
| onZoomIn | false | A function to be called when the image has zoomed in. Inside the function, `this` references the image element. |
| onZoomOut | false | A function to be called when the image has zoomed out. Inside the function, `this` references the image element. |
