【Swiper+Modaal】スライド画像をモーダルウィンドウで表示する

こんにちは、Ryohei（@ityryohei）です！

本記事では、SwiperとModaalを使用して、スライド画像をモーダルウィンドウで表示する方法とご紹介しています。

Swiperのスライド画像をモーダルウィンドウで表示したいんだけど、良い方法ないかな？

上記の疑問にお答えします。

では、解説していきます。

本記事で作成するもの

本記事では下記のデモの内容を作成します。スライドの画像をクリックすると選択した画像がモーダルウィンドウで表示されます。

See the Pen Swiper + Modaal by ryohei (@intotheprogram) on CodePen.

実装する方法は色々とありますが、本記事ではSwiperとModaalという2つのプラグインを使用して作成していきたいと思います。

Swiper・Modaalとは

SwiperはJavaScript、ModaalはjQueryで使用することができるプラグインです。

Swiper

SwiperはJavaScriptで動くスライダープラグインです。軽量で簡単に導入でき、オプションも豊富な人気のプラグインです。私も複数の案件で使用させてもらっています。

https://swiperjs.com/

Modaal

ModaalはjQueryで使用することができるプラグインです。簡単にモーダルウィンドウを実装することができます。シンプルなデザインで、デフォルトのままでも十分実用的です。

https://humaan.com/modaal/

今回は上記プラグインを使用して、スライドの画像をクリックしてモーダルウィンドウを表示するサンプルを作成していきます。

CDNでプラグイン本体を読み込む

プラグインを使用するので、まずは本体ファイルを読み込みます。Swiperは純粋なJavaScriptで動作するので気にしなくても良いですが、ModaalはjQueryのプラグインなので、jQuery本体→プラグインの順にファイルを読み込む必要があります。

順番としては下記のようになります。

<!-- CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Modaal/0.4.4/css/modaal.min.css">

<!-- ここにHTML -->

<!-- JS -->
<!-- Swiper -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Modaal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Modaal/0.4.4/js/modaal.min.js"></script>
<script>
    //JS
</script>

CSSファイルに順番は関係ないので、任意に読み込んでもらって大丈夫です。JSファイルはSwiper→jQuery→Modaalの順番に読み込みます。SwiperはjQueryの前後どちらでも構いません。お好みで読み込んでください。

SwiperとModaalのレイアウトを作成する

ファイルを読み込む準備ができたら、次にHTMLでレイアウトを作成します。Swiperの各スライドの中にModaalのタグを記述します。

HTML

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <a href="sample001.jpg" class="image" data-modaal-desc="画像1">
                <img src="sample001.jpg" alt="">
            </a>
        </div>
        <div class="swiper-slide">
            <a href="sample002.jpg" class="image" data-modaal-desc="画像2">
                <img src="sample002.jpg" alt="">
            </a>
        </div>
        <div class="swiper-slide">
            <a href="sample003.jpg" class="image" data-modaal-desc="画像3">
                <img src="sample003.jpg" alt="">
            </a>
        </div>
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

a要素のhref属性に指定された画像がモーダルウィンドウで開きます。子要素のimg要素のsrc属性に指定している画像と合わせることで、スライドの画像をモーダルウィンドウで表示させています。

以上でHTMLレイアウトの作成は完了です。

SwiperとModaalを初期化する

次にSwiperとModaalを初期化して、動作するようにしていきます。冒頭でご紹介したプラグインの公式サイト内にある例を参考にスクリプトを記述していきます。

JS

//Swiper
const swiper = new Swiper('.swiper-container', {
    slidesPerView: 1,
    centeredSlides: true,
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
});

//Modaall
$('.image').modaal({
    type: 'image'
});

JavaScriptとjQueryが混在しているので少しむず痒い気もしますが、問題なく動作します。

一応ここまででデモの内容は完成ですが、要素ごとに紹介してきたので、最後に本記事の内容をまとめます。

本記事でご紹介したソース

下記は本記事でご紹介した全体のソースです。CDNのリンクが切れていなければコピペでも動作しますので、画像のパスを差し替えてご使用ください。

<!-- CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Modaal/0.4.4/css/modaal.min.css">

<!-- HTML -->
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <a href="sample001.jpg" class="image" data-modaal-desc="画像1">
                <img src="sample001.jpg" alt="">
            </a>
        </div>
        <div class="swiper-slide">
            <a href="sample002.jpg" class="image" data-modaal-desc="画像2">
                <img src="sample002.jpg" alt="">
            </a>
        </div>

        <div class="swiper-slide">
            <a href="sample003.jpg" class="image" data-modaal-desc="画像3">
                <img src="sample003.jpg" alt="">
            </a>
        </div>
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

<!-- JS -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Modaal/0.4.4/js/modaal.min.js"></script>
<script>
//Swiper
const swiper = new Swiper('.swiper-container', {
    slidesPerView: 1,
    centeredSlides: true,
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
});

//Modaall
$('.image').modaal({
    type: 'image'
});
</script>