Requirements

  • Bootstrap
  • Lightbox for Bootstrap 3

Procedure

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

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

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

Usage

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

Via data attributes

Launch modal

Via Javascript

Open lightbox
$('#mylink').ekkoLightbox(options);

Personal Usage

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

image_caption

上面HTML对应的Markdown代码是:

![](path_to_image)
*image_caption*

Markdown可以加caption的!

因此不可能改变Markdown解析的细节,所以只能使用JS的办法来处理

使用起来其实很简单,对着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!

所对应的代码如下

![](http://7sbmib.com1.z0.glb.clouddn.com/portrait.jpg)
*Enjoy It!*

Extra

当然也有另一种办法,给Img+em添加CSS2:

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

参考文献