網站 / WordPress 燈箱效果(lightbox)

網站 / WordPress 燈箱效果(lightbox)

Post Views: 81

最近才發現網站的燈箱(lightbox)沒有作用

不知道從什麼時候開始的

後來發現應該是圖檔的連結設定問題

備註1

不過原本的外掛(Meow Lightbox)確實也有問題

用其他外掛，或者佈景主題內建功能，只要連結目標設定成圖檔連結，就會有燈箱效果

以前在文章內加入圖檔，不用特別選擇連結方式

至少在今天之前，我都沒有這樣特別設定

現在要一個一個加連結，也不現實

所以用程式的方式來替文章內的圖檔加上a標籤

由於燈箱功能必須要有功能的觸發機制，不能只有a標籤

必須替這些新增的a標籤增加事件

測試幾個外掛之後，發覺佈景主題內建功能最簡單

因為佈景主題內建功能是使用Jquery的擴充函式Magnific-Popup

所以只要增加參數設定就可以了

備註2

是從這篇文章”Disable the Lightbox Scripts“給的靈感

因為文章是透過註銷magnific-popup來進行取消功能

測試之後，確實是使用Magnific-Popup

 

總結以上，需要增加的程式碼，可以分成3個部分

1.文章內圖檔增加a標籤

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
 
$(".entry-content img").each(function () {
  $(this).wrap(function () {
	//console.log($(this).attr("srcset"));
	var imgSS = $(this).attr("srcset").split(", ");
	//console.log(imgSS.length);
	// imgSS.length >=6
	if (imgSS.length >= 6) {
	  var imgTarget = imgSS.length - 1;
	  var imgSSone = imgSS[imgTarget];
	  //console.log(imgSSone);
	  var imgUrlOne = imgSSone.split(" ")[0];
	  console.log(imgUrlOne);
	  //console.log('<a href="' + $(this).attr('src') + '" class="oceanwp-lightbox" />');
	  return '<a href="' + imgUrlOne + '" class="oceanwp-lightbox" />';
	} else {
	  // imgSS.length <6
	  //console.log($(this).attr("src"));
	  return '<a href="' + $(this).attr("src") + '" class="oceanwp-lightbox" />';
	}
  });
});

 

2.a標籤觸發Magnific-Popup

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
 
if($(".oceanwp-lightbox").length>0){
	$(".oceanwp-lightbox").magnificPopup({
		type: "image",
		mainClass: "mfp-with-zoom",
		gallery: {
			enabled: true
		},
		zoom: {
			enabled: !0,
			duration: 300,
			easing: "ease-in-out",
			opener: function(e) {
				return e.is("img") ? e : e.find("img")
			}
		}
});}

 

3.透過”程式碼片段”這個外掛加入以上程式碼

結果如下

Tags: