WordPress眾多外掛中,
有兩個(至少是我知道的)可以讓網頁上的照片類似看片箱效果(也有人叫光箱或暗箱效果)來呈現,
這兩個就是Lightbox和Thickbox,
Lightbox的DEMO網頁如下網址:
http://stimuli.ca/lightbox/

Thickbox的DEMO網頁如下網址:
http://blog.colorbase.tw/uncategorized/334

以上兩個都可以在WordPress官網中找到,
網路上也有很多教學分享,
這裡就不再多說了!
(其實是我不會啦! smile16 )
而這兩個外掛的共同特色就是必需在自己的網站空間放一組縮小的照片,
這樣一來會佔用個人網站的有限空間及流量(長久來看的話),
還有就是Thickbox耗用的資源比Lightbox來的小多了!

正因為一直都試不出Lightbox及Thickbox的效果及考慮到會佔空間及流量的問題,
所以遲遲不敢動手加裝,
直到昨天在網路上找到另一個具同樣效果的外掛才決定加裝,
這個外掛就是Shutter Reloaded!

外掛名稱:Shutter Reloaded
官方網頁:http://www.laptoptips.ca/projects/wp-shutter-reloaded/
下載連結:http://wordpress.org/extend/plugins/shutter-reloaded/
安裝方法:下載後將整個目錄上傳到”/wp-content/plugins/“目錄下,再到後台將它啟動即可!

引起我注意就是官網中的這段話:

Shutter Reloaded is an image viewer for your website that works
similarly to Lightbox, Thickbox, etc. but is lean and mean at only 10KB size.
It does not require any external libraries. It has all standard features: resizing
large images if the window is too small to display them with option to show the
image in full size, unlimited number of image sets, pre-loading of neighbour images
for faster display and very good browser compatibility.

→ 中譯大意就是它比起Lihgtbox、Thickbox來的小太多了(只需10KB),而且重點是它不需要另外的圖庫喔!

它主要的是可以導向個人的網路相本而不需用到網路空間及流量,
利用class=”shutter”做單張效果或class=”shutterset_setname”(setname由個人定義,反正整組照片需一樣就對了!)做多張照片效果,如下:

單張效果:

語法:

多張效果:

語法:請注意其中的class=”shutterset_10″



使用說明如下:

  1. Shutter Reloaded的啟用方式是經由連結導向到您所想要顯示的照片,不管有沒有縮圖 (文字連結也相同),class及title在連結中都是必需被設置的。
  2. 如要取得完整的Shutter啟用效果並要在同一頁面設定多個照片集,你將會需要加入class=”shutter” 或 “shutterset” 或”shutterset_setname” 到您連結的 “Code” 內,您可以在編輯頁面瀏覽。
  3. 如您要幫照片加上標題,請設為 title=”…” 並把連結的屬性導向它們。
  4. 如果您想使用照片集的話,您將會需要加入class=”shutterset” 到所有的連結並指到照片集中的照片。如果您要將 css 樣式套用到連結, 您可以增加第二個類別,像是: class=”shutterset myClass”,但 “shutterset” 應為第一。
  5. 加入 class=”shutterset” 也會啟用 Shutter 效果 (對於第一個選項而言). 而且不需要再加入 “shutter” 和 “shutterset”(這個是指該頁面中你只要設定一組照片集而已)。
  6. 如要在同一頁面設定多個照片集,可以使用 class=”shutterset_setname”來設定,而底線是必需的,setname 可以是任何簡短的 ASCII 文字 / 數字 (每一組的 setname 必需不同).(這個是指你在同一頁中設有多組照片集)。
  7. 您可以使用 “所有照片連結都使用 Shutter 效果” 並且也可以使用 class=”shutterset” 或 class=”shutterset_setname” 或 rel=”lightbox[…]” 來針對某些圖片連結。

本篇文章引用網址: