要顯示圖片就一定唔少得用 Lightbox 之類的東西，所以係 Blogger 呢度都係要加入返個先似返啲樣。

比較個咁多款易用程度同埋功能來講，Fslightbox 都係最方便同埋好用的表表者。

官方網站 : https://fslightbox.com/

### 用法

因為 Blogger 係 Vanilla JS，所以最直接就係去搵人地啲 CDN 返來用就最方便。

CDN 地址 : https://cdnjs.com/libraries/fslightbox/3.4.1

將下面呢個直接貼入去你個 Blogger `</body>` 上面一行就搞掂。

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/fslightbox/3.4.1/index.min.js" integrity="sha512-BD6B4tou7H7CWpfaXthxgqwk7kHs/rPDEk9GD/Rvbx0sCOUdqtrvlBP/o64EmdP5lnGOS4j4FTcn0iPJx6bVCw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
```

如果係純 Js 用就好簡單，用返 `document.querySelectorAll()` 抽返晒你文中的所有 `<img>` 出來，然後用 `getAttribute('src')` 抽出圖片的來源網址備用。

```js
// 建立 Fslightbox 的實體
const lightbox = new FsLightbox();

// 設定來源的類別
lightbox.props.type = 'image';

// 設定來源
lightbox.props.sources = imagesData.map(image => image.src);

// 開啟 lightbox
lightbox.open();
```

### 如何抽出文中的所有 `<img>` 來源網址

上面講到要抽出文中的所有 `<img>` 來源網址，其實都好簡單，今日今日 (2024年) Vanilla Js 先係皇道，所以就用 Vanilla Js 去做。

```js
// get all target elements
const imageElements = document.querySelectorAll(`img`);

// pluck all src
const sources = imageElements.map(imageElement => imageElement.getAttribute('src'));
```

咁樣你個 `sources` 就已經有晒所文中所有的 `<img>` 來源網址了。