Giới thiệu thư viện zooming.js dành cho thư viện ảnh

Điểm bài viết
[Tổng cộng: 0 Trung bình: 0]

Share vì hữu ích

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.jszoomerang, 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 javascript lib

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:

Đơ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é.

Share vì hữu ích

Previous Article
avatar
  Subscribe  
Notify of