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

下集會介紹「如何客製化燈箱效果」

如何客製化，做出自己想要的燈箱效果？

想修改Lightbox的預設樣式，請看官方網站上的 Options

把下圖中紅色框框處的程式碼，貼到自己的 all.js 裡面做集中管理

lightbox.option({
      'resizeDuration': 200,
      'wrapAround': true
    })

舉兩個可以客製化的選項為例：

resizeDuration
「點擊圖片」到「燈箱中出現圖片」所需要花費的時間（毫秒）
wrapAround
⭐️ 預設是「false」–> 當你有很多張圖片輪播，播到最後一張時，不會顯示向右的箭頭（無法回到第一張）
⭐️ 如果改成「true」–> 播到最後一張時，會顯示有向右的箭頭，而按了一下就會重複循環到第一張

打開燈箱，按右鍵「檢查」可以看到，html多了 “lightboxOverlay” 這個 div，這是 jQuery 自己動態加上去的html標籤（原本的html根本沒有）和對應的css，來做出燈箱效果。

如何客製化修改 lightboxOverlay

css 語法

.lightboxOverlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
    background-color: black;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
    opacity: 0.8;
    display: none;
}

[說明]

用以下三行做出滿版效果

1
2
3

position: absolute;
top: 0;
left: 0;

圖層在最上面
z-index: 9999;
半透明效果
opacity: 0.8;

以上這些值，都可以在 lightbox.css 的第 9 行做修改，點擊下圖中紅色箭頭處，先在「開發人員工具」做修改

如下圖，修改了「背景改為orange，透明度調整為0.5」之後，把紅色框框處的程式碼整段複製起來，貼到 lightbox.css 中（第9行）

就修改好 lightboxOverlay 樣式了！

如何客製化修改燈箱？

假如，我想要拿掉燈箱中，圖片下方的那兩行東西（文字＆圖片張數說明）在「開發人員工具」中，我看到它們是在 .lb-details 這個 div 裡面，就可以在右邊css欄位中加上 display: none; 讓它們消失。

點擊下圖中紅色箭頭處，進入 lightbox.css 預覽編輯

自行加上 display: none; 後，將整段程式碼複製貼到 lightbox.css 就修改好了！

❗️ 有可能會遇到這種情況：

我自己加上的display: none;沒有效果（被槓掉了），是因為它原本就在html裡面寫了style="display: block;"，權重是 style > class

該怎麼辦呢？因為我不知道怎麼去修改它的 javascript，所以我就在 display: none; 後面加上 !important （最高權限），強制把樣式給移除掉。

Q&A

Q:
燈箱出來的照片很小怎麼辦？

A:
lightbox 是呈現燈箱的效果，圖片大小是根據照片本身的大小，是在載入圖片時用 JS 去取得圖片寬高。

不建議將小張的圖片直接設置寬高調整為大張的圖片，這樣有可能會造成圖片模糊或變形。

比較好的做法是本身就使用較為大張的圖片哦

Q:
可以先載入官方的CSS，再載入自己的CSS去覆蓋特定的樣式嗎?

A:
是的，可以之後使用自己的 CSS 去覆蓋特定樣式

Q:
有點不是很清楚 JQuery 的 JS 和 lightbox 的 JS之間的關係

A:
因為它是使用 jQuery 函式庫寫成的第三方 plugin，所以要使用前要先引入 jQuery 才能使用 lightbox

Q:
我是使用lightbox.min.css，為什麼程式碼只有這樣？

A:
這個檔案本來就只有一行不過很長，你可以左右滾動試試看

Q:
Lightbox能做響應式嗎？

A:
可以喔，他在開啟時就會自動調整成畫面寬度

Q:
展開大圖出現在右下的X，我有使用檢查工具找到是在lb-closeContainer這個class，如果我想改變X的位置，讓他在右上角，應該如何操作?

A:
因為 CLOSE 的結構上這個元素是在下方所以不太能調整到上方如果對此還是有興趣可以參考 CSS flex (相關課程在 Bootstrap 有介紹)

.lightbox {
  display: flex;
  flex-direction: column-reverse;
}

Q:
請問<section>在什麼狀況下適用？

A:
<section> 是一個具有語意的內容。

舉例來說如果你有一個網站，用2~30個 div 都是拿來排版用的，但其中有一個區塊很有用，你希望 google 在收錄你的網頁時，可以優先收錄並提高 section 裡面的內容權重時，就可使用哩

Q:
這個套件的圖片讀取時間太久了，有沒有解決之道？

A:
如果點選大圖時間太長，表示你圖片過於大張哦，跟程式沒有關係，畢竟端看每個人的網路流量而訂的，

較好的建議是朝圖片解析度下手比較治本。

如何客製化，做出自己想要的燈箱效果？

Lightbox 是怎麼做出這些燈箱效果的？

如何客製化修改 lightboxOverlay

css 語法

如何客製化修改燈箱？

Q&A