javascript - Jekyll photo gallery without plugins - Stack Overflow

Is there a way to generate a Jekyll photo gallery which does not use plugins? I tried some, but it wasn't GitHub Pages friendly.

Now I'm using markdown, where I specify which pictures should be displayed, but I want to find some generic way to do this.

Is there a way to generate a Jekyll photo gallery which does not use plugins? I tried some, but it wasn't GitHub Pages friendly.

Now I'm using markdown, where I specify which pictures should be displayed, but I want to find some generic way to do this.

• javascript
• html
• jekyll
• gallery

Share Follow edited Oct 20, 2017 at 19:06 Mr. Hugo 12.6k33 gold badges4646 silver badges6666 bronze badges asked Sep 30, 2017 at 8:10 Jan KrupaJan Krupa 50699 silver badges2424 bronze badges 1

• 1 You can use Javascript libraries like Fancybox 3. – seenukarthi Commented Oct 2, 2017 at 7:25

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

You can do something like this in your yml (in your .md file):

images:
  - image: /uploads/image5.jpg
  - image: /uploads/image6.jpg
  - image: /uploads/image7.jpg

And this in your layout file:

{% for item in page.images %}
<div class="lightbox" id="lightbox{{ forloop.index }}">
  <div class="table">
    <div class="table-cell">
      <img class="close" src="/img/close.svg" />
      <img class="next" src="/img/next.svg" />
      <img class="prev" src="/img/prev.svg" />
      <div class="item" style="background: url('{{ item.image }}') center center no-repeat; background-size: cover;">
      </div>
    </div>
  </div>
</div>
{% endfor %}

Together with some CSS and jQuery this can be your own custom lightbox. The jQuery should toggle the (next) lightbox. Something like this:

$('.next').click(function(){
  $(this).closest('.lightbox').hide().next().show();
});

UPDATE: I have created a simple lightbox for Jekyll that anyone can use without understanding javascript, HTML or CSS (or even Jekyll).