Lightbox - Webflow 幫助
使用 lightbox 元素在全螢幕模態窗口中顯示圖片或影片。
如何創建 lightbox
Lightbox 是嵌套在連結塊中的可點擊縮圖。當網站訪客在現場網站上點擊連結邊界內時，lightbox 會打開以顯示與其連接的媒體。您可以從 添加面板 > 高級 添加 lightbox。
lightbox 佔位符縮圖的工作原理
Lightbox 包含一個圖像元素，其行為與其他圖像元素相同。您可以調整其大小，雙擊以替換佔位符縮圖，並添加替代文字。了解更多關於圖像元素。
您可以將相同的圖像用於 lightbox 縮圖和較大的 lightbox 模態窗口。Webflow 自動為所有內聯圖像創建響應式變體。了解更多關於響應式圖像。
如何用其他內容替換 lightbox 縮圖
您可以替換佔位符圖像元素，並將其他內容（例如標題或任何其他非連結元素）拖放到 lightbox 連結 中。
您還可以使用 div 塊 並應用背景圖像來創建等大小的圖像縮圖。
如何設計 lightbox
您可以為燈箱連結及其內容設計樣式。例如，如果您在燈箱連結中嵌套了文字元素，您可以設計燈箱連結元素的字體樣式。
如何添加燈箱媒體
要在燈箱模態視窗中添加圖片和說明：
- 在畫布上選擇燈箱連結
- 前往元素設定面板 > 燈箱連結設定 > 媒體
- 點擊“添加列表項目”圖標
- 選擇“圖片”作為類型
- 點擊替換圖片
- 從資產面板中選擇一張圖片
- 如有需要，添加說明
您可以在燈箱連結中添加任意多的圖片。這些圖片將在燈箱模態視窗中以幻燈片形式顯示。
要在燈箱模態視窗中添加影片：
- 在畫布上選擇燈箱連結
- 前往元素設定面板 > 燈箱連結設定 > 媒體
- 點擊“添加列表項目”圖標
- 選擇“影片”作為類型
- 在URL欄位中添加影片的網址
- 如有需要，添加標題
圖片和影片的燈箱 - 網頁設計教程
如何從集合欄位媒體創建動態燈箱
您可以通過從媒體集合欄位（例如圖片欄位、多圖片欄位或影片欄位）中提取縮圖和/或燈箱媒體來創建動態燈箱。
要將動態集合欄位連接到燈箱縮圖：
- 將燈箱添加到動態連接的集合列表或 CMS 集合頁面
- 選擇佔位符縮圖
- 前往元素設定 > 圖片設定
- 在圖片欄位中點擊“紫色點”圖標
- 選擇一個圖片集合欄位
然後，您可以將燈箱連接到集合欄位，這樣您的動態集合圖片就可以在燈箱中使用。要將動態集合欄位連接到燈箱媒體：
- 選擇燈箱連結
- 前往元素設定 > 燈箱連結設定
- 點擊媒體欄位中的「紫色點」圖標
- 選擇一個媒體集合欄位
要將燈箱連接到多圖片欄位：
- 在集合頁面中添加一個集合列表
- 點擊來源下拉選單並選擇多圖片欄位，將集合列表連接到多圖片欄位
- 在集合列表中添加一個燈箱
- 選擇燈箱中的圖片元素
- 前往元素設定 > 圖片設定
- 點擊圖片欄位中的「紫色點」圖標
- 選擇多圖片欄位
- 在畫布上選擇燈箱連結
- 前往元素設定 > 燈箱連結設定
- 點擊媒體欄位中的「紫色點」圖標
- 選擇多圖片欄位
當燈箱被添加到集合列表或集合頁面時，您也可以將燈箱連接到multi-image field。
如何使用燈箱群組連接燈箱
您可以將多個燈箱連接在一起以創建幻燈片畫廊。當網站訪客點擊已連接的燈箱時，燈箱將打開與該群組相關的所有媒體。
如何創建燈箱群組
- 選擇燈箱中的任意元素
- 前往元素設定 > 燈箱設定
- 在匹配或創建群組名稱欄位中輸入群組名稱
使用相同群組名稱的燈箱會被連接在一起。
對於集合列表中的燈箱，在集合項目中創建並連接一個燈箱會自動連接集合列表中的所有燈箱。
在頁面上創建多個燈箱群組
如果在同一頁面上有多個燈箱，您可以通過為每個燈箱組分配不同的組名來將它們分開。