Sử dụng
Đầu tiên bạn cần thêm thư viện CSS vào trước </head>.
<link rel="stylesheet" href="venobox/venobox.min.css" media="screen">
Tiếp đến là jQuery và thư viện của VenoBox trước </body>.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="venobox/venobox.min.js"></script>
Để phóng to ảnh, bạn cần đặt thẻ <img> vào trong cặp thẻ <a></a> có class="venobox" và href trỏ tới đường dẫn của hình gốc.
<a class="venobox" href="image-01-big.jpg" data-gall="myGallery" data-title="Tiêu đề ảnh 1"><img src="image-01-small.jpg" alt="Hình ảnh 1"></a> <a class="venobox" href="image-02-big.jpg" data-gall="myGallery" data-title="Tiêu đề ảnh 2"><img src="image-02-small.jpg" alt="Hình ảnh 2"></a>
Sau đó, bạn chỉ cần cấu hình VenoBox.
<script type="text/javascript">
$('.venobox').venobox({
border : '10px',
titleattr : 'data-title',
spinner : 'cube-grid',
numeratio : true,
infinigall : true
});
</script>Để tự cấu hình, bạn có thể tham khảo tài liệu hướng dẫn của VenoBox ở liên kết tải về ở trên. Chúc các bạn thành công!