jQuery Plugin For Zooming In On Any DOM Elements - zoomIn

zoomIn is a lightweight jQuery plugin to enable mouse-hover inner zoom on any DOM elements (text, image, etc) by using CSS3 transforms.

Features:

• Mouse hover to active the inner zoom.
• Mouse scroll to change the zoom depth.
• A description bar to display the custom message and current zoom depth.

How to use it:

1. Load the latest version of jQuery library and the jQuery zoomIn plugin at the bottom of the web page.

<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="js/zoomIn.js"></script>

2. Call the function on your DOM element to enable the inner zoom on mouse hover.

$(function () {
  $('img,p').zoomIn({
    'description': true,
    'message': 'custom message'
  });
});

3. Default settings.

// display a description bar
description: false,

// custom message
message: 'default message',

// custom transition effect
transition: {
  time: '0.1s',
  type: 'ease-out'
},

// change zoom value by step
step: 0.5,

// default zoom depth
zoom: 2,

// maximum zoom depth
zoomMax: 10,

// minimum zoom depth
zoomMin: 1.5,

rate: 80,

// callback function
callback: null

---

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