Nếu bạn đang tìm một thư viện jQuery hỗ trợ việc phóng to không chỉ ảnh, mà còn là Youtube hay những thứ khác, VenoBox từ bài viết này sẽ giúp bạn.

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>class="venobox"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!