1.0.4 • Published 6 years ago
vanillelightbox v1.0.4
VanilleLightbox
Getting started
Step 1: Download
Step 2: Process files
Rename lightbox.scss -> lightbox.css (current file doesn't contain sass logic)
Step 3: Include files
<!-- Include vanillelightbox.js -->
<script src="/path/to/vanillelightbox.js"></script>
<!-- Include the styles -->
<link rel="stylesheet" href="/path/to/vanillelightbox.css" />
<!-- Create a container (optional) element and anchor elements as sources. -->
<div id="gallery">
<a href="path/to/image-large-01.jpg"><img src="path/to/image-small-01.jpg" /></a>
<a href="path/to/image-large-02.jpg"><img src="path/to/image-small-02.jpg" /></a>
<a href="path/to/image-large-03.jpg"><img src="path/to/image-small-03.jpg" /></a>
</div>
Step 4: Create a new VanilleLightbox
object, passing anchor elements
window.addEventListener('DOMContentLoaded', function(){
var vanilleLightbox = new VanilleLightbox(document.querySelectorAll('#gallery a'));
});
Methods
openViewer()
Opens the lightbox viewer starting with the first element.
window.addEventListener('DOMContentLoaded', function(){
var vanilleLightbox = new VanilleLightbox(document.querySelectorAll('#gallery a'));
vanilleLightbox.openViewer();
});