Lightbox 2 - 圖片燈箱效果（上）

Posted on In

上集會從「如何載入 Lightbox」開始講起

如何載入Lightbox？

  1. 先到官網下載zip檔案，

接著到/dist資料夾中，把Lightbox的css、js 和 img檔案放入自己專案的css、js、images資料夾中
📕 有".min"的檔案代表是被壓縮過的，檔案比較小

⭐️ css 抓這支
dist/css/lightbox.css

⭐️ js 抓這支
dist/js/lightbox.min.js

官方文件上寫「If you already use jQuery on your page, make sure it is loaded before lightbox.js. jQuery 1.7 or greater is required.」

目前我使用的jQuery版本是 v3.3.1，所以我要抓/dist資料夾中的lightbox.js，使用有.min的檔案較小

⭐️ 把圖片放入images資料夾
dist/images/圖片

  1. 載入 Lightbox CSS
    Include the CSS at the top of your page in your <head> tag:
1
<link rel="stylesheet" href="path/to/lightbox.css" >

  1. 載入 Lightbox Javascript
    Include the Javascript at the bottom of your page before the closing </body> tag:
1
<script src="path/to/lightbox.js"></script>

❗️ 老師不是說 Javascript 要載入在裡面嗎？為什麼這裡說要放在尾巴前面？

會這麼做的用意是：希望前面的html內容全部被載好之後，再來載入 Lightbox 的 Javascript，這樣執行時才會針對網頁中的圖片和連結做處理。

利用HTML觸發燈箱效果

單張圖片

把包有img的a連結，新增一個data-lightbox 的 attribute 來觸發燈箱效果。每張獨立的圖片，data-lightbox必須命名為不同的值，例如以下範例，data-lightbox分別為「pic-1」、「pic-2」


兩張為獨立的圖片，沒辦法左右輪播

Optional:

  • 燈箱圖片下方的說明文字：Add a data-title attribute if you want to show a caption.
  • Add a data-alt attribute if you want to set the alt attribute of the linked image.

For example:

1
<a href="images/image-1.jpg" data-lightbox="image-1" data-title="My caption">Image #1</a>

一組圖片輪播

如果是有多張圖片為一組，要左右輪播，就將每張圖片的data-lightbox命名為相同的值，例如以下範例：data-lightbox都是「pic-1」

就可以左右輪播了！

為什麼可以利用HTML觸發燈箱效果？

只要在 html 有加上 data-lightbox 屬性，它就會判定「在點擊時會抓 href 裡的路徑去顯示在燈箱中，這是 lightbox 的規則。

❗️ href 那裡是寫「燈箱裡面大圖的圖片路徑連結」

  • 假如大圖是放在電腦的 images 資料夾裡面，那 href 就寫 href="images/xx.png"
  • 假如大圖是放在網路上，那 href 就寫圖片連結，例如： href="http://lokeshdhakar.com/projects/lightbox2/images/image-1.jpg"

為什麼需要做燈箱效果？

這樣可以在 img 放小圖（使用者開啟網頁時，就不會等很久），大圖就放在a連結的href裡面，點擊圖片出現燈箱時，再去載入大張的圖片。這樣對網頁效能和流量，都是比較好的。

  • 用「檢查」看img的src，可以看到小圖尺寸（只有250 x 157px）
  • a連結的href，按右鍵開啟，可以看到大圖尺寸（1250 x 784px）

Q&A

Q:
為什麼在課程影片(8:50)中，老師是說要抓lightbox-plus-jquery.js 呢？（老師使用的jQuery版本為2.0，有大於1.7）

A:
影片中是因為範例中還沒有使用 JQuery ，所以採用了 lightbox-plus-jquery.js

lightbox-plus-jquery.js 你打開看會發現它其實就是 JQuery + lightbox.js 合併成一支 javascript 檔案

Q:
data attribute
像data-lightbox、data-title 這些屬性是如何產生的?

A:
data-* 是屬於 HTML5 的屬性而 jQuery 也有支援該屬性的語法以下文件可以參考看看：
https://api.jquery.com/data/

所以 jQuery 的套件也一樣能使用這些屬性

Q:
課程影片當中Javascript的路徑，有一個 …/dist …
那個 「…/」是什麼意思呀？

A:
這是「相對路徑與絕對路徑」的觀念
"…/" 在此意指目前路徑的上一層相關文章可參考：https://sites.google.com/site/joyhsuclub/dreamweaver/path