Jekyll photo gallery without plugins

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.

Answers:

Answer

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

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.