網站 / WordPress 燈箱效果(lightbox) 程式碼說明

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

$(".entry-content img").each(function () {
  $(this).wrap(function () {
	//console.log($(this).attr("srcset"));
	if (typeof $(this).attr("srcset") !== "undefined") {
		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" />';
		}
	}
  });
});

 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")
			}
		}
});}