basicLightbox

The lightest Lightbox ever made

A lightbox that works in all modern browsers with images, videos, iframes and any kind of HTML, has support for CommonJS and AMD, a simple API and zero dependencies.

1
2
3
4
5
6
7
8
9
10
11
12

import * as basicLightbox from 'basiclightbox'

const instance = basicLightbox.create(`
    <div class="modal">
        <p>
            Your first lightbox with just a few lines of code.
            Yes, it's really that simple.
        </p>
    </div>
`)

instance.show()
Run

Vanilla JS

basicLightbox is written in modern, modular JavaScript. State-of-the-art APIs are used to provide the best experience possible. The result is a lightbox that works in all modern browsers without any dependencies.

Simple API

Each lightbox has its own, dedicated instance that allows you to take complete control: Show and hide the box, modify the content and display images, videos, iframes or any kind of HTML with just a few lines of code.

Custom Design

We don't include fancy themes or tons of predefined classes. basicLightbox only ships with the basics. Every website has it's own look and your lightbox should be a part of it.

Images

Add an img tag to your lightbox to display an image. basicLightbox detects the tag and displays the photo in a fully responsive way. Perfect for all screen sizes. Also works with the srcset attribute.

1
2
3
4
5
6
7

import * as basicLightbox from 'basiclightbox'

const instance = basicLightbox.create(`
    <img src="assets/images/image.png" width="800" height="600">
`)

instance.show()
Run

Videos

Use a video tag in your lightbox to display videos. basicLightbox detects the tag and displays the video in a fully responsive way. Excellent when you don't want to rely on YouTube or Vimeo.

1
2
3
4
5
6
7
8
9

import * as basicLightbox from 'basiclightbox'

const instance = basicLightbox.create(`
    <video controls>
        <source src="assets/videos/video.mp4" type="video/mp4">
    </video>
`)

instance.show()
Run

iframe

Use an iframe tag in your lightbox to embed external content. basicLightbox detects the tag and displays the iframe in a fully responsive way. Excellent for YouTube or Vimeo videos.

1
2
3
4
5
6
7

import * as basicLightbox from 'basiclightbox'

const instance = basicLightbox.create(`
    <iframe src="https://www.youtube.com/embed/E1oZhEIrer4" width="560" height="315" frameborder="0"></iframe>
`)

instance.show()
Run

HTML

Add any kind of HTML to your lightbox to display it. This could be a modal containing text, inputs, buttons or all of them. The possibilities are endless.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

import * as basicLightbox from 'basiclightbox'

const instance = basicLightbox.create(`
    <div class="modal">
        <p>A custom modal that has been styled independently. It's not part of basicLightbox, but perfectly shows its flexibility.</p>
        <input placeholder="Type something">
        <a>Close</a>
    </div>
`, {
    onShow: (instance) => {
        instance.element().querySelector('a').onclick = instance.close
    }
})

instance.show()
Run

Templates

Use DOM elements/nodes or templates to create your lightbox. Existing event listeners will stay attached, allowing you to build complex overlays in just a few lines of code.

1
2
3
4
5

<template>
    <div class="modal">
        <p>I'm a modal created from a DOM element/node.</p>
    </div>
</template>

1
2
3
4
5
6
7

import * as basicLightbox from 'basiclightbox'

const instance = basicLightbox.create(
	document.querySelector('template')
)

instance.show()
Run

Get started

Convinced? Want to learn more? Grab the source and documentation from GitHub or play with our demo on CodePen.