WordPress圖片燈箱效果插件：Auto Highslide（自動鏈接到原圖）

以前一直沒有推薦過WordPress圖片燈箱效果插件，主要是因為倡萌一直沒用這類插件，不過最近已有幾個朋友詢問這方面的插件了，倡萌前不久瞄上了 @威言威語 修改的 Auto Highslide ，非常符合我的要求，推薦給大家。

Auto Highslide 原版

Auto Highslide 是國人 @Showfom 制作的WordPress圖片燈箱插件，直接啟用后，，不需要任何插件設(shè)置，只需要在添加圖片的時候，設(shè)置鏈接到原圖就可以了。

更多原版詳情：http://zou.lu/auto-hishslide-wordpress-plugin/

Auto Highslide 修改版

@威言威語 添加了一些遮罩效果，和操作按鈕。倡萌親自測試，效果更佳，推薦使用該版本。

修改版詳情：http://www.weisay.com/blog/auto-highslide.html

下載 Auto Highslide 修改版

使用方法

解壓上傳到插件文件夾，后臺安裝。用的時候在圖片上面加個a 鏈接標簽就行。舉例：

<a href="http://sharepic.googlecode.com/files/win8_6.png">
<img alt="alt里面的文字會顯示在圖片底部" src="http://sharepic.googlecode.com/files/win8_6.png" title="Windows8" width="600" />
</a>

注意：原圖可以很大，但是要定義width的大小，這樣圖片就會被壓縮到頁面合適的大小了，點擊就能顯示大圖片。

如果你在圖片里面定義了alt屬性，那么當(dāng)你點擊圖片顯示效果的時候，你會發(fā)現(xiàn)你的alt屬性里面的文字會顯示在圖片底部。

自定義遮罩顏色

此修改版插件默認的蒙罩層是白色的，如果你想換成黑色，可以修改插件里面的highslide.css，將里面最后的

.highslide-dimming{background:#fff;}

改為

.highslide-dimming{background:#000;}

當(dāng)然你也可以定義成其他顏色，看你自己的喜好了。

可能出現(xiàn)的問題

安裝好插件之后，如果點擊圖片一直顯示“正在加載”，就是不能顯示展開效果的話，看看你使用的主題是否加載了jQuery，此插件是需要jQuery支持的。而且該插件會自動在WordPress主題的 wp_head()  鉤子輸出 js，所以請確保你的主題的 header.php 有 <?php wp_head(); ?> 這行代碼。

自動鏈接到原圖的方法

如果你以前發(fā)布的圖片沒有添加鏈接到原圖，或者你不想每次都手動添加鏈接，那你可以在主題的 header.php 中添加下面的js代碼：

<script type="text/javascript">
$(function() {
	$('.entry img').each(function(i){
		if (! this.parentNode.href) {
			$(this).wrap("<a href='"+this.src+"' class='highslide-image' onclick='return hs.expand(this);'></a>");
		}
	});
});
</script>

該腳本會檢查文章中的圖片是否包含了鏈接，如果沒有，就會自動為圖片添加鏈接到原圖。這樣，即使你以前的文章圖片沒有鏈接，那也不用愁了，現(xiàn)在直接就可以用燈箱效果了。

注意：請根據(jù)自己的實際，修改第 3 行的 .entry 為你主題內(nèi)容的CSS類。

該方法來自：http://webdev.brunoxu.info/archives/180.html ，非常感謝。