CodePen Embed - 画像クリックのモーダル表示

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<ul class="img_list img_wrap" randomPh="3">
    <li class="item slideshow img_box">
        <div class="img js_modal_open" data-type="a_list-1">
            <img src="http://fnnyxe.com/wp-content/uploads/2024/10/29386534_s.jpg" alt="">
        </div>
        <div class="img js_modal_open" data-type="a_list-2">
            <img src="http://fnnyxe.com/wp-content/uploads/2024/10/29840337_s.jpg" alt="">
        </div>
        <div class="img js_modal_open" data-type="a_list-3">
            <img src="http://fnnyxe.com/wp-content/uploads/2024/10/29915166_s.jpg" alt="">
        </div>
        <div class="img js_modal_open" data-type="a_list-4">
            <img src="http://fnnyxe.com/wp-content/uploads/2024/10/30515501_s.jpg" alt="">
        </div>
        <div class="img js_modal_open" data-type="a_list-5">
            <img src="http://fnnyxe.com/wp-content/uploads/2024/10/31016427_s.jpg" alt="">
        </div>
    </li>
    <li class="item slideshow img_box">
        <div class="img js_modal_open" data-type="a_list-5">
            <img src="http://fnnyxe.com/wp-content/uploads/2024/10/31016427_s.jpg" alt="">
        </div>
        <div class="img js_modal_open" data-type="a_list-1">
            <img src="http://fnnyxe.com/wp-content/uploads/2024/10/29386534_s.jpg" alt="">
        </div>
        <div class="img js_modal_open" data-type="a_list-3">
            <img src="http://fnnyxe.com/wp-content/uploads/2024/10/29915166_s.jpg" alt="">
        </div>
        <div class="img js_modal_open" data-type="a_list-2">
            <img src="http://fnnyxe.com/wp-content/uploads/2024/10/29840337_s.jpg" alt="">
        </div>
        <div class="img js_modal_open" data-type="a_list-4">
            <img src="http://fnnyxe.com/wp-content/uploads/2024/10/30515501_s.jpg" alt="">
        </div>
    </li>
    <li class="item slideshow img_box">
        <div class="img js_modal_open" data-type="a_list-3">
            <img src="http://fnnyxe.com/wp-content/uploads/2024/10/29915166_s.jpg" alt="">
        </div>
        <div class="img js_modal_open" data-type="a_list-2">
            <img src="http://fnnyxe.com/wp-content/uploads/2024/10/29840337_s.jpg" alt="">
        </div>
        <div class="img js_modal_open" data-type="a_list-5">
            <img src="http://fnnyxe.com/wp-content/uploads/2024/10/31016427_s.jpg" alt="">
        </div>
        <div class="img js_modal_open" data-type="a_list-4">
            <img src="http://fnnyxe.com/wp-content/uploads/2024/10/30515501_s.jpg" alt="">
        </div>
        <div class="img js_modal_open" data-type="a_list-1">
            <img src="http://fnnyxe.com/wp-content/uploads/2024/10/29386534_s.jpg" alt="">
        </div>
    </li>
</ul>

<div class="js_modal_area">
    <div class="modal js_modal js_modal_box1">
        <div class="modal__bg js_modal_close"></div>
        <div class="js_modal_content modal__content" id="a_list-1">
            <span class="js_modal_close" href="">×</span>
            <div class="img_box">
                <img src="http://fnnyxe.com/wp-content/uploads/2024/10/29386534_s.jpg" alt="">
            </div>
            <div class="ttl_area">
                <p class="head">見出し</p>
            </div>
            <p class="text">ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
        </div>

        <div class="js_modal_content modal__content" id="a_list-2">
            <span class="js_modal_close" href="">×</span>
            <div class="img_box">
                <img src="http://fnnyxe.com/wp-content/uploads/2024/10/29840337_s.jpg" alt="">
            </div>
            <div class="ttl_area">
                <p class="head">見出し</p>
            </div>
            <p class="text">ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
        </div>

        <div class="js_modal_content modal__content" id="a_list-3">
            <span class="js_modal_close" href="">×</span>
            <div class="img_box">
                <img src="http://fnnyxe.com/wp-content/uploads/2024/10/29915166_s.jpg" alt="">
            </div>
            <div class="ttl_area">
                <p class="head">見出し</p>
            </div>
            <p class="text">ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
        </div>

        <div class="js_modal_content modal__content" id="a_list-4">
            <span class="js_modal_close" href="">×</span>
            <div class="img_box">
                <img src="http://fnnyxe.com/wp-content/uploads/2024/10/30515501_s.jpg" alt="">
            </div>
            <div class="ttl_area">
                <p class="head">見出し</p>
            </div>
            <p class="text">ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
        </div>

        <div class="js_modal_content modal__content" id="a_list-5">
            <span class="js_modal_close" href="">×</span>
            <div class="img_box">
                <img src="http://fnnyxe.com/wp-content/uploads/2024/10/31016427_s.jpg" alt="">
            </div>
            <div class="ttl_area">
                <p class="head">見出し</p>
            </div>
            <p class="text">ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
        </div>
    </div>
</div>

/* 画像を並べている部分のcss */
.img_wrap {
    display: flex;
    flex-wrap: wrap;
    max-width: 1000px;
    margin: auto;
    width: 80%;
}

.img_wrap .img_box {
    width: 31%;
    margin: 1%;
    position: relative;
    padding-bottom: 31%;
    cursor: pointer;
    list-style: none;
}

.img_wrap .img_box .img {
    position: absolute;
    width: 100%;
    padding-bottom: 100%;
}

.img_wrap .img_box .img img {
    position: absolute;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* モーダル部分のデザイン */
.js_modal_area {
    display: none;
}

.js_modal_area .modal {
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 10;
}

.modal__bg {
    position: relative;
    z-index: 1;
    background: #00000080;
    width: 100%;
    height: 100%;
}

.js_modal_area .modal .modal__content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    background: #fff;
    max-width: 800px;
    z-index: 9999;
    padding: 90px 30px;
    display: none;
}

.js_modal_area .modal .modal__content.active {
    display: block;
}

.js_modal_area .modal .modal__content .img_box {
    width: 80%;
    margin: 2% auto;
}

.js_modal_area .modal .modal__content p {
    width: 80%;
    margin: auto;
    margin-top: 12px;
    line-height: 1.4;
    font-size: 13px;
}

.js_modal_area .modal .js_modal_close {
    text-align: center;
    display: block;
    position: absolute;
    top: 10px;
    right: 15px;
    cursor: pointer;
    font-size: 30px;
    font-weight: 700;
}

$(function() {
    $('.js_modal_open').on('click', function() {
        const id = $(this).attr('data-type');
        $('#' + id).addClass('active')
        $('.js_modal_area').fadeIn();
        return false;
    });
    $('.js_modal_close').on('click', function() {
        $('.js_modal_area').fadeOut();
        $('.js_modal_content'

        ).removeClass('active')
        return false;
    });
});

$(function() {
    $('.slideshow01 .img:nth-child(n+2)').hide();
    setInterval(function() {
        $(".slideshow01 .img:first-child").fadeOut(2000);
        $(".slideshow01 .img:nth-child(2)").fadeIn(2000);
        $(".slideshow01 .img:first-child").appendTo(".slideshow01");
    }, 4000);

    $('.slideshow02 .img:nth-child(n+2)').hide();
    setInterval(function() {
        $(".slideshow02 .img:first-child").fadeOut(2000);
        $(".slideshow02 .img:nth-child(2)").fadeIn(2000);
        $(".slideshow02 .img:first-child").appendTo(".slideshow02");
    }, 5000);

    $('.slideshow03 .img:nth-child(n+2)').hide();
    setInterval(function() {
        $(".slideshow03 .img:first-child").fadeOut(2000);
        $(".slideshow03 .img:nth-child(2)").fadeIn(2000);
        $(".slideshow03 .img:first-child").appendTo(".slideshow03");
    }, 6000);

    $.fn.extend({
        randomPh: function(num) {
            return this.each(function() {
                var chn = $(this).children().hide().length;
                for (var i = 0; i < num && i < chn; i++) {
                    var r = parseInt(Math.random() * (chn - i)) + i;
                    $(this).children().eq(r).show().prependTo($(this));
                }
            });
        }
    });

    $("[randomPh]").each(function() {
        $(this).randomPh($(this).attr("randomPh"));
    });
});

var arr = ['slideshow01', 'slideshow02', 'slideshow03'];
var a = arr.length;

while (a) {
    var j = Math.floor(Math.random() * a);
    var t = arr[--a];
    arr[a] = arr[j];
    arr[j] = t;
}

arr.forEach(function(value, index) {
    $('.slideshow').eq(index).addClass(value);
});

This Pen is owned by TatsukiOkazaki on CodePen.

See more by @gtteeknzi on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.