Author: | ojsm45 |
---|---|
Views Total: | 753 views |
Official Page: | Go to website |
Last Update: | May 31, 2018 |
License: | MIT |
Preview:

Description:
A minimal, native JavaScript lightbox gallery to display all your images in a lightbox popup where the users are able to navigate through images with arrows.
Keyboard interactions:
- Left: Back to the previous image.
- Right: Goto the next image.
- ESC: Close the lightbox.
How to use it:
Add thumbnails to the gallery container.
<div class="gallery-container" id="gallery-container"> <div class="gallery-item"> <img class="gallery-img" src="1-thumb.jpg" alt="Descripcion 1"> </div> <div class="gallery-item"> <img class="gallery-img" src="2-thumb.jpg" alt="Descripcion 2"> </div> <div class="gallery-item"> <img class="gallery-img" src="3-thumb.jpg" alt="Descripcion 3"> </div> ... </div>
Load the main JavaScript file ‘lightbox.js’ at the end of the document.
<script src="js/lightbox.js"></script>
The core CSS styles for the gallery & lightbox popup.
.gallery-container { width: 900px; margin-left: auto; margin-right: auto; display: -ms-grid; display: grid; -ms-grid-columns:(1fr)[4]; grid-template-columns: repeat(4, 1fr); grid-gap: .5em } .gallery-img { display: block; max-width: 100%; cursor: pointer } .lightbox-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.8); display: -ms-flexbox; display: flex; z-index: 1 } .lightbox-container { position: relative; margin: auto; background: #fff; padding: 1em; border-radius: .2em } .close-modal { background: tomato; color: #fff; position: absolute; width: 1.8em; height: 1.8em; text-align: center; line-height: 1.8em; top: -.9em; right: -.9em; border-radius: 50%; cursor: pointer } .lightbox-description { text-align: center; font-size: 1.1em } .lightbox-navigation { display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; font-size: .9em; opacity: .8 } .lightbox-navigation__button { text-decoration: none; color: tomato }