Fancybox如何直接兼容img标签

TL;DR

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

1
2
3
4
5
6
7
8
9
10
11
12
13
function createFancyboxEvent() {
$('img').each(function(){
this.onclick = function(){
$.fancybox.open({
src: this.src,
type: 'image',
})
}
})
}
$(function(){
createFancyboxEvent();
})

详细

示例图片

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

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

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

1
2
3
<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>标签,看起来和正文会不太一致。

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

1
2
3
4
5
6
7
8
9
$.fancybox.open({
src : 'link-to-your-page.html',
type : 'iframe',
opts : {
afterShow : function( instance, current ) {
console.info( 'done!' );
}
}
});

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

1
2
3
4
5
6
7
8
9
10
11
12
13
function createFancyboxEvent() {
$('img').each(function(){
this.onclick = function(){
$.fancybox.open({
src: this.src,
type: 'image',
})
}
})
}
$(function(){
createFancyboxEvent();
})

jquery

评论小助手

评论正在加载...

Tip: 点击下方链接切换到 Disqus 评论框可以获得邮件提醒哦
🗣️ 加载 Disqus 评论框