【2021/9/18】登録不要の見積書作成ツール
「SPEEC」を公開しました!

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

こんにちは、ryohei(@ityryohei)です!

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

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

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

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

本記事で作成するもの

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

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

実装する方法は色々とありますが、本記事ではSwiperModaalという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ファイルはSwiperjQueryModaalの順番に読み込みます。SwiperjQueryの前後どちらでも構いません。お好みで読み込んでください。

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を初期化する

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

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>

最後に

スライダーとモーダルを組み合わせて実装するケースは多いです。jQueryが使用できる環境であれば、Modaalは使い勝手の良いプラグインですので、使用してみてくださいね。

以上、Swiper+Modaalでスライド画像をモーダルウィンドウで表示する方法のご紹介でした!

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。

短期間でプログラミングを習得してエンジニアになろう!

エンジニアに転職を考えている方、独学で勉強中の方必見!CodeCampなら自宅にいながら実務経験があるエンジニアからマンツーマンで指導してもらうことができます。実践的なスキルを習得して一日でも早いエンジニアデビューを目指しましょう。まずは無料体験から!

CodeCamp 公式サイトへ

おすすめの書籍