Blogger 使用 Lightbox 燈箱效果

9   Comments

moon festival
演示圖片的 Lightbox 2 已經廣泛地使用好多年了, 不過它的開發者並沒有繼續更新JavaSript, 僅在2012年重新整理了下載頁面. 但隨著jQuery資料庫的發展, 被當作開源碼而有了現在各種燈箱效果的設計.
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" ... 就放在它的後面跟著. 儲存版型後結束.

lightbox 2.6

接著是如何在寫文章時實際操作?
建議是寫完文章, 圖片也編排好以後再切換到"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 燈箱效果


Author Summary
Blogger 使用 Lightbox 燈箱效果
Subject : Blogger 使用 Lightbox 燈箱效果
Author : - Dream Talker Updated at: 8:40 PM
Votes : 100% - 5.0 - based on 2015
Blogger如何使用 Lightbox 燈箱效果的jquery插件,新版適用於lightbox2
5 Stars - Reviews
留言提示 - Comment Tips
◆ 如果您有任何想法或意見,歡迎參與留言。
◆ Disqus匿名留言,信箱及個人資訊不會公開顯示。
◆ 請多使用社群帳號留言,可簡化流程並訂閱回復。
◆ 『私密留言』請使用Google+分享按鍵,留言須使用『@Mark X』在訊息中,以免遺漏通知。
◆ G+ 訊息中指名分享對象的參考文件: 『 說明
  • Disqus
  • Blogger
  • Facebook
Anonymous left your nick please
  1. Anonymous6:29 PM

    版主你好,請問要怎樣換箭頭和關閉符號的顏色?

    ReplyDelete
    Replies
    1. 請回到原作者網頁下載檔案, 參考"How to use"第四點close.png等圖檔換成自己的圖樣設計並上傳取得網址. 在CSS文件中找到同名的圖檔網址取代.

      Delete
  2. @Mark 要怎樣才能不必關掉燈箱繼續看下一張呢? 謝啦!

    ReplyDelete
    Replies
    1. data-lightbox="命名值" 使用相同的命名值即可

      Delete
    2. @Mark 您瞧我這人怎麼搞的沒說清楚 XD
      我想要像簡報那樣,只有第一張圖秀出來,後面的圖按下一張才看得到.
      表面上只看得到一張圖而已,這樣講不知道明白嗎?

      Delete
    3. 是否像這篇範例:Facebook Email

      <a data-lightbox="命名值" href="第二張圖網址"><img src="表面第一張圖網址"/><a/><a data-lightbox="命名值" href="第三張圖網址"></a><a data-lightbox="命名值" href="第四張圖網址"></a> ...

      不過這種用法對於新訪客來說需要引導後才知曉, 不是很建議.

      Delete
    4. @Mark 對! 就是這個!
      我這樣講你就懂我的意思 Super~ 甘蝦

      Delete
  3. Anonymous7:03 PM

    你好, 文章中有一段寫--已有使用jQuery程式庫者, 無需重複申裝"jquery-1.10.2.min.js"
    我的blogger css裡面有-- script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"
    所以step2那三個連結可以刪除這一項嗎?-- src="js/jquery-1.10.2.min.js"

    不知道你看懂嗎?
    留言想放程式語法,但跳出警告像這樣--您的 HTML 不被接受: 不允許使用的標記: SCRIPT

    ReplyDelete
    Replies
    1. 是的, 無需重複安裝 jQuery 程式庫, 以後如更換 jquery.min.js 新版本亦同.
      關於在留言中無法使用程式碼或語法, 請利用編碼器將 HTML 的部份編碼: HTML 編碼器

      Delete