- Messages
- 585
- Points
- 10
- Language
- Tiếng Việt
Hiện nay có nhiều thư viện thực hiện chức năng zoom hình ảnh nhưng với tôi thì thư viện elevateZoom là thư viện thực hiện việc zoom hình ảnh chuyên nghiệp nhất với nhiều tuỳ chọn, hiệu ứng đáp ứng được hoàn toàn các yêu cầu của các bạn. Ngoài ra, việc sử dụng thư viện elevateZoom cũng rất đơn giản, không yêu cầu cấu hình phức tạp như một số thư viện zoom hình ảnh khác.
Sau khi tích hợp thư viện jQuery vào website, các bạn tải thư viện elevateZoom tại địa chỉ http://www.elevateweb.co.uk/download-file và tích hợp vào website với dòng lệnh như sau:
Ví dụ để zoom hình ảnh sau:
Các bạn sẽ cài đặt thư viện với nội dung mã lệnh như sau:
Các bạn có thể xem các ví dụ tại địa chỉ http://www.elevateweb.co.uk/image-zoom/examples và tìm hiểu thêm về thư viện elevateZoom tại địa chỉ http://www.elevateweb.co.uk/image-zoom.
Sau khi tích hợp thư viện jQuery vào website, các bạn tải thư viện elevateZoom tại địa chỉ http://www.elevateweb.co.uk/download-file và tích hợp vào website với dòng lệnh như sau:
HTML:
<script src="path/to/jquery.elevatezoom.js"></script>
HTML:
<img id="elevate-zoom" src="path/to/image-small.jpg" data-zoom-image="path/to/image-large.jpg">
JavaScript:
$(function() {
$('#elevate-zoom').elevateZoom();
});