Share Tạo hiệu ứng zoom hình ảnh với thư viện multizoom.js

filiallion

Administrator
Staff member
Administrator
Messages
585
Points
10
Language
Tiếng Việt
Trước đây tôi đã giới thiệu với các bạn thư viện ImageLens dùng để zoom hình ảnh rất chuyên nghiệp tại bài viết "Sử dụng thư viện ImageLens để tạo hiệu ứng zoom hình ảnh". Thư viện ImageLens là một trong những thư viện zoom theo kiểu "kính lúp" rất được ưa thích đối với các bạn thiết kế giao diện web. Bài viết này tôi sẽ giới thiệu với các bạn một thư viện có chức năng tương tự ImageLens đó là multizoom.js. Với cách thức hoạt động tương tự như ImageLens và việc cài đặt, sử dụng cũng rất đơn giản.

Các bạn có thể tải thư viện multizoom.js tại địa chỉ https://www.jqueryscript.net/download/jQuery-Featured-Image-Zoomer-Plugin-multizoom-js.zip và tích hợp vào website với mã lệnh như sau:
HTML:
<script src="path/to/jquery.min.js"></script>
<script src="path/to/multizoom.js"></script>
Cài đặt thư viện multizoom.js như sau:
JavaScript:
$(function() {
    $('#multizoom').addimagezoom({
        zoomrange: [3, 10],
        magnifiersize: [300,300],
        magnifierpos: 'right',
        cursorshade: true,
        largeimage: 'path/to/image-large.jpg'
    });
});
Áp dụng hiệu ứng zoom như sau:
HTML:
<img src="path/to/image-small.jpg" id="multizoom">
 
Back
Top