###### tags: `學習` `套件` `lightbox`
# Lightbox使用簡易說明
## 在codepen上使用
1.到[cdn.js-lightbox](https://cdnjs.com/libraries/lightbox2)複製.js與.css
2.codepen記得載入jQuery
## 在VScode上使用
1.到[lightbox的github](https://github.com/lokesh/lightbox2/releases)下載
2.解壓縮後按照檔案的位置如下圖

**注意**
1.要載入jQuery 2.x以上版本才能給較新的遊覽器使用
2.修改lightbox.css內的圖片位置，圖為原始設定，如果圖片位置有更動西要手動修改，需要修改所有圖片的位置

## lightbox 屬性的簡易說明
1.data-lightbox="名稱" 可以看做是給圖片名稱，如果給的是不同名稱，圖片只有單純燈箱效果，不會連播，如果名稱相同則會連播
2.data-title="" 看作是在燈箱效果下，對圖片的說明或是圖片的名稱，非必要

[lightbox範例](http://localhost:8080/lightbox.html)

3.其他:lightbox可以使用壓縮過的圖片，放在網頁展示，直到使用者對圖片有興趣再透過a連結到大圖，這樣子可以增加網頁載入的速度與節省流量