Bootstrap-使用Lightbox影像燈箱

Posted on April 4, 2019 本文总阅读量次

bootstrap-使用Lightbox影像燈箱

什麼是Lightbox？

網路上有多種他人設計好的燈箱插件，通常都是響應式jQuery燈箱函式庫，用來快速建立及設計漂亮的彈出式影像燈箱，優化網頁中photo gallery的展示效果。
引入Lightbox
參考lightbox for bootstrap的指令，首先將cdn複製到專案中

CSS
放在<head>中

1	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.css" />

JS
放在<body>結束前

1	<script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.min.js"></script>

概念

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

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

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

實作

 <div class="container">
    <div class="row">
        <div class="col-4">
            <a href="https://mymodernmet.com/wp/wp-content/uploads/2017/12/free-images-national-gallery-of-art-2.jpg" 
            data-toggle="lightbox" data-gallery="img-gallery" data-height="560" data-width="560">
                <img src="https://mymodernmet.com/wp/wp-content/uploads/2017/12/free-images-national-gallery-of-art-2.jpg" alt="" class="img-fluid">
            </a>
        </div>
        <div class="col-4">
            <a href="https://mymodernmet.com/wp/wp-content/uploads/2017/12/free-images-national-gallery-of-art-3.jpg" 
                    data-toggle="lightbox" data-gallery="img-gallery" data-height="560" data-width="560">
                <img src="https://mymodernmet.com/wp/wp-content/uploads/2017/12/free-images-national-gallery-of-art-3.jpg" alt="" class="img-fluid">
            </a>
        </div>
        <div class="col-4">
            <a href="https://mymodernmet.com/wp/wp-content/uploads/2017/12/free-images-national-gallery-of-art-7.jpg" 
            data-toggle="lightbox" data-gallery="img-gallery" data-height="560" data-width="560">
                <img src="https://mymodernmet.com/wp/wp-content/uploads/2017/12/free-images-national-gallery-of-art-7.jpg" alt="" class="img-fluid">
            </a>
        </div>
    </div>
</div>

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

成果

My Project-MoMA Museum-Collection page

bootstrap-使用Lightbox影像燈箱

什麼是Lightbox？

引入Lightbox

概念

實作

成果