TL;DR

把下面这段代码加到html里就可以直接点开<img>标签了。

function createFancyboxEvent() {
    $('img').each(function(){
        this.onclick = function(){
            $.fancybox.open({
                src: this.src,
                type: 'image',
            })
        }
    })
}
$(function(){
    createFancyboxEvent();
})

详细

点击上面这个图片是可以放大的。

这个功能是靠 Fancybox 来实现的，我看 hexo 插件里有这个，但是我设置了fancybox=true后并不能点开图片。

参考了 Fancybox的文档 后发现，这玩意需要大概这样去用：

<a href="image.jpg" data-fancybox data-caption="Caption for single image">
    <img src="thumbnail.jpg" alt="" />
</a>

但是markdown写的时候都是直接用![desc](imgurl)来添加图片的，这一个<a>标签套一个<img>标签不是很麻烦。然后又搜了搜，hexo大概有一种{\% fancybox imgurl desc %}这样的用法，发现也不是很方便，而且生成出来的图片外面没有<p>标签，看起来和正文会不太一致。

于是又仔细看了下文档，好像支持这样的调用方式：

$.fancybox.open({
    src  : 'link-to-your-page.html',
    type : 'iframe',
    opts : {
        afterShow : function( instance, current ) {
            console.info( 'done!' );
        }
    }
});

于是把下面这段代码加到html里就可以直接点开<img>标签了。

function createFancyboxEvent() {
    $('img').each(function(){
        this.onclick = function(){
            $.fancybox.open({
                src: this.src,
                type: 'image',
            })
        }
    })
}
$(function(){
    createFancyboxEvent();
})