やみろぐ。

[光箱教學]不用外掛，利用highslide把圖片加上光箱效果

以前小闇是利用floatbox+把圖片以「光箱效果」呈現在各位看倌的視網膜前。不過近幾天，決定狠下心轉用殺氣同學介紹的wp-slimbox2，加上他本人製作的中文語系檔，圖片顯示比以往更清晰流暢。

可是，還是有一點不滿足。

事源是小闇還在決定用哪家的光箱外掛時，無意跑進野兔村。看見那麼精美的highslide效果，禁不住折騰！不過最後是失敗的。
於是在今日又無意間飄進一路跌跌撞撞，該位站長同學也有很詳細地撰寫有關的教學。
不過我又失敗了（苦笑）

不過！！（你說太多「不過」啦）
既然某闇在此打出教學文，就代表我折騰成功啦♪

又可以省下一個外掛了啦啦啦～（被踢至火星）
在按「繼續閱讀」前，有兩項要注意的地方：

• 請一定要保持清醒頭腦
• 有折騰不了的地方，務要參考highslide-X.X.X/index.htm，因為當中的原始碼絕對有助你折騰成功

那麼，我們開始了！

所謂的"highslide"是什麼呢？請到這邊的示範站看一下就會知道。

或按一下下面的初音。

是不是很神奇呢？對哦，highslide的一大特色便是把縮小的圖片用「擴張」的形式展開於眼前，這算是一種比較新鮮的光箱。

highslide的設定非常簡單，不過也有一些需要注意的地方，這個會在文末地方提醒大家的。

STEP 1
到官網的下載頁面下載最新版的highslide包。
按下"Download Now!"之後會跳轉頁面，找到"Do you accept the licence conditions above?
狠狠按下YES就可以了。

STEP 2
下載好解壓包、得出以下的檔案：
index.htm(預覽目錄)
examples(預覽)
highslide(本體)
images(預覽圖圖片)
現在要先選好你的網站是想要那一類型的光箱效果了！highslide提供了單一圖片和組合圖片的光箱效果，來選選自己喜歡哪一個？

STEP 3
＊以下的內容將會以組合圖片形式的光箱效果作教授＊

假設我喜歡一個名叫gallery-dark的效果，那麼第一步要先怎樣做呢？

先把文件夾"highslide"搬到你家主題內，../wp-content/themes/XXX/highslide/。

然後複製這句語法，是呼喚「highslide快出來」的語法喔！

1

<script src="../highslide/highslide-with-gallery.js" type="text/javascript"></script>

緊記把剛剛上傳好的highslide-with-gallery.js和highslide.css路徑準確無誤地寫出。
接著複製這句，是呼喚「gallery-dark」快出來的。

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

<script type="text/javascript">
hs.graphicsDir = '../highslide/graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.outlineType = 'glossy-dark';
hs.wrapperClassName = 'dark';
hs.fadeInOut = true;
//hs.dimmingOpacity = 0.75;
 
// Add the controlbar
if (hs.addSlideshow) hs.addSlideshow({
//slideshowGroup: 'group1',
interval: 5000,
repeat: false,
useControls: true,
fixedControls: 'fit',
overlayOptions: {
opacity: .6,
position: 'bottom center',
hideOnMouseOut: true
}
});
</script>

hs.graphicsDir = '../highslide/graphics/';
↑紅字是代表你要指向文件夾highslide/graphics/的路徑(必需修改)

以上兩句語法需放在header.php (head之前的位置)。

STEP 4
終於完成了！讓我們來看看效果：

複製以下語法至草稿欄↓

1
2
3
4

<div class="highslide-gallery"><a title="按圖放大" href="大圖的位置" class="highslide" onclick="return hs.expand(this)">
<img src="小圖的位置" alt="Highslide JS"/></a>
<div class="highslide-caption">描述</div>
</div>

STEP 5
注意事項

如果你正在用highslide4WP這個外掛，請務必停用+刪除之。
因為它和本體的highslide相撞了，導致不能正常顯示效果。

而懵然不知的某闇卻為此折騰了2天

＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊

看看是不是OK了?
OK的話，恭喜你！日後要是想變更光箱效果，請瀏覽examples/你喜歡的光箱效果/ 的原始碼就可以了！
複製第二點以下的<script type="text/javascript">至</script>的內容便可，緊記路徑要指向highslide/graphics/。

折騰失敗的同學，歡迎你詳細地提出疑問，某闇盡可能會回答你的問題。

文章目錄

1. highslide的介紹與安裝（此頁）
2. 中文化的方法