Javascript

【Javascript】シンプルで使いやすいライトボックススクリプトbaguetteBox

June 3, 2018
baguetteBox.js

baguetteBoxシンプルで使いやすいライトボックススクリプト

Manually

baguetteBox.min.cssbaguetteBox.min.jsをインクルード

<link rel="stylesheet" href="css/baguetteBox.min.css">
<script src="js/baguetteBox.min.js" async></script>

Usage

スクリプトを初期化

baguetteBox.run('.gallery');

HTMLコード

<div class="gallery">
    <a href="img/2-1.jpg" data-caption="Image caption">
        <img src="img/thumbnails/2-1.jpg" alt="First image">
    </a>
    <a href="img/2-2.jpg">
        <img src="img/thumbnails/2-2.jpg" alt="Second image">
    </a>
    ...
</div>

MIT