モーダル付き画像スライダーをjQueryで実装する方法

Posted on by

ウェブサイトで画像スライダーを使用することは、視覚的に訴求力を高めるために非常に効果的です。
しかし、画像をさらに詳細に見せたい場合、クリックで画像を拡大表示する
モーダル機能を追加することができます。
この記事では、jQueryを使用してスライダーとモーダルを組み合わせた機能を実装する方法を、
詳しく解説していきます。

HTML構造の準備

まず、スライダーとモーダルのHTML構造を準備します。
スライダー部分には画像を表示し、各画像をクリックすることでモーダルが表示されるようにします。
モーダルは画面中央に拡大画像を表示するための要素です。

<div class="represent_slick04">
    <div class="represent_slick04__item"><img src="https://teach.web-represent.link/wp-content/uploads/2024/03/sample01.jpg" alt="スリックスライダーサンプル"></div>
    <div class="represent_slick04__item"><img src="https://teach.web-represent.link/wp-content/uploads/2024/03/sample02.jpg" alt="スリックスライダーサンプル"></div>
    <div class="represent_slick04__item"><img src="https://teach.web-represent.link/wp-content/uploads/2024/03/sample03.jpg" alt="スリックスライダーサンプル"></div>
    <div class="represent_slick04__item"><img src="https://teach.web-represent.link/wp-content/uploads/2024/03/sample04.jpg" alt="スリックスライダーサンプル"></div>
</div>

<!-- モーダルの要素 -->
<div id="imageModal" class="modal">
    <span class="close">&times;</span>
    <img class="modal-content" id="modalImage">
</div>

このようにHTMLを構成します。represent_slick04クラスはスライダー全体を包む要素で、
各画像はrepresent_slick04__itemクラスの中に配置されています。
モーダル部分は最初は非表示状態で、クリックイベントによって表示されるようにします。

CSSでモーダルをスタイリング

次に、モーダルのスタイルをCSSで設定します。
モーダルは全画面表示されるようにし、背景を暗くすることでフォーカスを当てます。

/* モーダルのスタイル */
.modal {
    display: none; /* デフォルトで非表示 */
    position: fixed;
    z-index: 1000;
    padding-top: 60px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9);
}

.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

モーダルのdisplayプロパティは、初期状態ではnoneに設定されており、
画像がクリックされた際にblockに変更されます。
背景色は半透明の黒(rgba(0, 0, 0, 0.9))で、
モーダルの外側をクリックすると閉じるように設定しています。

jQueryでスライダーとモーダルを動作させる

次に、スライダーの初期化とモーダルの動作をjQueryで実装します。
以下のコードを使用して、スライダーとモーダルの動作を管理します。

$(function () {
    $(".represent_slick04").slick({
        autoplay: true,
        centerMode: true,
        centerPadding: '0px',
        slidesToShow: 1,
        dots: true,
        arrows: false,
    });

    // クリックイベントでモーダルを開く
    $('.represent_slick04__item img').click(function () {
        var src = $(this).attr('src'); // クリックされた画像のsrcを取得
        $('#modalImage').attr('src', src); // モーダルの画像をクリックされた画像に変更
        $('#imageModal').css('display', 'block'); // モーダルを表示
    });

    // モーダルを閉じる
    $('.close').click(function () {
        $('#imageModal').css('display', 'none');
    });

    // モーダルの外側をクリックしたときも閉じる
    $(window).click(function (event) {
        if (event.target.id === "imageModal") {
            $('#imageModal').css('display', 'none');
        }
    });
});

jQueryの実装内容の解説

このjQueryコードでは、まず.slick()を使ってスライダーを初期化しています。
autoplayオプションにより、スライダーが自動的に再生され、
centerModeとcenterPaddingで中央に配置されるようにしています。
slidesToShowを1に設定することで、スライドごとに1枚の画像が表示される設定です。

次に、画像をクリックした際の処理をclick()イベントで設定します。
クリックされた画像のsrcを取得し、モーダル内の画像にそのsrcを設定します。
その後、モーダルを表示するためにdisplayプロパティをblockに変更しています。

モーダルを閉じるためには、closeクラスを持つ要素をクリックするか、
モーダルの外側をクリックしたときにモーダルを非表示にします。
これにより、ユーザーは簡単にモーダルを閉じることができます。

応用: 複数のスライダーやモーダルの管理

もしページ内に複数のスライダーやモーダルを配置したい場合、
それぞれに異なるIDやクラスを付与し、それに応じたjQueryコードを追加することで、
各スライダーやモーダルを独立して管理できます。
このようにすることで、ページ全体の動作をよりカスタマイズしやすくなります。

例えば、特定のスライダーにだけ異なる動作をさせたい場合、次のようにIDを使って管理できます。

$("#uniqueSlick").slick({
    // 異なるオプションを設定
});

このようにすることで、uniqueSlickというIDを持つ要素にだけ特別な設定を適用することができます。

まとめ

このブログ記事では、jQueryを使用して画像スライダーとモーダルを
組み合わせた機能を実装する方法を紹介しました。
スライダーを使うことで、視覚的に魅力的なコンテンツを提供でき、
さらにモーダルを追加することでユーザーに詳細な画像を見せることが可能になります。

この実装を通じて、ウェブサイトのユーザー体験を向上させることができるでしょう。
さらに応用すれば、複数のスライダーやモーダルを効果的に管理することも可能です。
この記事を参考に、あなたのウェブサイトに素晴らしい視覚効果を加えてください。