How to use Lightbox in Jekyll

Install with bower

$ bower install ekko-lightbox --save

Basic usage likes bellow,

    ![Image Title](/assets/img/github-logo.png){: width="400px" }

If you want to give lightbox feature to all images in page, we can it by bellow javascript.

first, give anchor to image in jekyll

[![Title](/assets/img/github-logo.png){: width="400px"}](/assets/img/github-logo.png)

and, make javascript like bellow,

$(function() {
    $('img').each(function() {
        var that = $(this);
        that.closest('a').attr('data-toggle', 'lightbox').attr('data-title', that.attr('alt'));
    });

    $(document).delegate('*[data-toggle="lightbox"]', 'click', function(e) {
        e.preventDefault();
        $(this).ekkoLightbox();
    });    
})

This is sample.

{: width=”400px”}