Simple lightbox

SimpleLightbox is lightweight and responsive lightbox library with no dependencies. Display images, galleries, videos or custom content and control your lightbox with easy to use api. It weighs less than 3KB.

SimpleLightbox tries to delegate most of heavy work to browser native mechanisms. Almost everything regarding layout (positioning and resizing) and animations is CSS. Letting browser do it's own thing when possible is oftentimes a good idea.

From version 2.0 library has no external dependencies (was dependenant on jQuery in version 1). Adapter for jQuery plugin usage still comes included. Evergreen browsers and IE9+ are supported.


Gallery image 1 Gallery image 2 Gallery image 3

Thumbs gallery

Lets start with one of most common use cases - a gallery of thumbs where each thumb should be enlarged when clicked. Once light-box is up you should be able to traverse images in collection either via arrows on screen or keyboard controls (gamers might appreciate that "a" and "d" will work as arrow keys do).


    // using plain js
    new SimpleLightbox({elements: '.imageGallery1 a'});

    // or if using jQuery
    $('.imageGallery1 a').simpleLightbox();

Gallery from array of images

Often it is required to show image or gallery of images directly from code. Clicking here will display images like so.{
        items: ['demo/images/1big.jpg', 'demo/images/2big.jpg', 'demo/images/3big.jpg']

Custom content

There are times when you need to show some other type of content in lightbox beside images. SimpleLightbox can be used to display forms, teasers or any custom html content. Clicking here will display the text above in lightbox form.{
        content: '<div class="contentInPopup"><h3 class="attireTitleType3">Custom content</h3>...',
        elementClass: 'slbContentEl'

Displaying video

Sometimes you need to show a video in light-box (Video can be placed somewhere in gallery as well).



Curious case of library lazy loading

Lets say that you have a performance budget and you have a thumb gallery on your web app. You want light-box library resources to be lazy loaded (JS and CSS) after user clicked on thumb. If we assume that you have an implementation of resource loader your application code might end up looking like this:

    var $items = $('.gallery a');

    $items.on('click', function(e) {
        resourceLoader.makeSureIsLoaded('$.SimpleLightbox', function() {
                $items: $items,
                startAt: $items.index($(,
                bindToItems: false

Api and options

SimpleLightbox can be instantiated via standard constructor interface. If using jQuery lightbox can be instantiated via plugin facade. If there is a need to obtain lightbox object instance you can do so via jQuery data utility.

            // intance via constructor and selector
            var lightbox = new SimpleLightbox({elements: '.gallery a'});

            // intance via constructor and elements
            var lightbox = new SimpleLightbox({
                elements: document.querySelectorAll('.gallery a')

            // Using jQuery plugin interface
            $('.gallery a').simpleLightbox();

            // Run via plugin facade and get instance
            var lightbox = $('.gallery a').simpleLightbox(options).data('simpleLightbox');

            // run directly
            var lightbox = new SimpleLightbox({
                $items: $('.gallery a')

            // when images are in code
            var lightbox ={
                items: ['img1-large.jpg', 'img2-large.jpg', 'img3-large.jpg']

Once you have a reference to SimpleLightbox instance following methods are available:

            // Go to next image

            // Go to previous image

            // Close lightbox

            // Destroy lightbox (does close and removes all $items click handlers)

            // Open lightbox

            // Open lightbox at certain position

            // Set custom content
My content

Plugin options / defaults are exposed in SimpleLightbox.defaults namespace so you can easily adjust them globally. Full list of options is bellow.

            SimpleLightbox.defaults = {

                // add custom classes to lightbox elements
                elementClass: '',
                elementLoadingClass: 'slbLoading',
                htmlClass: 'slbActive',
                closeBtnClass: '',
                nextBtnClass: '',
                prevBtnClass: '',
                loadingTextClass: '',

                // customize / localize controls captions
                closeBtnCaption: 'Close',
                nextBtnCaption: 'Next',
                prevBtnCaption: 'Previous',
                loadingCaption: 'Loading...',

                bindToItems: true, // set click event handler to trigger lightbox on provided $items
                closeOnOverlayClick: true,
                closeOnEscapeKey: true,
                nextOnImageClick: true,
                showCaptions: true,

                captionAttribute: 'title', // choose data source for library to glean image caption from
                urlAttribute: 'href', // where to expect large image

                startAt: 0, // start gallery at custom index
                loadingTimeout: 100, // time after loading element will appear

                appendTarget: 'body', // append elsewhere if needed

                beforeSetContent: null, // convenient hooks for extending library behavoiur
                beforeClose: null,
                beforeDestroy: null,

                videoRegex: new RegExp(/| // regex which tests load url for iframe content



SimpleLightbox is packaged as UMD library so you can use it in CommonJS and AMD environment or with browser globals.

            // install via npm
            npm install simple-lightbox --save

            // if you use bundler
            var SimpleLightbox = require('simple-lightbox');

            // or just using browser globals
            var SimpleLightbox = window.SimpleLightbox;

            // if using bundler with jQuery
            var $ = require('jquery');
            var SimpleLightbox = require('simple-lightbox');


For browser usage browse dist folder - if working with build tools go with src folder. Download library files from github repo, get them via npm (npm install simple-lightbox)

Fork me on GitHub