【コピペで簡単】画像のギャラリー表示機能を実装【Lightbox】

- プログラミング -
2019.10.23
lightboxコピペでギャラリー

Sassの練習でWebサイト模写をしていたら、「Lightbox」という簡単にギャラリー表示が実装できるJavaScriptライブラリに出会いました。

画像が格子状に並んでいて、画像をクリックするとフワッと浮き出て画面に大きく表示されるよくあるやつですね。

まずは以下、Lightboxのデモを用意したので画像をクリックした時の動きを見てみてください。

See the Pen
lightbox-gallery
by Yuki (@RFedNo1)
on CodePen.

かなり便利そうなので、コピペ10秒でこの機能を使いまわせるように、スクリプトをメモしておきます。

コピペで即体感!Lightboxで画像ギャラリー表示

  1. 以下スクリプトをコピー(ボックス右上にコピーボタンがあります)
  2. htmlファイルへペースト

これだけで、デモと同じようなギャラリーが表示されます。

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/css/lightbox.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/js/lightbox.min.js"
        type="text/javascript"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .gallery__list {
            list-style-type: none;
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
        }

        .gallery__item {
            width: calc(95% / 2);
        }

        .gallery__item:not(:nth-child(-n+2)) {
            margin-top: 20px;
        }

        .gallery__item img {
            width: 100%;
            height: auto;
        }

        .gallery__item a {
            transition: .5s;
        }

        .gallery__item a:hover {
            filter: opacity(0.7);
        }

        .gallery__item a:hover img {
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
        }
    </style>
</head>
<body>
    <section class="gallery">
        <h2 class="section__title">フォトギャラリー</h2>
        <ul class="gallery__list">
            <li class="gallery__item">
                <a href="https://cdn.pixabay.com/photo/2016/07/28/02/02/greece-1546902_960_720.jpg"
                    data-lightbox="group1" data-title="1枚目の画像">
                    <img src="https://cdn.pixabay.com/photo/2016/07/28/02/02/greece-1546902_960_720.jpg" alt="">
                </a>
            </li>
            <li class="gallery__item">
                <a href="https://cdn.pixabay.com/photo/2019/07/14/10/48/mosel-4336787_960_720.jpg"
                    data-lightbox="group1" data-title="2枚目の画像">
                    <img src="https://cdn.pixabay.com/photo/2019/07/14/10/48/mosel-4336787_960_720.jpg" alt="">
                </a>
            </li>
            <li class="gallery__item">
                <a href="https://cdn.pixabay.com/photo/2019/07/12/18/59/woman-4333420_960_720.jpg"
                    data-lightbox="group1" data-title="3枚目の画像"><img
                    src="https://cdn.pixabay.com/photo/2019/07/12/18/59/woman-4333420_960_720.jpg" alt="">
                </a>
            </li>
            <li class="gallery__item">
                <a href="https://cdn.pixabay.com/photo/2019/07/15/12/10/old-tree-4339191_960_720.jpg"
                    data-lightbox="group1" data-title="4枚目の画像"><img
                    src="https://cdn.pixabay.com/photo/2019/07/15/12/10/old-tree-4339191_960_720.jpg" alt="">
                </a>
            </li>
        </ul>
    </section>
</body>

あとは、CSSスタイリングを<style>タグ内に書き込んでいるので、必要に応じて別CSSファイルとして切り出したり、画像を差し替えたり、環境に合わせていろいろ変えてみてください。

以下サイトを参考にさせていただきました。

LightBoxで簡単にギャラリーの実装ができたので導入と使い方メモ

【爆速】HTML + Sass(SCSS)で簡単にレスポンシブ対応のLPを作ろう!