Gallery Lightbox Javascript For Photos and Videos | MK Lightbox

MK Lightbox is a simple and responsive Lightbox photo and video unlock script – simple in code and easy to use. Reloading high-resolution images and displaying metadata text in the Simplified view are supported.

This simple Lightbox Javascript for images and videos in a pop-up window or a simplified gallery box to navigate without having to write any JS code.

How to make use of it:

1. To use the lightbox library, merely add the next 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 a picture inside the doc.

<img class="mklbItem" src="/path/to/image/" />

3. Fetch and show one other picture (e.g. hi-res image) within the lightbox.

<img class="mklbItem" src="/path/to/thumbnail/" data-src="/path/to/orginal/" />

4. Fetch and show a Video participant within the lightbox.

<img class="mklbItem" src="/path/to/thumbnail/" data-video-src="/path/to/video/" />

5. Youtube video is supported as nicely.

<a href="#" class="mklbItem" data-youtube-id="VIDEO ID">Open the Youtube video in the lightbox.</a>

6. Create a gallery lightbox from a group of photos with identical data-gallery values.

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

Tiny Gallery Lightbox For Images & Videos, MK Lightbox Plugin/Github

See Demo And Download

Official Website(marcuskirschen): Click Here

This superior jQuery/javascript plugin is developed by marcuskirschen. For extra Advanced Usages, please go to the official website.

Related Posts


How to Create a Simple Cookie Banner Consent Using Bootstrap 4

Cookie Consent Popup Javascript – Quick and simple tutorial for creating a simple Bootstrap cookie banner. If you have a website or blog with people visiting or…


Create Custom HTML Terminals With Pure JavaScript | shell.js

Custom HTML Terminals is A JavaScript library to create HTML terminals on web pages. The shell js JavaScript library offers a straightforward method to create Ubuntu, OS X,…


Bootstrap Alert, Confirm, and Flexible Dialog Boxes | Bootbox

Bootbox.js is a small JavaScript library that allows you to create programming dialogs using Bootstrap templates, without having to worry about creating, managing, or removing any required…


An Accessible Touch-enabled Slider Web Component | fg-carousel

fg-carousel Slider – A simple & modern slider web component to create versatile, accessible, touch-enabled picture carousels utilizing CSS scroll snap, Custom Element, and Intersection Observer API….


A Lightweight and Efficient Tags Input Component in Vanilla JS | tagify

tagify transforms an input field or textarea into a tags component, in an easy and customizable way, with great performance and a small code footprint, full of…


A Lightweight Library to Copy Text to Clipboard | CopyJS

CopyJS is a lightweight JavaScript library that allows you to copy plain text or HTML content to the clipboard. Must Read: Tiny Library for Copy Text In…