jQuery Plugin For Image Zoom On Mouse Hover - ZoomPic

File Size: 9.69 KB
Views Total: 4933
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin For Image Zoom On Mouse Hover - ZoomPic

ZoomPic is a simplist jQuery plugin used to zoom and display the original size of a thumbnail image when hovered.

How to use it:

1. Include the needed jQuery JS library and the jQuery ZoomPic's script in the web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/ZoomPic.js"></script>

2. Insert images into your web page.

<div class="images">
  <a href="#"><img src="1.jpg" ></a>
  <a href="#"><img src="2.jpg" ></a>
  <a href="#"><img src="3.jpg" ></a>
</div>

3. Resize the images in your CSS to create thumbnails.

.images img {
  width: 160px;
  height: 160px;
}

4. Call the plugin on the parent element to active the image zoom functionality on mouseover.

$(".images").ZoomPic();

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