给博客添加图集展示

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

前言

拖了这么久，决定用fancybox.js来搞个图集凑合凑合@(想一想)

简单了解fancybox

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

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

往下拉可查看demo效果

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

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

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

<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标签直接插入如下代码：

<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标签直接插入如下代码:

<img class="hj_img" src="https://cdn.jsdelivr.net/gh/honjun/ImageHosting/sina/006bYVyvgy1fr0tc3y3avj31kw0vzqv5.jpg">
<img class="hj_img" src="https://cdn.jsdelivr.net/gh/honjun/ImageHosting/sina/006bYVyvgy1fr0ufullbkj31kw0vz4qq.jpg">
<img class="hj_img" src="https://cdn.jsdelivr.net/gh/honjun/ImageHosting/sina/006bYVyvgy1fr0ug1074xj31kw0vr4qp.jpg">
<img class="hj_img" src="https://cdn.jsdelivr.net/gh/honjun/ImageHosting/sina/006bYVyvgy1fr0ugfyw4aj31kw0vue82.jpg">
<img class="hj_img" src="https://cdn.jsdelivr.net/gh/honjun/ImageHosting/sina/006bYVyvgy1fr0ug8ds8xj31kw0vxqv5.jpg">

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

//前面需要引入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>