Hiệu ứng kính lúp (magnifier) là một tính năng hữu ích cho các trang web thương mại điện tử, giúp khách hàng xem chi tiết sản phẩm một cách trực quan. Bài viết này sẽ hướng dẫn bạn triển khai hiệu ứng này sử dụng jQuery.

Cài đặt thư viện

Đầu tiên, hãy thêm các tệp tin cần thiết vào trang HTML của bạn:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="js/jquery.magnifier.min.js"></script>
<link rel="stylesheet" href="css/magnifier.css" />

Cấu trúc HTML cơ bản

Để tạo hiệu ứng kính lúp, bạn cần cấu trúc HTML như sau:

<div class="product-image">
    <a class="magnifier-trigger" href="images/large/product.jpg">
        ![Sản phẩm mẫu](images/small/product.jpg)
    </a>
</div>

Trong đó:

• small/product.jpg: ảnh hiển thị ban đầu
• large/product.jpg: ảnh sẽ hiển thị khi zoom

Khởi tạo plugin

Cách đơn giản để kích hoạt hiệu ứng:

$(function() {
    $('.magnifier-trigger').productZoom();
});

Tùy chỉnh nâng cao

Bạn có thể tùy chỉnh nhiều tham số để tạo hiệu ứng phù hợp:

$(function() {
    var config = {
        magnifierSize: 150,
        zoomLevel: 2.5,
        position: 'right',
        offsetX: 20,
        offsetY: 10,
        fadeSpeed: 300,
        showTitle: true,
        titlePosition: 'bottom'
    };
    
    $('.magnifier-trigger').productZoom(config);
});

Bảng tham số cấu hình

Xử lý sự kiện

Plugin cung cấp các sự kiện để bạn tùy chỉnh hành vi:

$('.magnifier-trigger').on('zoomStart', function(e) {
    console.log('Bắt đầu zoom');
}).on('zoomEnd', function(e) {
    console.log('Kết thúc zoom');
});

Tích hợp với gallery ảnh

Để tích hợp với bộ sưu tập ảnh:

<div class="gallery">
    <div class="main-image">
        <a class="magnifier-trigger" href="images/large/product1.jpg">
            ![](images/small/product1.jpg)
        </a>
    </div>
    <div class="thumbnails">
        <a href="images/large/product1.jpg" class="active">
            ![](images/thumb/product1.jpg)
        </a>
        <a href="images/large/product2.jpg">
            ![](images/thumb/product2.jpg)
        </a>
    </div>
</div>

$('.thumbnails a').click(function(e) {
    e.preventDefault();
    var largeUrl = $(this).attr('href');
    var smallUrl = $(this).find('img').attr('src').replace('thumb', 'small');
    
    $('.main-image img').attr('src', smallUrl);
    $('.magnifier-trigger').attr('href', largeUrl)
        .productZoom('refresh');
    
    $('.thumbnails a').removeClass('active');
    $(this).addClass('active');
});

Tối ưu hiệu năng

Để cải thiện hiệu năng:

1. Sử dụng ảnh có kích thước phù hợp
2. Bật chế độ lazy load: preloadImages: false
3. Giảm kích thước kính lúp trên thiết bị di động
4. Nén ảnh trước khi tải lên

if ($(window).width() < 768) {
    config.magnifierSize = 80;
    config.position = 'inside';
}

Xử lý lỗi

Định cấu hình xử lý khi ảnh không tải được:

$('.magnifier-trigger').productZoom({
    errorImage: 'images/no-image.jpg',
    onError: function(e) {
        console.error('Lỗi tải ảnh:', e.error);
    }
});

Plugin này tương thích với các trình duyệt hiện đại và có thể tùy chỉnh linh hoạt để phù hợp với nhiều nhu cầu khác nhau.