Adding a jQuery Magnifying Popup lets people zoom in on pictures or parts of a webpage with a magnifying glass effect in a popup window. You can do this by using Magnific Popup (a well-known lightbox plugin) together with ElevateZoom or jquery.magnify to create the zoom effect.
Following the below steps, you will learn how to set up jQuery Magnifying Popup on your website.
Reference site: Click Here
Step 1: Include Required Libraries:
Add jQuery, Magnific Popup, and a magnifying plugin like ElevateZoom or jquery.magnify.
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Magnific Popup -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<!-- ElevateZoom -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/elevatezoom/3.0.8/jquery.elevatezoom.min.js"></script>
Step 2: Create Image Markup
Wrap the thumbnail image in a <a> tag linked to the larger image.
<a href="large-image.jpg" class="popup-magnify">
<img id="zoom-image" src="small-image.jpg" data-zoom-image="large-image.jpg" alt="Zoomable Image">
</a>
Step 3: Initialize Magnific Popup and ElevateZoom:
Use jQuery to apply Magnific Popup for the popup and ElevateZoom for the magnifying effect.
<script>
$(document).ready(function() {
// Initialize Magnific Popup
$('.popup-magnify').magnificPopup({
type: 'image',
closeOnContentClick: true,
mainClass: 'mfp-fade',
zoom: {
enabled: true,
duration: 300
}
});
// Initialize ElevateZoom for magnification
$("#zoom-image").elevateZoom({
zoomType: "lens",
lensShape: "round",
lensSize: 200
});
});
</script>
Final Thoughts:
- Magnific Popup handles the popup display.
- ElevateZoom or jquery.magnify provides a magnifying effect.
- Adjust lensSize, zoomType, or other parameters to fit your design.
