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

//----自定义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)

.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;
}

cd next/source/lib

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

fancybox: true