Hexo文章中图片点击实现全屏查看

具体效果请查看：https://wugenqiang.gitee.io/articles/hexo-do-picture-screen.html

写在前面

方法一存在图片放大后不美观，建议直接跳到方法二
如果想尝试解决第一种方法出现的Bug，可以尝试一下，然后我们讨论一下，方便的话可以加我QQ：2422676183

方法一

修改post-details.js文件

文件目录：/themes/next/source/js/src/post-details.js
在文件最后添加：

//----自定义js----------------
function createImgEventFullScreen() {
  var imgs = $(".post-body").find("img");
  console.log(imgs);
  for(var i = 0;i < imgs.length;i++) {
    // $(imgs[i]).click(createCover(imgs[i]));
    imgs[i].onclick= function(e) {
      var src = e.srcElement.currentSrc;
      createCover(src)
    }
  }
  function createCover (src) {
    console.log(src);
    var cover = $("<div id='fullScreenCover' class='zhao-cover-img-container'><img class='zhao-cover-img' src='"+src+"'/></div>");
    $("#fullScreenCover").remove();
    $("body").append(cover);
    $("body").addClass("zhao-no-scroll");
    $("#fullScreenCover").click(function(){
      $("#fullScreenCover").remove();
      $("body").removeClass("zhao-no-scroll");
    })
  }
}
setTimeout(function(){
  createImgEventFullScreen();
},1000)

修改custom.styl文件

文件目录：/themes/next/source/css/_custom/custom.styl
在文件最后添加：

.zhao-cover-img-container{
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100vh;
 z-index: 10002;
 text-align: center;
 background-color: #000;
 overflow-y: scroll;
}
.zhao-cover-img{
 width: 100%;
 position: absolute;
 top: 0;
 bottom: 0;
}
.zhao-no-scroll{
 width: 100%;
 height: 100vh;
 overflow: hidden;
}

不过还是会存在一个小bug，大图片图片放大时有点不美观
如果您知道如何解决可以给我留言，谢谢啦

方法二

这种方法使用了图片浏览放大功能fancybox插件

切换到lib目录

cd next/source/lib

下载插件

git clone https://github.com/theme-next/theme-next-fancybox3 fancybox

更改主题配置文件

更改next/_config.yml文件

fancybox: true

测试效果

部署hexo s之后点击图片，如图：

完美，这种效果我很满意，你觉得呢，还是大神优秀啊~~ 好好学习！