about uscontact

How to use Lightbox in Jekyll

Category:
Author: zemna
Date: April 17, 2021
Share this:

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.

Title{: width="400px"}

Share this:

Leave a Reply

Your email address will not be published.

ZEMNA.NET

Professional software development agency estalished in Indonesia. We offers website setup, web application development, fulfillment service, and etc.
Follow us
Follow us to get latest news and tutorials.
2022 - Copyright, All Rights Reserved, Made by ZEMNA.NET with ❤️
magnifiercrossmenu