Creating a Custom jQuery Image Magnifier Plugin

Implementation Overview

The image magnifier plugin creates a loupe effect that follows the mouse cursor over an image, showing a magnified portion of the image. This implementation uses two images: a thumbnail displayed on the page and a high-resolution version shown in the magnifier view.

Core Principles

Utilizes two images - a thumbnail and a high-resolution version
The magnifier is a div element with the high-res image as its background
Both images maintain proportional scaling for optimal magnification
When no high-res image is specified, the thmubnail doubles as the magnified view
Mouse movement events control the magnifier position and background offset

Plugin Implementation

(function($) {
    $.fn.imageLoupe = function(config) {
        
        // Default configuration
        const defaults = {
            loupeSize: 150,
            highResSrc: null
        };
        
        const options = $.extend({}, defaults, config);
        
        return this.each(function() {
            const $thumbnail = $(this);
            const thumbWidth = $thumbnail.width();
            const thumbHeight = $thumbnail.height();
            const containerOffset = $thumbnail.offset();
            const $loupeElement = $('.loupe-view');
            let widthScale = 0;
            let heightScale = 0;
            
            // Determine magnified image source
            const magnifiedSrc = options.highResSrc || $thumbnail.attr('src');
            
            // Apply loupe styling
            $loupeElement.css({
                width: options.loupeSize + 'px',
                height: options.loupeSize + 'px',
                borderRadius: (options.loupeSize / 2) + 'px',
                backgroundImage: `url('${magnifiedSrc}')`
            });
            
            // Calculate scaling ratios after image loads
            $('<img></img>').attr('src', magnifiedSrc).css('display', 'none').on('load', function() {
                widthScale = $(this).width() / thumbWidth;
                heightScale = $(this).height() / thumbHeight;
            }).appendTo($thumbnail.parent());
            
            // Handle loupe positioning
            function updateLoupePosition(event) {
                const mouseX = event.pageX - containerOffset.left;
                const mouseY = event.pageY - containerOffset.top;
                
                // Check if cursor is within image bounds
                if (mouseX < 0 || mouseY < 0 || mouseX > thumbWidth || mouseY > thumbHeight) {
                    $loupeElement.fadeOut(100);
                    return;
                }
                
                $loupeElement.fadeIn(100);
                
                // Calculate background position for magnified view
                const bgX = -(mouseX * widthScale - options.loupeSize / 2);
                const bgY = -(mouseY * heightScale - options.loupeSize / 2);
                
                $loupeElement.css({
                    backgroundPosition: `${bgX}px ${bgY}px`,
                    left: (event.pageX - options.loupeSize / 2) + 'px',
                    top: (event.pageY - options.loupeSize / 2) + 'px'
                });
            }
            
            // Bind mouse events
            $loupeElement.on('mousemove', updateLoupePosition);
            $thumbnail.on('mousemove', updateLoupePosition);
        });
    };
})(jQuery);

HTML Strcuture

<div class="image-container">
    <img src="images/thumbnail.jpg" id="product-image" width="500" height="333">
    <div class="loupe-view"></div>
</div>

CSS Styling

.loupe-view {
    position: absolute;
    display: none;
    cursor: none;
    border: 2px solid #fff;
    box-shadow: 0 0 5px rgba(0,0,0,0.3), 0 0 10px rgba(0,0,0,0.2) inset;
    background-repeat: no-repeat;
    pointer-events: none;
}

Usage Example


<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery Image Loupe Demo</title>
    <link rel="stylesheet" href="styles/loupe.css">
</head>
<body>
    <h1>Product Image Gallery</h1>
    
    <div class="image-container">
        <img src="images/thumbnail.jpg" id="product-image" width="500" height="333">
        <div class="loupe-view"></div>
    </div>
    
    <script src="scripts/jquery.min.js"></script>
    <script src="scripts/jquery.loupe.js"></script>
    <script>
        $(document).ready(function() {
            $('#product-image').imageLoupe({
                loupeSize: 180,
                highResSrc: 'images/high-resolution.jpg'
            });
        });
    </script>
</body>
</html>

The plugin has been refactored for better separation of concernns, with the loupe element and CSS now externalized from the JavaScript logic. This approach improves maintainability and allows for easier customization of the magnifier appearance.

Tags: jquery plugin image-magnifier javascript loupe-effect

Posted on Thu, 21 May 2026 17:02:29 +0000 by gatoruss

Freaks City