Lightbox.js is a simple, lightweight (about 2kB minified and gzipped) and easily customizable lightbox plugin built with Javascript and CSS which suports images, videos (Vimeo/Youtube) and inline content.
Everything you'll need is located under the lightbox/ directory. Include the javascript and css files in your HTML document and you're all set up:
<link href="lightbox/lightbox.min.css" rel="stylesheet">
<script src="lightbox/lightbox.min.js"></script>Add the data-lightbox attribute to an <a> tag and set its href to the content you want to be opened in the lightbox. When opening an image, you can send its alt text using the data-image-alt attribute:
<a href="assets/dist/img/image-1.png" data-lightbox data-image-alt="Image 1">
Image
</a>
<a href="#modal" data-lightbox>
Modal
</a>
<a href="https://vimeo.com/83897470" data-lightbox>
Vimeo
</a>
<a href="youtube.com/watch?v=Xyu_MdKBXic" data-lightbox>
Youtube
</a>
<div id="modal" class="lightbox-hide">
<div class="modal-content">
<h3>Welcome!</h3>
<p>Sign in to your account.</p>
<form>
<input type="email" name="email" placeholder="e-mail account">
<input type="password" name="password" placeholder="password">
<input class="btn" type="submit" name="submit" value="Sign In">
</form>
</div>
</div>If you prefer, you can also trigger the lightbox programmatically:
// Trigger the lightbox once the page loads
new lightbox('assets/dist/img/image-1.png');
// Trigger the lightbox from any given element
const btn = document.querySelector('.trigger-lightbox');
btn.addEventListener('click', () => new lightbox('#modal'));Set the data-lightbox attribute to "gallery" on all <a> tags under the same parent element and any previous or next items will be found automatically:
<div class="gallery">
<div class="gallery-item">
<a href="assets/dist/img/image-1.png" data-lightbox="gallery" data-image-alt="Image 1">
<img src="assets/dist/img/thumbnail-gallery.png" alt="Thumbnail 1">
</a>
</div>
<div class="gallery-item">
<a href="assets/dist/img/image-2.png" data-lightbox="gallery" data-image-alt="Image 2">
<img src="assets/dist/img/thumbnail-gallery.png" alt="Thumbnail 2">
</a>
</div>
</div>Chrome 29+, IE 10+, Firefox 22+, Safari 6.1+, Opera 12+