嗯。。。。。没想好怎么做


前言

拖了这么久,决定用fancybox.js来搞个图集凑合凑合

简单了解fancybox

参照官网
官网介绍如下:JavaScript lightbox library for presenting various types of media. Responsive, touch-enabled and customizable.看不懂的路过

这里我们使用fancybox3,首页点击下载

往下拉可查看demo效果

下载至桌面,解压得到该文件夹。

浏览器下打开该文件,阅读文档

在How to Use下面查阅代码例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<a href="image_1.jpg" data-fancybox="gallery" data-caption="Caption #1">
<img src="thumbnail_1.jpg" alt="" />
</a>

<a href="image_2.jpg" data-fancybox="gallery" data-caption="Caption #2">
<img src="thumbnail_2.jpg" alt="" />
</a>

//我们需要的基本代码就是这样
<script>
$('[data-fancybox="gallery"]').fancybox({
// Options will go here
});
</script>

在Options下查看fancybox的一些参数

在hexo博客中使用fancybox

方案一

在文章.md文件中使用raw标签直接插入如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<link rel="stylesheet" href="jquery.fancybox.min.css">
<a href="image_1.jpg" data-fancybox="gallery" data-caption="Caption #1">
<img src="thumbnail_1.jpg" alt="" />
</a>

<a href="image_2.jpg" data-fancybox="gallery" data-caption="Caption #2">
<img src="thumbnail_2.jpg" alt="" />
</a>

<script src="jquery.fancybox.min.js"></script>
<script>
$('[data-fancybox="gallery"]').fancybox({
// Options will go here
});
</script>

这种方法有些太麻烦了,于是有了方案二。

方案二

在文章.md文件中使用raw标签直接插入如下代码:

1
2
3
4
5
<img class="hj_img" src="https://wx1.sinaimg.cn/large/006bYVyvgy1fr0tc3y3avj31kw0vzqv5.jpg">
<img class="hj_img" src="https://wx4.sinaimg.cn/large/006bYVyvgy1fr0ufullbkj31kw0vz4qq.jpg">
<img class="hj_img" src="https://wx4.sinaimg.cn/large/006bYVyvgy1fr0ug1074xj31kw0vr4qp.jpg">
<img class="hj_img" src="https://wx2.sinaimg.cn/large/006bYVyvgy1fr0ugfyw4aj31kw0vue82.jpg">
<img class="hj_img" src="https://wx4.sinaimg.cn/large/006bYVyvgy1fr0ug8ds8xj31kw0vxqv5.jpg">

接着使用js给他转换成需要的格式。
博主是在footer的模板下插入如下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//前面需要引入fancybox的css和js,这里省略
<secrpt>
(function() {
//前面部分是判断是标签否为图集的文章,根据需求可以舍弃
var arr = new Array();
var $tags = $('.post-tags').children('a');
$tags.each(function() {
arr.push($(this).html())
})
if (arr.indexOf("图集") !== -1) {
//如果是图集
$('.hj_img').each(function() {
$(this).wrap('<a class="fancybox" data-fancybox="gallery" href="' + $(this).prop("src") + '"></a>');
})
//初始化fancybox,padding设为0,loop设为false
$('.fancybox').fancybox({
padding: 0,
loop: false
});
}
})();
</script>

方案三

这里只提供个思路,因为方案二版的实现很简便,就没去折腾了。

大致思路即是修改maked.js生成渲染的规则,根据图集图片的特定标志,识别出来,把需要的a标签渲染出来。直接生成文件。

实现过程可参照我之前的两篇文章OwO-可爱的js表情符号插件Lozad.js学习使用

终·效果预览

安利一波 动漫 《K》

希望这篇文章能给你带来知识和乐趣,喜欢博主的文章可以加博主好友哦

有好的文章也可以向博主投稿哦