- 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:
Cài đặt thư viện multizoom.js như sau:
Áp dụng hiệu ứng zoom như sau:
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>
JavaScript:
$(function() {
$('#multizoom').addimagezoom({
zoomrange: [3, 10],
magnifiersize: [300,300],
magnifierpos: 'right',
cursorshade: true,
largeimage: 'path/to/image-large.jpg'
});
});
HTML:
<img src="path/to/image-small.jpg" id="multizoom">