# [Bootstrap] Lightbox影像燈箱

###### tags: `Bootstrap`

主要功能是點選其中一張照片，該張照片會以燈箱方式展開

* 參考[官網](http://ashleydw.github.io/lightbox/)CDN進行安裝

* 結構分為兩層
* 外層<a>定義燈箱展示的照片，以及展示後的大小
* 內層<img>定義原始照片
* 在外層<a>使用bootstrap自定義的data-toggle設定啟用lightbox功能;data-lightbox將多張照片群組起來，在左右切換照片時可以辨識為同一群組的照片

* 新增程式碼至html裡使data-toggle串連lightbox

<a href="https://unsplash.it/1200/768.jpg?image=250" data-toggle="lightbox" data-title="A random title" data-footer="A custom footer text">
    <img src="https://unsplash.it/600.jpg?image=250" class="img-fluid">
</a>

* 最後添加jquery程式碼，避免預設效果，而採用引入的lightbox效果展示

$(document).on('click', '[data-toggle="lightbox"]', function(event) {
    event.preventDefault();
    $(this).ekkoLightbox();
});