ポップアップ画像「次へ」「前へ」ボタンで切り替えたい

実現したい事→ポップアップの「前へ」ボタンをクリックで１つ前の画像へ、「次へ」ボタンをクリックで１つ後の画像へポップアップ画像が切り替わるようにしたい。（最後のポップアップ画像の「次へ」クリックで最初のポップアップ画像にもしたい、つまりループ状態にしたい）ここでは前へが←、次へが→になってます。

ご教授していただきたいこと→JavaScriptを用いての実現方法（「このjsをインストールしてクラス名、id名を指定のものにすればできる」などではなく、どのような原理で画像が切り替わっているかがわかる形でご教授していただけると嬉しいです）。

google,youtubeなどで調べてみましたが具体出来な解決策が見当たらず、皆様にお力を貸していただきたく、質問させていただきました。
現状ポップアップのクローズボタンで閉じる、画像クリックでポップアップ表示は機能しています。余分なコードは消しています（<li><img></li>の数を14→6に）。

HTML
1        <div id="popup-img" class="default">
2            <img src="./images/image/1.jpg" alt="ポップアップ">
3            <section class="popup-bar">
4                <div id="popup-close-btn" class="popup-close-btn"><i class="fas fa-times-circle"></i></div>
5                <div class="popup-change-btn">
6                    <div id="popup-before-btn" class="change-btn"><i class="fas fa-chevron-circle-left"></i></div>
7                    <div id="popup-after-btn" class="change-btn"><i class="fas fa-chevron-circle-right"></i></div>
8                </div>
9            </section>
10        </div>
11        <ul id="containers-p" class="containers-p">
12            <li class="container-p"><img class="pop_trigger" src="./images/image/1.jpg" alt=""></li>
13            <li class="container-p"><img class="pop_trigger" src="./images/image/2.jpg" alt=""></li>
14            <li class="container-p"><img class="pop_trigger" src="./images/image/3.jpg" alt=""></li>
15            <li class="container-p"><img class="pop_trigger" src="./images/image/4.jpg" alt=""></li>
16            <li class="container-p"><img class="pop_trigger" src="./images/image/5.jpg" alt=""></li>
17            <li class="container-p"><img class="pop_trigger" src="./images/image/6.jpg" alt=""></li>
18        </ul>

css
1.containers-p{
2    display: flex;
3    flex-wrap: wrap;
4    margin: 0 2rem 0 2rem;
5    justify-content: space-between;
6}
7.container-p{
8    margin: auto 0;
9    flex-direction: row;
10    width: 49.7%;
11    margin-bottom: 0.2rem;
12    object-fit: cover;
13    list-style: none;
14    transition: all 0.6s;
15    display: block;
16}
17.container-p img{
18    display: block;
19}
20
21/* popup編集 */
22#popup-img.default{
23    display: none;
24}
25#popup-img.active{
26    position: fixed;
27    top: 0;
28    left: 0;
29    display: flex;
30    z-index: 30;
31    height: -webkit-fill-available;
32    background-color: #fff;
33}
34#popup-img img{
35    height: fit-content;
36    width: -webkit-fill-available;
37    margin: auto 4rem;
38}
39.popup-close-btn{
40    position: relative;
41    height: fit-content;
42    cursor: pointer;
43    font-size: 3rem;
44}
45.popup-bar{
46    position: absolute;
47    bottom: 0;
48    display: flex;
49    width: -webkit-fill-available;
50    height: 5rem;
51    justify-content: space-between;
52    margin: 0 2rem;
53}
54.popup-change-btn{
55    display: flex;
56    height: fit-content;
57}
58.change-btn{
59    font-size: 3rem;
60}
61#popup-before-btn{
62    margin-right: 2.5rem;
63}

JavaScript
1$(function() {
2  $("#containers-p img").on("click", function () {
3    let img_src = $(this).attr("src");
4    $("#popup-img img").attr("src", img_src);
5    $("#popup-img").toggleClass('active');
6  });
7});
8
9$(function() {
10  $("#popup-close-btn").on("click", function () {
11    $("#popup-img").removeClass('active');
12  });
13});

yambejp

2022/04/08 04:53

現時点で何も表示されないと思いますが？

pokemon

2022/04/08 05:15

確認しました。CSSの.container-pのdisplayをnoneにしていました。（本来は非表示→ボタンクリックでcontainer-pに.activeクラスを追加して表示するため）見やすいように不要部分（.container.active{ display: block;}）を省いてしまってました。これで表示されたと思います。お手数おかけしてしまい、申し訳ありません。

yambejp

2022/04/08 06:05

codepenに転記しましたが相変わらずおかしいです。なにをしたらどうなる想定なのでしょうか？ https://codepen.io/yambejp/pen/xxpjZjr

行動規範の内容に同意します

回答2件

ベストアンサー

おそらくcontainer-pのli要素に入っている画像の順番でポップアップで表示したいと言うことでしょうかね👀

container-pの中の画像は現在固定のようなので、その中身をループ表示させる例をひとまず挙げますね😊
※実行確認はしていませんのですいません💦

js
1$(function() {
2  let imageSources = [];
3  // container-pの子要素のimgを全て取得しそれぞれの要素に対してeachで処理
4  // 構わないならこの方法では無く、手打ちで配列初期化でも大丈夫です。
5  $('#container-p img').each(function() {
6    let path = $(this).attr("src");
7    imageSources.push(path); // 配列に画像のパスを追加
8  };
9  let souceIndex = 0;
10
11  $("#containers-p img").on("click", function () {
12    let img_src = $(this).attr("src");
13    souceIndex = imageSources.indexOf(img_src); // img_srcのインデックスを検索
14
15    $("#popup-img img").attr("src", img_src);
16    $("#popup-img").toggleClass('active');
17  });
18
19  $("#popup-close-btn").on("click", function () {
20    $("#popup-img").removeClass('active');
21  });
22
23  // 細かい事言うと「before, after」よりも「prev, next」の方が命名としてはいいかな？
24  $('#popup-before-button').on("click", function() {
25    souceIndex = (sourceIndex + imageSources.length - 1) % imageSources.length;
26    updatePopupImage();
27  });
28
29  $('#popup-after-button').on("click", function() {
30    souceIndex = (sourceIndex + 1) % imageSources.length;
31    updatePopupImage();
32  });
33
34  function updatePopupImage() {
35    $("#popup-img img").attr("src", imageSources[souceIndex]);
36  }
37});

少し気になっているのは、toggleClassでactiveとdefaultを切り替えていますが、jQueryのshow関数とhide関数では駄目なんでしょうか👀（HTML側にstyle = "display: none;"は必要になりますが）fadeInなども使えるので私はそちらで実装するタイプです🤔

私も昔そうだったので、すごく気持ちは分かるのですが、$()の括弧の中身はシングルコーテーションの癖をつけておいた方がおすすめです！（$('input[name = "mail_address"]')みたいな時に困ります😅）

まぁ...他にも方法はあるでしょうが参考までに😊

投稿2022/04/08 06:19

HiraKazu1124

総合スコア322

pokemon

2022/04/09 05:47

ご丁寧にありがとうございます！ Webデザインもこのサイトも初心者で、伝わりにくかったと思いましたが、私の求めていた事を汲み取っていただき、大変助かりました。しっかりと機能ましたので、ご報告とともに、ベストアンサーとしたいと思います。 show関数、hide関数に関しましては、勉強不足であったため、これをきっかけに調べてみようと思います。クオーテーションについても、ご助言ありがとうございます。これからはシングルクオーテーションで描こうと思います。改めて大変ありがとうございました！

行動規範の内容に同意します