Javascript 没有插件的杰基尔照片库
有没有办法生成不使用插件的Jekyll照片库?我试了一些,但不友好Javascript 没有插件的杰基尔照片库,javascript,html,jekyll,gallery,Javascript,Html,Jekyll,Gallery,有没有办法生成不使用插件的Jekyll照片库?我试了一些,但不友好 现在我使用markdown,在这里我指定应该显示哪些图片,但我想找到一些通用的方法来实现这一点。您可以在yml(在.md文件中)中执行类似的操作: 在布局文件中: {% for item in page.images %} <div class="lightbox" id="lightbox{{ forloop.index }}"> <div class="table"> <div cl
现在我使用markdown,在这里我指定应该显示哪些图片,但我想找到一些通用的方法来实现这一点。您可以在yml(在.md文件中)中执行类似的操作: 在布局文件中:
{% 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 %}
更新:我创建了一个任何人都可以在不了解javascript、HTML或CSS(甚至Jekyll)的情况下使用的javascript库。您可以像这样使用javascript库。这太棒了。这个例子看起来真的很棒。遗憾的是没有自述如何使用它,但我可以按照代码进行操作,并尝试实现类似的功能。谢谢没问题。如果您不完全理解CSS和jQuery,我建议您使用Fancybox 3(正如Karthikeyan所建议的)这样的预制javascript解决方案。非常好。JoostS,示例网站源已不存在或不再公开。事实上,它现在使用的是jekyll codex的灯箱吗?谢谢。我拆下了断开的链环。请使用Jekyll Codex灯箱。
{% 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 %}
$('.next').click(function(){
$(this).closest('.lightbox').hide().next().show();
});