Media Files

⌚2019-09-01 21:50

サンプル画像

Lity を採用

<link rel="stylesheet" href="{{ theme_url }}/css/lity.min.css" type="text/css" />
<script src="{{ theme_url }}/js/lity.min.js" type="text/javascript"></script>

↑をいい感じの場所に記述

$("img[src*=_thumb]").each(function(){
    $(this).wrap(
        "<a href=\"" +
        $(this).attr("src").replace(/_thumb/, "") +
        "\" data-lity></a>"
    );
});

↑自動適用 {画像名}_thumb.[jpg|png|gif...]みたいな画像があったら、Lityを適用させる。つまり

![画像名](/images/unko_thumb.png)

とMarkdownで書かれてたら、

<a href="/images/unko.png" data-lity>
    <img src="/images/unko_thumb.png" alt="画像名">
</a>

と同等になる。

Lity - Lightweight, accessible and responsive lightbox

コメント

Name
Comment