Amazing jQuery Plugin For Making Web Page Elements Zoom - Zoomooz
File Size: | 293 KB |
---|---|
Views Total: | 5803 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Zoomooz is a cool and easy-to-use jQuery plugin that makes any element of your web page zoom.
You can also zoom to elements which have been rotated, scaled or skewed, and they will morph correctly.
Take a look at all the demos below before moving on.
More Examples:
- hierarchy
- imagestack
- isometric
- rootchange
- rotate-bug-test
- rotation
- scrolling
- simple
- skew
- svgtree
- text
Basic Usage:
1. Include jQuery library and Zoomooz.js in the head section of your page
<script src="/path/to/jquery.min.js"></script> <script src="/path/to/jquery.zoomooz.min.js"></script>
2. Add the CSS class 'zoomTarget' to the element allowed to zoom on click. That's it.
<div id="item" class="zoomTarget"> Any Content Here </div>
3. Makes multiple elements zoomable inside a given container.
<div class="zoomViewport"> <div class="zoomContainer"> <div class="zoomTarget">Element 1</div> <div class="zoomTarget">Element 2</div> <div class="zoomTarget">Element 3</div> </div> </div>
4. Optionally, you can create navigation controls to switch between these zoomable elements.
<div class="zoomButton" data-type="prev" data-root=".zoomViewport"></div> <div class="zoomButton" data-type="next" data-root=".zoomViewport"></div>
5. You can also enable the zooming functionality on any element via jQuery.
$("#element").zoomTarget();
6. Possible options to customize the plugin.
$("#element").zoomTarget({ // size relative to the container element targetsize: 0.9, // "width"|"height"|"both" scalemode: "both", // root container root: $(document.body), // restore the element on click closeclick: false, // duration of animation duration: 450, // easing function easing: "ease", // use native animation nativeanimation: false // callback function animationendcallback: null, });
7. Or pass the options via data-OPTION
attribute as follows.
<div class="zoomTarget" data-targetsize="0.45" data-duration="600"> Element To Zoom </div>
Changelog:
2019-12-04
- JS, Doc, Demo updated
This awesome jQuery plugin is developed by jaukia. For more Advanced Usages, please check the demo page or visit the official website.