Tiny Gallery Lightbox For Images & Videos – MK Lightbox

Category: Javascript , Modal & Popup | December 3, 2020
Author: marcuskirschen
Views Total: 1,214 views
Official Page: Go to website
Last Update: December 3, 2020
License: MIT

Preview:

Tiny Gallery Lightbox For Images & Videos – MK Lightbox

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. 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" />

You Might Be Interested In:


Leave a Reply