Add Image Gallery for the All Images in Markdown Post

Add Image Gallery for the All Images in Markdown Post

Recently, I got a question asking about the functionality to make image pop up so viewer can have a better look at it. I’m not sure what is the common name of the functionality (popup image? image gallery?), but I happens to have thought about the same feature long time ago, but never started implementation. So I thought this would be the good time to start it!
And it took whole friday night because I didn’t know that element.src and element.getAttribute(src) returns different thing

Extension Candidates

Apparently, there are many image gallery Javascript/JQuery extensions.

Since I have NO idea about which is better, I simply went to their github and tried the one that are still actively maintained. Which was PhotoSwipe. But it had a huge problem. It does not support auto calculation of the image size!

After some digging, I found a perfect candidate LightBox plugin for the Jekyll. It’s very simple and easy to play with. I had to make some change so it can be used with Hydejack theme.

I highly appreciate for the Jekyll Codex. Codex done all the hard work and made my day easier.

What it does

The Jekyll converts markdown image syntax ![alt_txt](src_path) to html like <p><img src="src_path" alt="alt_txt"></p>. But what we need is img tag surrounded by anchor tag.

So the modified version of lightbox.js parses all the img tag and wrap it with a tag before doing anything else. If you want particular image not to be touched, put no-lightbox class to it.


Neo with lightbox Neo w/o lightbox

Left: LightBox on / Right: LightBox off
You need bigger image to maximize Neo’s cuteness.


![Neo with lightbox](/assets/img/2022-08-28/neo.jpg)
![Neo w/o lightbox](/assets/img/2022-08-28/neo.jpg){}


If you think code speaks all, here is the link to the commit.

Download Necessary Files

The plugin comes with two files. lightbox.js and lightbox.css. Save those to the /assets/js & /assets/css accordingly.

The given link to the lightbox.js is not identical to the one from the original page. I have made some changes to it and it is necessary for you to download the fixed version to run it in Hydejack blog.


Simply puts below option to anywhere.
(Somewhere around # 3rd Party Integrations would be sufficient)

# file: "_config.yml"
lightbox: true

Add below to the end of the file so the css file can be linked.

<!-- file: "_includes/head/links-static.html" -->
{% if site.lightbox %}
  <link rel="stylesheet" href="/assets/css/lightbox.css">
{% endif %}


Import js script file that we’ve downloaded, and use Hydejack event listener so the code can be executed every time the new page gets loaded.

<!-- file: "_includes/my-scripts.html" -->
{% if site.lightbox %}
  <script src="/assets/js/lightbox.js"></script>
{% endif %}

    .addEventListener("hy-push-state-load", function () {