用 Views Slideshow 模組製作自動播放的幻燈片/投影片效果

想要在你的 drupal 7 網站上製作出幻燈片效果嗎? 我試過這兩個模組: lightbox2 跟 views slideshow。 下表是簡單的比較。

lightbox2 views slideshow
管理員 設定較簡單 設定略複雜
貼相片者 (不需要) 面對比較簡單的 html 原始碼
製作幻燈片者 需要面對比較雜亂的 html 原始碼; 可以在任何文字頁面一步完成 必須為每套幻燈片製作一個 view; 步驟有點多
效果 比較陽春 可以套用 jquery cycle 的各種特效

本文說明如何用 views slideshow 製作製作幻燈片/投影片效果。 除了第四節是給 「負責張貼內容的非技術人員」 參考的之外, 其餘部分說明文字比較簡略一點 -- 假設身為 admin 的讀者已操作過 『用 views 建立 「按日期排序的文章清單」』, 對 drupal 已有相當認識。

一、 安裝及預備動作

  1. 安裝好 views slideshow、 ctools、 views、 libraries 等四個模組。
  2. 啟動 views slideshow 跟 views slideshow: cycle 兩個模組。
  3. 進入 sites/all/libraries 或 sites/default/libraries 子目錄， 然後 mkdir jquery.cycle
  4. 把 jquery.cycle.all.js 放到剛剛建立的目錄裡面去。

再來, 你必須已經預先建立好某一類的 「內容類型」 可以用來展示圖片。 以下假設你的 drupal 網站採用 貴哥版的圖片管理方案 -- 把相片 上傳 到另一套圖庫管理系統 (例如 piwigo 或 zenphoto), 並且在 drupal 裡面已經建立了一個名為 「相片」 的 「內容類型」。

重要提醒: 強烈建議檔名及目錄名稱 完全避免採用中文!

二、 為每一組幻燈片挑幾張圖、 設定一個標籤

假設我們在 zenphoto 或 piwigo 裡面已經儲存了幾千張各式各樣大自然的照片, 並且已經用 「花」、 「鳥」、 「狗」、 「海洋動物」、 「宇宙」、 「風景」 等等標籤作為主題設好 「虛擬相簿」。

接下來從 zenphoto 或 piwigo 的 「花」 虛擬相簿當中挑三五張 特別花 特別漂亮的花的相片。 以下的目標, 是要用這幾張相片 製作成誘餌 製作成幻燈片, 讓網站訪客忍不住要點進去我們的 zenphoto 或 piwigo 圖庫觀看完整的 「花-虛擬相簿」。

回到 drupal, 用 「新增內容」 => 「相片」 (第二節所建立的新的內容類型) 新增一些相片。 這種相片其實只是個空殼子, 用 <img src="..." /> 指向圖庫管理系統裡面真正上傳的相片。 特別提醒: 相片網址不要抄錯。 真的進入某一張相片的頁面 (而不是從一堆相片清單當中看到縮圖就滿意了); 這樣還不夠, 必須在完整大小圖片上面按滑鼠右鍵 「檢視圖片」, 讓畫面變成只有圖片本身 (旁邊所有文字排版完全消失) 這時看到的網址才是真的要貼到 <img src="..." /> 的相片網址。 至於圍繞在外側的 <a href="...">...</a> 超連結網址, 則填上 zenphoto 或 piwigo 圖庫裡面的 「花-虛擬相簿」 的網址。

「標籤」 欄則一律填 「幻燈片:花」 -- 等一下 drupal 才知道要把這幾張共同 tag 為 「幻燈片:花」 的相片收錄在同一組幻燈片當中。

同一套幻燈片的所有圖片, 其長寬比最好很接近 (不要把高瘦跟矮胖的放在同一套幻燈片裡), 且 width="..." 的數字應相同或接近。

三、 用 view 的 block 組織一套內嵌用的幻燈片

用 view 組織一套幻燈片 最後, 真的要組一套幻燈片了。

  1. 「架構」 => 「views」 => 「新增 view」。
  2. 最重要的地方: 「of type」 要選 「相片」 (第二節建立的內容類型); 「tagged with」 要選先前定義的 「幻燈片:花」。
  3. 因為這個例子是要做一個內嵌用的小幻燈片, 所以這裡只勾選 「Create a block」; 如果要把幻燈片放在獨立的頁面, 則只需要勾選 「Create a page」。
  4. 不論選 page 或 block, 「Display format」 要選 「Slideshow」 of 「fields」。

新增一個欄位, 從清單中選取 「內容: 相片網址(及連結)」 最後, 真的要組一套幻燈片了。

按下 「繼續及編輯」, 進入設定 view 的畫面。 新增一個欄位, 從清單中選取 「內容: 相片網址(及連結)」 -- 不一定跟這裡一模一樣; 要看當初你們網站的系統管理員為 「相片」 內容類型 的主要文字欄位 (最大長度設為 1020 的那個欄位) 命名時, 取做什麼名字。 記得要按 「儲存」 才會生效!

幻燈片的設定畫面 另外, 「格式: 幻燈片展示」 旁邊的 「設定」 點下去以後, 可以設定不同的特效。 特別推薦一定要到 「Cycle options」 底下的 「Transition」 底下的 「效果」 清單當中換換看各種不同效果。

四、 設定區塊顯示

  1. 「架構」 => 「區塊」
  2. 把剛剛建立的 view 搬到想要顯示的區域, 並 「儲存區塊」
  3. 如果這個 view 僅限於顯示在某些特定頁面, 還要編輯一下這個 view 的區塊, 設定一下 「在特定頁面裡顯示區塊」。 例如點選 「僅列出的頁面」 並在下方填入 node/128 之類的。

五、 用途

幻燈片效果很炫, 不需要 flash 而是採用 javascript, 且底下有 jquery 幫忙處理, 對各種瀏覽器以及平板電腦跟手機都很友善。 但是炫麗不該是重點。 重點是這類效果適合拿來做什麼。 這裡舉的例子是用它來把訪客帶到相簿; 但更好的也許是用它來把訪客帶到你的某些產品/文章。 此外, 這裡的例子在取標題名稱及說明文字的時候, 都有點呆。 一個好的網站, 不能徒有炫麗的技術, 還要有一些懂得 SEO/網頁行銷的人才, 從 「如何吸引人氣」 的觀點思考如何善用/組合這些炫麗的技術。 寫文章、 下標題、 整理標籤、 挑相片, 這些事情遠比炫麗的技術更重要。

參考資料

  1. 很詳細完整的教學文 How to Install & Setup Views Slideshow Module on Drupal7?
  2. 很精簡扼要的教學文 Drupal 7: Views Slideshow Tutorial (本文所參考的依據)