Với chức năng phóng to ảnh mượt mà, zooming có thể là một package mà bạn nên có trong project e-commerce của mình. Code Tốt xin giới thiệu về cách sử dụng thư viện Javascript này nhé.
Zooming JS là gì?
Được lấy từ ý tưởng từ zoom.js và zoomerang, zooming là package gọn nhẹ, viết thuần bằng Javascript và có thể tích hợp dễ dàng vào project mà bạn đang lập trình.
zooming có thể giúp bạn phóng to ảnh, nhưng cũng cho phép bạn kéo rê ảnh để xem chi tiết hơn từng phần trong ảnh, đặc biệt là phù hợp với bản đồ hay ảnh chất lượng cao như panorama cần phóng to lên.
Bạn có thể xem demo trên codepen.
Sử dụng zooming như thế nào?
Bạn có thể sử dụng với npm hoặc sử dụng nó như thư viện ngoài include vào trực tiếp.
Cài đặt zooming với npm
Bạn gõ
npm install zooming --save
Hoặc nếu sử dụng yarn:
yarn add zooming
Sau đó bạn có thể gọi như sau:
import Zooming from'zooming'
const zooming = new Zooming({ // options... })
zooming.listen('.img-zoomable')
Lưu ý: nên gọi sau khi window load để tránh tình trạng người dùng nhấp chuột vào quá sớm.
Các tuỳ chọn và cấu hình quan trọng của zooming
Options: Bạn có thể tuỳ chỉnh cấu hình thư viện Javascript zooming rất đơn giản, theo hướng dẫn các option tại đây.
Events: Bạn cũng có thể quan tâm các event nào có thể sử dụng cùng zooming để tuỳ chỉnh phù hợp nhu cầu mình hơn, chẳng hạn như onClose, onImageLoading để tạo ra các hiệu ứng mượt hơn về UX cho người dùng.
API: Tham khảo các API do thư viện Javascript này cung cấp.
Cài đặt Zooming bằng cách thêm dist source vào trong markup
Bạn tham khảo đoạn code sau:
https://gist.github.com/khoipro/d92e7eb893e06f21d95763867e0de5a9
Đơn giản là ta gọi <script src=""> và gọi new Zooming() trong file Javascript của project là được nhé.
Kết luận
Dù là một thư viện nhỏ, không nhiều tính năng, nhưng nó được viết thuần Javascript và có thể dễ dàng thêm vào project của bạn, nên cũng rất đáng để dùng thử. zooming phù hợp với các website làm tính năng thư viện ảnh, đặc biệt là các sản phẩm e-commerce khi bạn muốn khách hàng xem chất liệu vải (từ ảnh chụp chất lượng cao).
Hi vọng package này hữu ích với bạn. Đừng quên vote cho bài viết của Code Tốt nếu bạn thấy hữu ích. Nếu bạn muốn xem chi tiết, truy cập tài liệu hướng dẫn của zooming nhé.
Giám đốc tại Công ty CP CODE TỐT. Quản lý ngôn ngữ bản địa tiếng Việt tại WordPress. Là tác giả chính tại codetot.net, Khôi muốn ghi lại một sốvấn đề kỹ thuật trong quá trình phát triển các dự án website với khách hàng.
