Show Full Size Image On Hover - jQuery Image Magnifier
File Size: | 5.33 KB |
---|---|
Views Total: | 21377 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A simple, cross-browser Image Magnifier jQuery plugin that enables the user to show the full-size image on hover and view details with mouse move.
How to use it:
1. Load the image-magnifier.css
and image-magnifier.js
into the webpage which has jQuery loaded.
<link rel="stylesheet" href="image-magnifier.css"> <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script> <script src="image-magnifier.js"></script>
2. Initialize the Image Magnifier and specify the paths to the thumbnail & full size images. In this example, the plugin will apply an inner zoom functionality on the image.
imageZoom( { blur: false, inner: true, tint: false }, { src: 'full.jpg', height: 1280, width: 1600 }, { src: 'thumb.jpg', height: 512, width: 640 } );
3. Display the enlarged images next to the thumbnail with a blur effect.
imageZoom( { blur: true, inner: false, tint: false }, { src: 'full.jpg', height: 1280, width: 1600 }, { src: 'thumb.jpg', height: 512, width: 640 } );
4. Apply an overlay effect to the thumbnail when hovering.
imageZoom( { blur: false, inner: false, tint: '#FF0000' }, { src: 'full.jpg', height: 1280, width: 1600 }, { src: 'thumb.jpg', height: 512, width: 640 } );
This awesome jQuery plugin is developed by CharlesStover. For more Advanced Usages, please check the demo page or visit the official website.