Jekyll x Markdown 图片美化 - Lightbox.js

Meta

文章分类 Tech

标签 JS

目录

Requirements

  • Bootstrap
  • Lightbox for Bootstrap 3

Procedure

本来一个很普通的Jekyll主题被我改得完全没了原来的样子

昨天写了一篇游记，Karmdown里面的图片不会自适应，导致有些图片大有些图片小，当然我才懒得给每个图片加width和height!

所以随手搜了一下Modal Window来显示图片，于是就找到了Lightbox这个Plugin

Usage

官方1给的API比较简单，可以有几个用法

Via data attributes

<a href="someurl" data-toggle="lightbox">Launch modal</a>

Via Javascript

<a href="someurl" id="mylink">Open lightbox</a>
$('#mylink').ekkoLightbox(options);

实际使用

官方的推荐是在image外层放一个<a>并通过<a>的点击调用Modal Window，而Markdown引用图片时会生成如下的格式2：

<p>
    <img src="path_to_image" alt="">
    <em>image_caption</em>
</p>

上面HTML对应的Markdown代码是：

![](path_to_image)
*image_caption*

Markdown可以加caption的！

修改img elem

我们不能改变Markdown解析的细节，但是可以使用JS的办法来处理，写一段JS将所有img用一个a包围：

$('#post-content img').each(function(index, val) {
    var link = $('<a></a>').attr({
        'rel': 'lightbox',
        'href': $(val).attr('src'),
        'data-lightbox':"roadtrip"
    });
    if ($(val).next('em')!=null) {
        link.attr('title', $(val).next('em').html());
    }
    $(val).parent().prepend(link);
    link.append($(val));
    $(val).addClass('img-fluid'); /*add BS4 image fluid class*/
});
<p>
    <a rel="lightbox" href="path" data-lightbox="roadtrip" title="Enjoy It！">
        <img src="path" alt="" class="img-fluid">
    </a>
    <em>Enjoy It！</em>
</p>

绑定事件

对着Selector运行ekkoLightbox()就行。

$('#subcontainer img').on("click",function(){
    event.preventDefault();
    $(this).ekkoLightbox({
        remote: $(this).attr('src'),
        title: $(this).next().html()
    });
})
  1. 首先选择正文div#subcontainer里面的img
  2. 设定一个onClickListener
  3. 点击的时候调用ekkoLightbox，并传递几个参数
    1. remote: 就是远程图片地址，实际上这里执行了两次call，不知官方有否直接运用客户端图片的办法，反正有的话我也懒得改了o(￣ヘ￣o＃)
    2. title: 这里就直接获取图片后面的<em>里面的内容作为Title

使用示例

（点击下图片试试）↓

Enjoy It！

所对应的代码如下

![]( https://assets-pic.szhshp.org/site/portrait.jpg)
*Enjoy It！*

Extra

给Img+em添加CSS进行美化2:

img + em {
    display: block;
    padding-left: 10px;
    color: grey;
 }

参考文献

Footnotes

  1. LightBox ↩

  2. Using an image caption in Markdown Jekyll ↩ ↩2