Auto Lghtbox for all Images jQuery Plugin - AutoLightbox.js

- September 14, 2018
Free jQuery Lghtbox Plugin- Auto lightbox

Main Features

  • Responsive, adjustable size on both Desktop and Mobile devices.
  • Automatically do everything to create Lightbox, no need any id or class for individually image on the Web page.
  • Automatic detect image caption (from alt text) and shows it on the image.
  • Dim background effect when Lightbox display.
  • Lightweight, Easy to implement.

How to Use it:

1. Load the both jQuery and AutoLightbox.js in your website:

<!--jQuery-->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

   <!--Auto Lightbox js-->
   <script src="js/AutoLightbox.js"></script>

2. Put your images in article tag or you can create your own div container with specific class.

  <article>
    ......some text.....
   <img src="/img/image-name.jpg" alt="your photo caption" />
    ......some text.....
   <img src="/img/image-name.jpg" />
    ......some text.....
   <img src="/img/image-name.jpg" />
  </article> 

3. Call the AutoLightbox Plugin in your jQuery code with the selector whose images to be shown in the lightbox.

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

4. To change the size of lightbox, update the following settings

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

4. By default, dim background effect is on, if you want to turn it off, the statement is:

   $("article").AutoLightbox({
       dimBackground: false

   }); 
 

Start typing and press Enter to search