Web-saku Web-sakuではweb作成に関する情報をお届けしていきます!

"LightBox2"サンプルコード

ファイル構成

ファイル構成は下の図のようになっています。
今回は、「images」フォルダはダウンロードしたものをそのままサイトに設置し、サムネイルに使用する画像は「img」フォルダに置きました。

root_folder/
            ├── css/
            |   ├── lightbox.min.css
            |   └── style.css
            ├── images/
            |   ├── close.png
            |   ├── loading.gif
            |   ├── next.png
            |   └── prev.png
            ├── img/
            ├── index.html
            └── js/
                └── lightbox-plus-jquery.min.js
                

HTML記述例

HTML

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Lightbox2-Sample</title>
<link rel="stylesheet" href="css/lightbox.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
    <h1>"Lightbox2"動作サンプル</h1>
    <p>"<a href="https://lokeshdhakar.com/projects/lightbox2/" target="_blank" rel="noopener nofollow">Lightbox2</a>"を使用してサムネイルを拡大してポップアップ表示させるサンプルです。</p>
    <div class="image-box">
        <a href="img/house.jpg" data-lightbox="images" data-title="家"><img class="thumbnail" src="img/house.jpg"></a>
        <a href="img/mountain.jpg" data-lightbox="images" data-title="山"><img class="thumbnail" src="img/mountain.jpg"></a>
        <a href="img/pillar.jpg" data-lightbox="images" data-title="柱"><img class="thumbnail" src="img/pillar.jpg"></a>
        <a href="img/sea.jpg" data-lightbox="images" data-title="海"><img class="thumbnail" src="img/sea.jpg"></a>
        <a href="img/splash.jpg" data-lightbox="images" data-title="滝"><img class="thumbnail" src="img/splash.jpg"></a>
        <a href="img/sunset.jpg" data-lightbox="images" data-title="夕焼け"><img class="thumbnail" src="img/sunset.jpg"></a>
    </div>

<script src="js/lightbox-plus-jquery.min.js"></script>
<script>
    lightbox.option({
        'fadeDuration': 700,
        'imageFadeDuration': 1800,
        'resizeDuration': 300,
        'alwaysShowNavOnTouchDevices': true,
        'wrapAround': true
    })
</script>
<!-- The MIT License (MIT) Copyright (c) 2015 Lokesh Dhakar -->

</body>
            

CSS記述例(LightBox2の部分のみ)

CSS

.image-box {
    width: 85%;
    margin: 0 auto 100px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
}

@media (min-width: 768px) {
    .image-box {
        grid-template-columns: repeat(3, 1fr);
        justify-items: center;
    }
}

@media (min-width: 1024px) {
    .image-box {
        grid-template-columns: repeat(6, 1fr);
        justify-items: center;
    }
    
}

.thumbnail {
    width: 130px;
    height: 130px;
}

動作サンプルはこちら

"LightBox2"の使い方などはこちら