This time I will share jQuery Plugin and tutorial about Show Full Size Image On Hover – jQuery Image Magnifier, hope it will help you in programming stack.
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.
1 |
<link rel="stylesheet" href="image-magnifier.css"> |
3 |
integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" |
4 |
crossorigin="anonymous"></script> |
5 |
<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.
2 |
{ blur: false, inner: true, tint: false }, |
3 |
{ src: 'full.jpg', height: 1280, width: 1600 }, |
4 |
{ src: 'thumb.jpg', height: 512, width: 640 } |
3. Display the enlarged images next to the thumbnail with a blur effect.
2 |
{ blur: true, inner: false, tint: false }, |
3 |
{ src: 'full.jpg', height: 1280, width: 1600 }, |
4 |
{ src: 'thumb.jpg', height: 512, width: 640 } |
4. Apply an overlay effect to the thumbnail when hovering.
2 |
{ blur: false, inner: false, tint: '#FF0000' }, |
3 |
{ src: 'full.jpg', height: 1280, width: 1600 }, |
4 |
{ 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.
