2017-09-30 99 views
1

有没有办法生成一个不使用插件的Jekyll照片库?我尝试了一些,但它不是GitHub页面友好。Jekyll没有插件的照片库

现在我使用降价,我指定哪些图片应该显示,但我想找到一些通用的方式来做到这一点。

+1

您可以使用Javascript库,如[Fancybox 3](http://fancyapps.com/fancybox/3/)。 –

回答

2

你可以在你的阳明这样的事情(在.MD文件):

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

这在你的布局文件:

{% 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 %} 
一些CSS

一起和jQuery这可以做你自己的定制灯箱。 jQuery应该切换(下一个)灯箱。类似这样的:

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

上面的代码来自本站:http://www.bendirkse.nl。本网站的源可以在这里找到:https://github.com/jhvanderschee/bendirkse

更新:我创建了一个simple lightbox for Jekyll任何人都可以不理解的JavaScript,HTML和CSS(甚至化身)的使用。

+0

这太棒了。例子看起来非常棒。耻辱有没有自述文件如何使用它,但我可以通过代码并尝试实现类似的功能。谢谢! –

+1

没问题。如果您不完全了解CSS和jQuery,我会建议您使用像Fancybox 3这样的预制javascript解决方案(如Karthikeyan建议的那样)。 – JoostS