baguetteBox.js---Simple and easy to use lightbox script

BaguetteBox.js is a simple and easy to use lightbox script. 

GitHub here

Step1:
link baguetteBox.css and js file

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.8.2/baguetteBox.min.css">
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.8.2/baguetteBox.min.js"></script>

Step2:

html

Thubnail image should be inside the link which is the original one.

data-caption is the words showing below the picture.

<div class="gallery">
    <a href="img/2-1.jpg" data-caption="Image caption">
        <img src="img/thumbs/2-1.jpg" alt="First image">
    </a>
    <a href="img/2-2.jpg">
        <img src="img/thumbs/2-2.jpg" alt="Second image">
    </a>
    ...
</div>

The basic  styling:

css

Step3:

js

Apply the function with baguetteBox.run().

baguetteBox.run('.gallery', {
    // Custom options
});

The following options are available:

Option	Type	Default	Description
captions	Boolean | function(element)	true	Display image captions. Passing a function will use a string returned by this callback. The only argument is a element containing the image. Invoked in the context of the current gallery array
buttons	Boolean | 'auto'	'auto'	Display buttons. 'auto' hides buttons on touch-enabled devices or when only one image is available
fullScreen	Boolean	false	Enable full screen mode
noScrollbars	Boolean	false	Hide scrollbars when gallery is displayed
titleTag	Boolean	false	Use caption value also in the gallery img.title attribute
async	Boolean	false	Load files asynchronously
preload	Number	2	How many files should be preloaded
animation	'slideIn' | 'fadeIn' | false	'slideIn'	Animation type
afterShow	function	null	Callback to be run after showing the overlay
afterHide	function	null	Callback to be run after hiding the overlay
onChange	function(currentIndex, imagesCount)	null	Callback to be run when image changes
overlayBackgroundColor	String	'rgba (0,0,0,0.8)'	Background color for the lightbox overlay
filter	RegExp	`/.+.(gif	jpe?g

More document detail find on GitHub