This time I will share jQuery Plugin and tutorial about Basic Image Lightbox With Caption Bar – AutoLightbox, hope it will help you in programming stack.
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.
2 |
integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" |
3 |
crossorigin="anonymous"> |
5 |
<script src="js/AutoLightbox.js"></script> |
2. Call the function on the target container and the plugin will do the rest.
3 |
<img src="1.jpg" alt="Image Caption 1"> |
5 |
<img src="2.jpg" alt="Image Caption 2"> |
7 |
<img src="3.jpg" alt="Image Caption 3"> |
1 |
$(document).ready(function(){ |
3 |
$("article").AutoLightbox(); |
3. Determine whether or not to show the background overlay when the image lightbox is opened. Default: true (show).
1 |
$(document).ready(function(){ |
3 |
$("article").AutoLightbox({ |
4. Set the width/height of the image when displayed in the lightbox.
1 |
$(document).ready(function(){ |
3 |
$("article").AutoLightbox({ |
Changelog:
2019-03-17
2019-01-19
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.
