Phóng to ảnh dễ dàng với VenoBox

Xem demo và tải về

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!