Minimal jQuery Image Magnifier & Zoom Plugin - zoomz

File Size: 9.25 KB
Views Total: 3041
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Minimal jQuery Image Magnifier & Zoom Plugin - zoomz

zoomz is a super tiny jQuery plugin that provides image inner zoom functionality or displays a zoomed image in a landscape/portrait view next to the original image.

Basic Usage:

1. Load the latest jQuery library and the jQuery zoomz plugin in your Html page.

<link rel="stylesheet" href="src/jquery.zoomz.css">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="jquery.zoomz.js"></script>

2. Create an image inner zoom effect by adding the data-zoomz attribute to the img tag.

<img src="small.jpg" data-zoomz="large.jpg">

3. Display the zoomed image next to the original.

<img src="small.jpg" data-zoomz="landscape">

<div class="zoomz" style="width:300px; height:200px; background-color:grey">
  <img src="large.jpg" id ="landscape" class="target">
</div>

4. Enable the plugin.

$(window).load(function(){
  $('[data-zoomz]').zoomz();
});

This awesome jQuery plugin is developed by bencooling. For more Advanced Usages, please check the demo page or visit the official website.