How to install Jekyll Lightbox plugin

Help
1

I would like to install Lightbox plugin to zoom on images when I click on it. I am block to the step 3 : make sure the footer of your layout document looks like this. I am not familiar with Jekyll. Some one could explain me step by step which document I should modify to add the JS and CSS code into each of my posts?
Thanks.

1 Like
2

That depends on your theme. Can you share your repo?

Based on your earlier post, I think you need to add them after line 20 in this file: https://github.com/jeromelachaud/freelancer-theme/blob/master/_layouts/default.html

In other words: before the </body> tag in you layout file.

PS. I am the author of that ‘plugin’.

1 Like
3

Oh great ! My repo is based on a static website I code in static HTML. In the same level I have my blog.md and I access to it with the URL https://my-site.com/blog

Tree
Tree305×631 5.34 KB

So I use the freelancer them but not freelancer based on Jekyll. I just put the content of the site (HTML/CSS/JS) in my github repo. Only my blog is based on Jekyll.

1 Like
4

Can you share your repo? From your screenshot I cannot see which files contains the </body> statement. You should place the code in front of that statement.

1 Like
5

No I can’t, sorry. Which file you want to see ? I can post the content.

6

I would love to give you a filename and line number on which to insert the code, but cannot do so without access to your repo. I am sorry.

7

Got the code, thank you.

You need to create a directory called _layouts and create a file called default.html. In this file you should write:

<!DOCTYPE html>
<html lang="{{ page.lang | default: site.lang | default: "en" }}">

  {%- include head.html -%}

  <body>

    {%- include header.html -%}

    <main class="page-content" aria-label="Content">
      <div class="wrapper">
        {{ content }}
      </div>
    </main>

    {%- include footer.html -%}

  </body>

</html>

I copied the code above from the minima theme you are using. Once you created this file, you should paste the new code on the line before </body>.

8

Note that this solution DOES NOT make images ‘zoomable’. What it does is: it opens LINKS TO IMAGES in a lightbox.

9

This is what I mean by zommable : https://www.lokeshdhakar.com/projects/lightbox2/

10

Did you try this markup?

<a href="/path-to-image/filename.jpg"><img src="/path-to-image/thumbnail_filename.jpg" /></a>

11

Thank it works :slight_smile:
I use : [![My image alt description](/path/to/my-image.jpg)](/path/to/my-image.jpg)
Can I edit the Jekyll documentation to add more details on the steps ? The documentation is Open-Source ?

1 Like
12

Great! You can do a pull request. The code is on GitHub and public.

Thanks!
Joost

13

Hello, I have the plugin installed on my blog jekyll (https://marieldejesus12.gitlab.io/) but it didn’t work as in your example (https://jekyllcodex.org/without-plugin/lightbox/). I performed the installation as described on the plugin website. My lightbox does not function as a gallery where the arrows appear that I can pass and return the images.

14

This is because your links should be within the same parent element. Try fiddling with your HTML structure. Hope it helps!