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 |
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.