Basic Image Lightbox With Caption Bar - AutoLightbox

File Size: 716 KB
Views Total: 5450
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Basic Image Lightbox With Caption Bar - AutoLightbox

AutoLightbox is a simple and blazing fast jQuery image lightbox plugin that will be automatically attached to all images found within a specific container.

Also provides an animated caption bar at the bottom of the image lightbox that exacts caption text from the alt attribute and auto hides on mouse hover.

How to use it:

1. Download and load the jQuery AutoLightbox's script after loading jQuery library.

<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. Call the function on the target container and the plugin will do the rest.

<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>
$(document).ready(function(){

  $("article").AutoLightbox(); 

});

3. Determine whether or not to show the background overlay when the image lightbox is opened. Default: true (show).

$(document).ready(function(){

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

});

4. Set the width/height of the image when displayed in the lightbox.

$(document).ready(function(){

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

});

Changelog:

2019-03-17

  • Fixed demo page.

2019-01-19

  • Update AutoLightbox.js

About Author:

Author: Asif Mughal

Website: https://www.codehim.com


This awesome jQuery plugin is developed by CodeHimBlog. For more Advanced Usages, please check the demo page or visit the official website.