Tạo Image Lightbox đơn giản với AutoLightbox

AutoLightbox là một jQuery image lightbox plugin đơn giản, nó sẽ tự động gán cho các hình ảnh được đặt trong một container cụ thể. Nó đi kèm với một thanh tiêu đề được đặt vào phần dưới image lightbox dùng để chú thích cho ảnh, giá trị được lấy từ thuộc tính alt của image và thanh tiêu đề này sẽ ẩn đi khi bạn trỏ chuột vào ảnh.

Cách sử dụng:

1. Tải và đặt đoạn mã của AutoLightbox phía sau của jQuery:

   <script src="https://code.jquery.com/jquery-3.3.1.min.js" 
           integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
           crossorigin="anonymous">
   </script>
   <script src="js/AutoLightbox.js"></script>

2. Gọi hàm của AutoLightbox trên container chứa hình ảnh:

   <article>
     <h2>...</h2>
     <img src="1.jpg" alt="Image Caption 1">
     <p>...</p>
     <img src="2.jpg" alt="Image Caption 2">
     <p>...</p>
     <img src="3.jpg" alt="Image Caption 3">
     <p>...</p>
   </article>

3. Tùy chọn có hiển thị background overlay hay không:

   $(document).ready(function(){
   
     $("article").AutoLightbox({
       dimBackground: true
     }); 
   
   });

4. Thiết lập kích thước image khi hiển thị trong lightbox:

   $(document).ready(function(){
   
     $("article").AutoLightbox({
       width: 320,
       height: 240
     }); 
   
   });

Các bạn có thể xem demo và download ở đây

Nguồn: https://github.com/CodeHimBlog/AutoLightbox