Sử dụng Viewer JS cho Rails App

Chào các bạn, nếu các bạn đang thiết kế một trang web , và trên trang web của các bạn có chứa những tấm ảnh, hoặc cho người dùng upload ảnh của họ lên website của mình thì việc cho người dùng lựa chọn để xem ảnh ở chế độ riêng là một điều rất cần thiết. Nó vừa tạo cho người dùng cảm giác dễ chịu và vừa làm cho tấm ảnh trông được rõ ràng hơn.

Mình sẽ hướng dẫn các bạn sử dụng thư viện JS Viewer để nhúng vào website của các bạn.

1. Cài đặt

            npm install viewerjs

            Include files:
                <link  href="/path/to/viewer.css" rel="stylesheet">
                <script src="/path/to/viewer.js"></script>
            Nếu là ứng dụng Rails, các bạn hãy require chúng vào application.js và application.css

2. Sử dụng

<div>
  <img id="image" src="picture.jpg" alt="Picture">
</div>

<div>
  <ul id="images">
    <li><img src="picture.jpg" alt="Picture"></li>
    <li><img src="picture-2.jpg" alt="Picture 2"></li>
    <li><img src="picture-3.jpg" alt="Picture 3"></li>
  </ul>
</div>

// View one image
var viewer = new Viewer(document.getElementById('image'), options);

// View some images
var viewer = new Viewer(document.getElementById('images'), options);

Hoặc chỉ đơn giản là

$('.image').viewer();

Các bạn có thể thêm các option vào để phù hợp với nhu cầu sử dụng của bản thân:

$('.image').viewer({
    navbar :false
    some option here
});

Vậy là xong rồi, chúc các bạn có trình view ảnh đẹp =)).

Các bạn có thể xem thêm các option tại Github của thư viện này nhé : https://github.com/fengyuanchen/viewerjs