Amazing jQuery Plugin For Making Web Page Elements Zoom - Zoomooz

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.