Hexo圖片不套用fancybox

前言

fancybox套件的功能是實現點開圖片，並可以放大顯示和左右切換圖片，還會隨版面的大小自動來調整跳出的版面範圍，而且手機端也可以直接實現。fancybox在Jquery中也有相關的套件，而Next主題自己在config有內建fancybox的配置，配製好以後就會在所有img標籤實作這功能，但如果有部分圖片不想要有放大顯示，則就需要做一些步驟。

安裝fancybox

我的版本的Next需要去把fnacybox clone下來，所以要先在next資料夾內執行下面的指令，就應該會在source/lib資料夾內出現fancybox資料夾

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

接著在自己的next主題的_config.yml來將fancybox設為true，要注意不是在vendors底下的fancybox喔!!

1
2
3

# FancyBox is a tool that offers a nice and elegant way to add zooming functionality for images.
# For more information: https://fancyapps.com/fancybox
fancybox: true

如果要在vendors配置則是如下

1
2
3

vendors:
  fancybox: //cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.js
  fancybox_css: //cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.css

鼠標顯示放大鏡icon

可以在next\source\css\_common\components\post中的這post.styl檔案裡面配製下面css語法

.post-body img:hover {
	cursor: zoom-in;//鼠标样式：手势
    //transform: scale(1.4); //放大倍數：1.4倍
}

結果圖

可以點選放大

照片取消fancybox放大

有些照片不想給人放大的話，就要自己改一些語法，如先在img標籤內給定一個自己定義的nofancybox屬性

1	<img src="https://i.imgur.com/W4RoWAe.jpg" class="nofancybox"/>

接著在source\js裡面的utils.js中找出var $image = $(element);，在它的下面加入如下

if ($(element).hasClass('nofancybox')){  //是否有包含自己定義的nofancybox屬性，有就return true
		$(element).css("cursor","default");    //將碰到圖片的鼠標從放大鏡變成default模式
		return;	//不進行下面的fancybox的配置
	  }

加入後會呈現如下

wrapImageWithFancyBox: function() {
    document.querySelectorAll('.post-body :not(a) > img, .post-body > img').forEach(element => {
      var $image = $(element);      
      if ($(element).hasClass('nofancybox')){
		$(element).css("cursor","default"); 
		return;
	  }
      var imageLink = $image.attr('data-src') || $image.attr('src');
	  .....
	  .....