質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.40%

  • JavaScript

    21451questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    12182questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    8539questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CSS

    8040questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

jQueryでサムネイルを拡大表示したときのprevボタン、nextボタンの処理の設定がしたい

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 909

nyaosu_555

score 1

初めての質問なので、分かりづらい質問かと思いますが至らない点がありましたらご指南、ご指摘ください。

【やりたいこと】
jQueryで自作のlightboxのようなものを作っています。
サムネイル画像をクリックするとクリックした画像が拡大表示されてそこにprevボタン、nextボタン機能で拡大画像から前後の画像を往来できるようにしたいのです。
参考:http://www.s-hoshino.com/web2/shop_005/works.html

jQueryを独学で勉強中のため理解を深めたいので今回はプラグインに頼らず自作にこだわっています。

prev、nextボタンを配置するところまでは自力でできているので解決コードも自作のものに付け加えた形でできるのであればその方向で進められたらと思っております。

//1.拡大表示された画像の要素番号をcurrentNumに格納
var currentNum = $("#small_pics li img").index(this);
//prevをクリックすると
$(".hoverNav1 .prev").on("click", function(){
//2.要素番号を1つ減らす(=表示されていた画像の1つまえの要素を取得)
currentNum--;
//2.の部分ができているかを確認してるだけ
console.log(currentNum);
//3.pic-overlay img にcurrentNumで取ってきた要素番号の画像のsrcを入れる
$(".pic-overlay img").

3.の部分でつまづいています。.pic-overlay img に入れる前にcurrentNumの要素番号の画像のsrcを取る処理を書くのでしょうが思いつきません。

 該当のソースコード

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>自作でlightbox</title>
    <link href="lightbox.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
</head>
<body>
        <div id="main">
        <h5>jQueryでlightbox風の画像を自作する</h5>        

        <div id="small_pics">
            <ul>
                <li><img src="images/001.jpg"></li>
                <li><img src="images/002.jpg"></li>
                <li><img src="images/003.jpg"></li>
                <li><img src="images/004.jpg"></li>
                <li><img src="images/005.jpg"></li>
            </ul>

            <div class="hoverNav1">
                <a href="#" class="prev">Prev</a>
            </div>
            <div class="hoverNav2">
                <a href="#" class="next">Next</a>
            </div>

        </div>
        <div id="index" class="index">
            <span class="index_no"></span>/<span class="index_no1"></span></div>

<script type="text/javascript" src="lightbox.js"></script>
</body>
</html>
$(function(){
    $("#small_pics li img").on("click", function(){
        $("body").append('<div class="pic-overlay"></div>');
        $(".pic-overlay").fadeIn("slow");

        var index1 = $("#small_pics li img").length;
        $("#index .index_no1").fadeIn().text(index1);

        var index = 0;
        var index= $("#small_pics li img").index(this);
        $("#index .index_no").fadeIn().text(index + 1);

    });

    $("#main").on("click", "#small_pics li img", function(){
        var url = $(this).attr("src");

        $(".pic-overlay").empty().append('<img src="'+ url +'" />').fadeIn("slow");
        $("#index").slideDown(500);
        $(".hoverNav1, .hoverNav2").fadeIn();

        centeringModalSyncer();
        $(window).resize(centeringModalSyncer);

        centeringModalSyncer2();
        $(window).resize(centeringModalSyncer2);

        centeringModalSyncer3();
        $(window).resize(centeringModalSyncer3);

        centeringModalSyncer4();
        $(window).resize(centeringModalSyncer4);


        $(".pic-overlay").click(function(){
            $(".pic-overlay img, .pic-overlay, #index, .hoverNav1, .hoverNav2").fadeOut("slow", function(){
                $(".pic-overlay").remove();

            });
        });

        var currentNum = $("#small_pics li img").index(this);
        console.log(currentNum);

        $(".hoverNav1 .prev").on("click", function(){
        currentNum--;
        console.log(currentNum);

        });

    });

    function centeringModalSyncer(){
            var w = $(window).width();
            var h = $(window).height();

            var cw = $(".pic-overlay img").width();
            var ch = $(".pic-overlay img").height();

            var pxleft = ((w - cw) / 2);
            var pxtop = ((h - ch) / 2);

            $(".pic-overlay img").css({"left": pxleft + "px"});
            $(".pic-overlay img").css({"top": pxtop + "px"});

    }

    function centeringModalSyncer2(){
            var w = $(window).width();
            var h = $(window).height();

            var cw = $(".pic-overlay img").width();
            var ch = $(".pic-overlay img").height();

            var pxleft = ((w - cw) / 2 + 30);
            var pxtop = ((h - ch) / 2 + 30);


            $(".hoverNav1").css({"left": pxleft + "px"});
            $(".hoverNav1").css({"top": pxtop + "px"});
    }

    function centeringModalSyncer3(){
            var w = $(window).width();
            var h = $(window).height();

            var cw = $(".pic-overlay img").width();
            var ch = $(".pic-overlay img").height();

            var pxleft = ((w - cw) / 2 + 430);
            var pxtop = ((h - ch) / 2 + 30);


            $(".hoverNav2").css({"left": pxleft + "px"});
            $(".hoverNav2").css({"top": pxtop + "px"});
    }

    function centeringModalSyncer4(){
            var w = $(window).width();
            var h = $(window).height();

            var cw = $(".pic-overlay img").width();
            var ch = $(".pic-overlay img").height();

            var pxleft = ((w - cw) / 2);
            var pxtop = ((h - ch) / 2 + 335);


            $("#index").css({"left": pxleft + "px"});
            $("#index").css({"top": pxtop + "px"});
    }

});

 試したこと

【prevボタンに対して】
1.現在拡大表示されている画像の番号を格納する変数(currentNum)を準備する
2.prevボタンが押されるとcurrentNumを減らす→拡大表示されている画像の1つ前の画像要素番号を取得する
まではやってみました。
3.2で取得したcurrentNumの画像のsrcを取得したいができない。そもそもそれができるものなのかも分からないです。

例えばサムネイル画像の2枚目(要素番号は1)をクリック→拡大画像のprevボタンをクリックして要素番号0を取得、その要素番号0の画像のsrcを取得してそれを.pic-overlay img のscrに入れられたら1つ前の画像が表示されるのかと思っています。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • Kosuke_Shibuya

    2018/04/08 19:25

    clickイベントの中に clickイベントの件ですが、逆に目的にかなっていると思いますよ。

    キャンセル

  • nyaosu_555

    2018/04/08 23:09

    >stampdoorさん ご指南ありがとうございます。おっしゃる通り動きはします。が言われてみると意味的には確かにおかしいですね!overlayを消す部分などはif文で書いた方が意味的にもコード的にもスッキリする感じでしょうか。ご指摘いただいて初めて気づく部分があり、とても助かります。

    キャンセル

  • nyaosu_555

    2018/04/08 23:10

    >Kosuke_Shibuyaさん ありがとうございます。そうおっしゃっていただけると少し自信に繋がります。

    キャンセル

回答 1

checkベストアンサー

+1

さらっと、コードをみた限り(精読はしていません。)、これだけあれば、理解できると思いますので、
どうぞ。

<!DOCTYPE HTML>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>sample</title>
        <style type="text/css">
            img {
                width: 200px;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <img src="https://dummyimage.com/600x400/666666/fff.jpg&amp;text=1" alt="1" />
            <img src="https://dummyimage.com/600x400/666666/fff.jpg&amp;text=2" alt="2" />
            <img src="https://dummyimage.com/600x400/666666/fff.jpg&amp;text=3" alt="3" />
            <img src="https://dummyimage.com/600x400/666666/fff.jpg&amp;text=4" alt="4" />
            <img src="https://dummyimage.com/600x400/666666/fff.jpg&amp;text=5" alt="5" />
            <div>
                <button id="prev" type="button">PREV</button>
                <button id='next' type="button">NEXT</button>
            </div>
        </div>
        <script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.min.js"></script>
        <script type="text/javascript">
            $(function () {
                var images = $("#box img");
                var current_index = 0;
                $("#box img").each(function (i) {
                    $(this).data('index', i);
                });
                $("#box img").on('click', function (e) {
                    console.log(e);
                    current_index = $(this).data('index');
                    console.log(current_index);

                    expand(current_index);
                });
                $("#prev").on('click', function () {
                    current_index--;
                    if (current_index < 0) {
                        current_index = images.length - 1;
                    }
                    console.log(current_index);
                    expand(current_index);
                });
                $("#next").on('click', function () {
                    current_index++;
                    console.log(current_index);
                    console.log(current_index % images.length);
                    expand(current_index);
                });

                /**
                 * 拡大処理
                 * @returns void
                 */
                function expand(index) {
                    var target_image = images.eq(index);
                    var src = target_image.prop('src');
                    console.log(src);
                }
            });
        </script>
    </body>
</html>

<!DOCTYPE HTML>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>sample</title>
        <style type="text/css">
            #box img {
                width: 200px;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <img src="https://dummyimage.com/600x400/666666/fff.jpg&amp;text=1" alt="1" />
            <img src="https://dummyimage.com/600x400/666666/fff.jpg&amp;text=2" alt="2" />
            <img src="https://dummyimage.com/600x400/666666/fff.jpg&amp;text=3" alt="3" />
            <img src="https://dummyimage.com/600x400/666666/fff.jpg&amp;text=4" alt="4" />
            <img src="https://dummyimage.com/600x400/666666/fff.jpg&amp;text=5" alt="5" />
            <div>
                <button id="prev" type="button">PREV</button>
                <button id='next' type="button">NEXT</button>
            </div>
        </div>
        <div>
            <img id="response" src="" alt="" />
        </div>
        <script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.min.js"></script>
        <script type="text/javascript">
            $(function () {
                var images = $("#box img");
                var current_index = 0;
                $("#box img").each(function (i) {
                    $(this).data('index', i);
                });
                $("#box img").on('click', function (e) {
                    current_index = $(this).data('index');
                    expand(current_index);
                });
                $("#prev").on('click', function () {
                    current_index--;
                    if (current_index < 0) {
                        current_index = images.length - 1;
                    }
                    expand(current_index);
                });
                $("#next").on('click', function () {
                    current_index++;
                    expand(current_index % images.length);
                });

                /**
                 * 拡大処理
                 * @returns void
                 */
                function expand(index) {
                    var target_image = images.eq(index);
                    var src = target_image.prop('src');
                    $("#response").prop("src", src);
                }
            });
        </script>
    </body>
</html>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/04/08 23:22

    お忙しいところ、ご回答くださりありがとうございます!
    教えてくださいましたコードを熟読いたしましたところ、大変申し訳ないのですが使ったことのないメソッドであるdata()や不慣れな引数などで1つ1つ理解に努めていているとことであります。
    なので、先に教えてくださったコードをお借りし、ユーザー定義関数でしょうか、expand(current_index)により希望の要素番号から対象のsrcを取得することができました。が、
    そのsrcを$(".pic-overlay img)のsrcに移しprevボタンの効果を完成させたいのですができません。下記のようにやってみましたがコードに不備があるのだと思います。お時間ありましたら、ご教示いただいてもよろしいでしょうか。

    $(".hoverNav1 .prev").on("click", function(){
    current_index--;
    if (current_index < 0) {
    current_index = images.length - 1;
    }
    console.log(current_index);
    expand(current_index);

    $(".pic-overlay img").attr("src", expand(current_index));

    また、関数を直接書くのが間違いだと思い、関数を一旦、変数に代入して実行してみましたが
    var newImage = expand(current_index);
    console.log(newImage);
    コンソールで確認時点でundefinedとなってしまいます。

    キャンセル

  • 2018/04/08 23:34 編集

    attr ではなく、prop を使うべきではないでしょうかね?
    また、expand() で値を返すのではなく、そこで表示させる意図で、expand()「拡大 」と命名しているので…。

    コピペで再現できるなら、そちらのソースで検証してもいいけど、一部からHTMLの全体を推測で書き直して検証するのは正直面倒です。

    キャンセル

  • 2018/04/10 00:25

    値を返せばできるはず、との思いこみでひたすらexpand()をどうにかしようとしていました。回答の修正までしてくださってありがとうございます。おかげさまでprev/nextボタンが機能することができました!次の部分に進むことができます。本当にありがとうございました。
    また、コードを一部しか記述せず大変なお手間を取らせてしまい申し訳ございませんでした。以後質問をする際は気をつけるようにいたします。

    キャンセル

  • 2018/04/10 00:28

    どういたしまして。
    でも最初の回答でも、コメント見てくれれば…笑

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.40%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • JavaScript

    21451questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    12182questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    8539questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CSS

    8040questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。