🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A lightweight, easy-to-use jQuery plugin for product image magnification that creates a magnifier overlay on top of your image and displays the enlarged region of the image on mouse hover and move.

Magnifier Magnifying-Glass image-zoom

Documentation

HiZoom

HiZoom: A concise, easily, lightly (3KB) magnifier plugin of jQuery.

中文

Features


  • Concise:document is exhaustive and clearly
  • Lightly : the javascript file that compressed is just 3KB, and is one-twenty two of MagicZoom plugin
  • Browser Supported: Chrome, Firefox, Safiri, IE9+

Dependence


  • jQuery

Quick start


// download project git clone https://github.com/javashop/HiZoom.git
<!-- other code ... --> <link rel='stylesheet' href='./hizoom.min.css'>  <div class='hizoom gakki'>   <img src='./gakki.png'> </div> <div class='hizoom ldy'>   <img src='./ldy.png'> </div>  <script>   // Call the plugin   $('.gakki').hiZoom({     width: 400,     position: 'right'   });   $('.ldy').hiZoom({     width: 300,     position: 'left'   }); </script>

Config


Variable Description Value-Chosen Default
width width and height of magnifier container(square for now) A positive number 400
position direction of zoom left|right|top|bottom right
background background-color of magnifier Legal color value of CSS #FFF
opacity opacity of magnifier 0~1(legal CSS value) 0.7
distance distance between zoom area and magnifier container A positive number 20

TODO


  • Deal the rectangle image
  • Set the magnification by yourself
  • . . .

From

From Javashop ( http://www.javamall.com.cn )


You May Also Like