Simple lightbox

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

In order to stay true to its name simpleLightbox tries to delegate most of heavy work to browser native mechanisms and existing proven libraries. Almost everything regarding layout (positioning and resizing) and animations is CSS. Letting browser do it's own thing when possible seems like a good idea.

Library is internally using a available flavor of jQuery api implementation (jQuery, Zepto or simpleQuery) mostly for purposes of event normalization and simple Dom manipulation.

Examples

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).


    $('.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.


    $.SimpleLightbox.open({
        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.


    $.SimpleLightbox.open({
        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).


    $('.lightBoxVideoLink').simpleLightbox();

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() {
            $.SimpleLightbox.open({
                $items: $items,
                startAt: $items.index($(e.target)),
                bindToItems: false
            });
        });
    });

Api and options

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



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

            // Run, fire and forget
            $thumbs.simpleLightbox();

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

            // run directly
            var lightbox = new $.SimpleLightbox({
                $items: $thumbs
            });

            // when images are in code
            var lightbox = $.simpleLightbox.open({
                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
            lightbox.next();

            // Go to previous image
            lightbox.prev();

            // Close lightbox
            lightbox.close();

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

            // Open lightbox
            lightbox.show();

            // Open lightbox at certain position
            lightbox.showPosition(1);

            // Set custom content
            lightbox.setContent('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(/youtube.com|vimeo.com/) // regex which tests load url for iframe content

            };

Installation

Browse dist folder for library JS and CSS files. SimpleLightbox JS file (normal or minified one) should be included after jQuery if you go with plain script tags.

Download library files from github repo, get them via bower (bower install simple-lightbox) or via npm (npm install simple-lightbox)