How to use Lightbox in Jekyll

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

This is sample.

Title{: width="400px"}

Share this:

Leave a Reply

Your email address will not be published. Required fields are marked *

Let's connect and create
something awesome together!
2023 - Copyright, All Rights Reserved, Made by ZEMNA.NET with ❤️
crossmenu linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram