Share Tạo chương trình xem ảnh chuyên nghiệp với thư viện Viewer.js

filiallion · 06/12/2019

Đối với các website chuyên cung cấp hình ảnh thì việc tạo ra một cách thức xem ảnh làm hài lòng người dùng là một vấn đề khó. Tuy nhiên với thư viện Viewer.js các bạn hoàn toàn có thể tạo ra một chương trình xem ảnh chuyên nghiệp, trực quan với người dùng. Không chỉ đơn giản chỉ là một chương trình hiển thị hình ảnh cho mọi người xem trên website mà thư viện Viewer.js còn cung cấp nhiều tính năng như xem toàn màn hình, phóng to, thu nhỏ, xoay, lật hình ảnh, sử dụng phím tắt để tương tác với hình ảnh... Thư viện được thiết kế với các hiệu ứng hoạt hình nhẹ nhàng giúp cho trải nghiệm người dùng thêm hấp dẫn.

Các bạn truy cập địa chỉ https://github.com/fengyuanchen/viewerjs để tải về và tích hợp vào website với nội dung mã lệnh HTML như sau:

HTML:

<link href="path/to/viewer.min.css" rel="stylesheet">
<script src="path/to/viewer.min.js"></script>

Các bạn tạo tiếp một trang trình bày các hình ảnh như sau:

HTML:

<div>
    <ul id="viewer">
        <li>
            <img src="path/to/image-1.jpg" alt="Image 1">
        </li>
        <li>
            <img src="path/to/image-2.jpg" alt="Image 2">
        </li>
        <li>
            <img src="path/to/image-3.jpg" alt="Image 3">
        </li>
    </ul>
</div>

Bây giờ, các bạn cài đặt chương trình xem ảnh với dòng mã lệnh JavaScript như sau:

JavaScript:

var viewer = new Viewer(document.getElementById('viewer'));

Các bạn có thể xem demo và tài liệu hướng dẫn về thư viện Viewer.js tại địa chỉ https://fengyuanchen.github.io/viewerjs.

Share Tạo chương trình xem ảnh chuyên nghiệp với thư viện Viewer.js

filiallion

Administrator