Zoom hình ảnh bằng jQuery Zoom

jQuery Zoom là một trong những công cụ miễn phí giúp bạn zoom hình ảnh một cách dễ dàng và nhanh chóng, code tích hợp không có gì nhiều. Bạn có thể áp dụng jQuery Zoom vào các trang đăng sản phẩm cho người dùng zoom hình ảnh của sản phẩm.

jQuery Zoom có hỗ trợ nhiều sự kiện cho bạn lựa chọn, bạn có thể zoom ảnh khi người dùng đưa chuột ngang qua hình ảnh bằng sự kiện hover, hoặc zoom hình ảnh khi người dùng kéo (drag) lê chuột trên hình ảnh.

Demo jQuery Zoom

Để sử dụng jQuery Zoom, trước hết bạn phải tải bộ code mới nhất về. Bên trong thư mục bạn tải về cũng có các ví dụ cho bạn tham khảo. Bạn chỉ cần tạo một tập tin javascript và làm theo hướng dẫn.

// Example:
$(document).ready(function(){
    $('a.photo').zoom({url: 'photo-big.jpg'});
});

// Using Colorbox with Zoom
$(document).ready(function(){
    $('a.photo').zoom({
        url: 'photo-big.jpg',
        callback: function(){
            $(this).colorbox({href: this.src});
        }
    });
});

Để sử dụng được chức năng zoom hình ảnh cho thẻ img thì bạn phải bọc thẻ img vào trong một thẻ khác thì jQuery Zoom mới hoạt động được.

$(document).ready(function(){
    $('img')
        .wrap('<span style="display:inline-block"></span>')
        .css('display', 'block')
        .parent()
        .zoom();
});

Bạn cũng có thể xóa và khởi tạo lại hàm mới cho jQuery Zoom.

$('#example').zoom(); // add zoom
$('#example').trigger('zoom.destroy'); // remove zoom

Lại Đình Cường