Bootstrap_Lightbox影像燈箱

本文总阅读量次

主要功能是點選照片，該張照片會以燈箱方式全版展開，提升觀看體驗，請參考Lightbox for Bootstrap進行安裝

結構分為兩層

  • 外層定義燈箱展示的照片，以及展示後的大小
  • 內層定義原始照片

在外層使用bootstrap自定義的data-toggle設定啟用lightbox功能;data-lightbox將多張照片群組起來，在左右切換照片時可以辨識為同一群組的照片

  • 新增程式碼至html裡使data-toggle串連lightbox
1
2
3
<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效果展示
1
2
3
4
$(document).on('click', '[data-toggle="lightbox"]', function(event) {
    event.preventDefault();
    $(this).ekkoLightbox();
});

實作

燈箱畫冊: 運動頻道