[JS]讓lightbox2支援map的area標籤

[`evernote` not found]

lightbox2是一個wp很方便的外掛，但是大部分的用法就是在點選小圖然後用lightbox方式看大圖。

但是，其實他也可以用a標籤加上rel=”lightbox”來播放圖片：

<a href="/wp-content/uploads/2012/08/IMG_3426.jpg" rel="lightbox"> 2012 江戶川花火 </a>

2012 江戶川花火
但是，如果我們要用map的area標籤的話，就沒這麼開心了….

查了很多資料後，發現這應該是lightbox.js的bug。所以打開lightbox.js修改一下其中的start function(約在210行左右)。找到：

new Effect.Appear('stimuli_overlay', { duration: overlayDuration, from: 0.0, to: overlayOpacity });
imageArray = [];
imageNum = 0;
 
if (!document.getElementsByTagName){ return; }
var anchors = document.getElementsByTagName( imageLink.tagName);
var stimuli_image_title = "";

加入:

imageLink.rel = imageLink.getAttribute('rel');

找到：

var possibleLightboxImageTitles = [imageLink.getAttribute('title'), imageLink.childNodes[0]['title'], imageLink.childNodes[0]['alt'], " "];

改成：

if(imageLink.childNodes[0] !== undefined){
	var possibleLightboxImageTitles = [imageLink.getAttribute('title'), imageLink.childNodes[0]['title'], imageLink.childNodes[0]['alt'], " "];
}else{
	var possibleLightboxImageTitles = [" ", " ", " ", " "];
}

如此，就可以用

<img src="/wp-content/uploads/2012/08/IMG_3426-225x300.jpg" alt="" width="225" height="300" usemap="#Map" />
<map name="Map"> <area shape="rect" coords="0,0,100,100" href="/wp-content/uploads/2012/08/IMG_3426-225x300.jpg" rel="lightbox"/> </map>

指定在圖片的左上方(0,0)到(100,100)的區域為按鈕，點選顯示lightbox的大圖嚕～
例：

JustFLY~JustBlog~

Just Do It!!

[JS]讓lightbox2支援map的area標籤

2 則迴響於《[JS]讓lightbox2支援map的area標籤》