Blogger 使用 Lightbox 燈箱效果
Lightbox發展受限的問題最主要在 rel="lightbox" 這個元素值不符合HTML5的規範, 會和登錄值衝突, 當然也可以使用javascript改寫 rel="lightbox" 變成 class="lightbox", 但這是後話了, 不討論.
那麼這篇教學還有甚麼好說的呢? 其實Lightbox2的始祖終於釋出了最新版本- Lightbox 2.6
原本使用Lightbox2的網友不必忍痛將以前的文章作修改, 新的元素值符合HTML5的要求, 舊的文章也能共用新的jQuery程式碼. 雖然先前經常說不想寫這類的文章...
原本我也是死賴著舊碼不想改用其他jQuery燈箱程式碼, 最近因為改版, 決心將部落格運用到的javascript重新整頓, 也正好 +Lokesh Dhakar 釋出新版的 Lightbox 2.6 約三個月, 目前已除錯更新完, 順道分享給有需要的人.
示範效果可點入文首的中秋明月圖 (那不是spotlight喔! 是我的拍攝技術太差...)
也可以直接到 Lightbox 2.6 看示範和下載.
以下內容是分享給不太熟悉外部插件如何使用的網友. 因為Yahoo部落格和無名小站即將在2013-12-26停止服務, 最近有好些新的Blogger使用者加入, 有的部落客習慣了其他BSP綁手綁腳的設計; 還不明白Blogger的厲害, 順便參考.
◆ Step 1. 看完開發者的網頁說明後下載文件
裡面包含一個CSS樣式文件、兩個JS, 將這三樣上傳到可外部連結的空間或Google Drive. 使用Blogger就應該有Google帳號, 自然就可以使用Google Drive雲端硬碟. 已有使用jQuery程式庫者, 無需重複申裝"jquery-1.10.2.min.js"
CSS文件中的所需的小圖示我已經使用圖形編碼改寫, 不用再上傳圖片改寫到CSS裡.
◆ Step 2. 三個文件上傳後取得網址, 代入以下紅字部分.
<link href="css/lightbox.css" rel="stylesheet" /> <script src="js/jquery-1.10.2.min.js"></script> <script src="js/lightbox-2.6.min.js"></script>其中比較要注意的是, 如果您的版型支援行動網頁, 怕打開的lightbox圖片太巨大影響頁面美觀, 可以考慮加入 media="screen" 或是限定尺寸的值, 燈箱就會隨螢幕縮放. * 有的人使用燈箱為了觀看攝影作品的清晰度, 希望打開是完整的大圖就不使用@media的值.
Ex：<link rel="stylesheet" href="css/lightbox.css" media="screen"/>
◆ Step 3. 打開Blogger的範本設計, 將上述三行放到 </head> 的上方, 或是在範本CSS裡上面開始的幾行看到 <link rel="stylesheet" ... 就放在它的後面跟著. 儲存版型後結束.
接著是如何在寫文章時實際操作?
建議是寫完文章, 圖片也編排好以後再切換到"HTML"編輯模式修改. 例如Blogger編輯器插入圖片後的html標籤碼, 加入以下紅字的部分即可.
<div class="separator" style="clear: both; text-align: center;">
<a data-lightbox="命名值" href="圖片網址" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" title="要顯示在燈箱下的文字部分, 不加文字則空白"><img border="0" height="xxx" src="縮圖網址" width="xxx" /></a></div>
data-lightbox這個元素是固定的, 其中的"命名值"方便區別其他圖片即可.
Ex：data-lightbox="fat-cat"
當幾個圖片"命名值"相同時就可以使用上一張、 下一張圖片的觀看方式.
最重要的是, 換了新的程式碼, 以前的舊文章依然可以有燈箱效果. * 記得要在設定中先關閉Blogger官方的燈箱效果.
至於 Wordpress Lightbox 燈箱效果, 我在 Wordpress 的博客使用的是 Fancybox, 請參考不同效果：Wordpress Lightbox 燈箱效果
