Author: | marcuskirschen |
---|---|
Views Total: | 2,948 views |
Official Page: | Go to website |
Last Update: | March 8, 2022 |
License: | MIT |
Preview:

Description:
A dead-simple JavaScript library to display your images and videos in a lightbox popup or a navigatable gallery lightbox without having to write any JS code.
How to use it:
1. To use the lightbox library, simply add the following JavaScript and CSS files to the webpage.
<link rel="stylesheet" href="mklb/css/mklb.css" /> <script src="mklb/js/mklb.js"></script>
2. Attach the lightbox to an image within the document.
<img class="mklbItem" src="/path/to/image/" />
3. Fetch and display another image (e.g. hi-res image) in the lightbox.
<img class="mklbItem" src="/path/to/thumbnail/" data-src="/path/to/orginal/" />
4. Fetch and display a Video player in the lightbox.
<img class="mklbItem" src="/path/to/thumbnail/" data-video-src="/path/to/video/" />
5. Youtube and Vimeo video is supported as well.
<a href="#" class="mklbItem" data-youtube-id="VIDEO ID">Open the Youtube video in the lightbox.</a> <a href="#" class="mklbItem" data-vimeo-id="VIDEO ID">Open the Vimeo video in the lightbox.</a>
6. Create a gallery lightbox from a group of images with the same data-gallery
value.
<img class="mklbItem" src="/path/to/image1/" data-gallery="myGal" /> <img class="mklbItem" src="/path/to/image2/" data-gallery="myGal" /> <img class="mklbItem" src="/path/to/image3/" data-gallery="myGal" />
Changelog:
03/08/2022
- Vimeo support added
06/15/2021
- Automatically slides added
- Bugfixed
02/28/2021
- Added Youtube support