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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

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

jQuery

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

HTML

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

CSS

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

Q&A

解決済

1回答

2348閲覧

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

nyaosu_555

総合スコア7

JavaScript

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

jQuery

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

HTML

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

CSS

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

0グッド

1クリップ

投稿2018/04/07 22:30

編集2018/04/08 06:39

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

【やりたいこと】
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を取る処理を書くのでしょうが思いつきません。

該当のソースコード

HTML

1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <title>自作でlightbox</title> 6 <link href="lightbox.css" rel="stylesheet" type="text/css" /> 7 <script type="text/javascript" src="jquery-3.2.1.min.js"></script> 8</head> 9<body> 10 <div id="main"> 11 <h5>jQueryでlightbox風の画像を自作する</h5> 12 13 <div id="small_pics"> 14 <ul> 15 <li><img src="images/001.jpg"></li> 16 <li><img src="images/002.jpg"></li> 17 <li><img src="images/003.jpg"></li> 18 <li><img src="images/004.jpg"></li> 19 <li><img src="images/005.jpg"></li> 20 </ul> 21 22 <div class="hoverNav1"> 23 <a href="#" class="prev">Prev</a> 24 </div> 25 <div class="hoverNav2"> 26 <a href="#" class="next">Next</a> 27 </div> 28 29 </div> 30 <div id="index" class="index"> 31 <span class="index_no"></span>/<span class="index_no1"></span>枚 32 </div> 33 34<script type="text/javascript" src="lightbox.js"></script> 35</body> 36</html>

jQuery

1$(function(){ 2 $("#small_pics li img").on("click", function(){ 3 $("body").append('<div class="pic-overlay"></div>'); 4 $(".pic-overlay").fadeIn("slow"); 5 6 var index1 = $("#small_pics li img").length; 7 $("#index .index_no1").fadeIn().text(index1); 8 9 var index = 0; 10 var index= $("#small_pics li img").index(this); 11 $("#index .index_no").fadeIn().text(index + 1); 12 13 }); 14 15 $("#main").on("click", "#small_pics li img", function(){ 16 var url = $(this).attr("src"); 17 18 $(".pic-overlay").empty().append('<img src="'+ url +'" />').fadeIn("slow"); 19 $("#index").slideDown(500); 20 $(".hoverNav1, .hoverNav2").fadeIn(); 21 22 centeringModalSyncer(); 23 $(window).resize(centeringModalSyncer); 24 25 centeringModalSyncer2(); 26 $(window).resize(centeringModalSyncer2); 27 28 centeringModalSyncer3(); 29 $(window).resize(centeringModalSyncer3); 30 31 centeringModalSyncer4(); 32 $(window).resize(centeringModalSyncer4); 33 34 35 $(".pic-overlay").click(function(){ 36 $(".pic-overlay img, .pic-overlay, #index, .hoverNav1, .hoverNav2").fadeOut("slow", function(){ 37 $(".pic-overlay").remove(); 38 39 }); 40 }); 41 42 var currentNum = $("#small_pics li img").index(this); 43 console.log(currentNum); 44 45 $(".hoverNav1 .prev").on("click", function(){ 46 currentNum--; 47 console.log(currentNum); 48 49 }); 50 51 }); 52 53 function centeringModalSyncer(){ 54 var w = $(window).width(); 55 var h = $(window).height(); 56 57 var cw = $(".pic-overlay img").width(); 58 var ch = $(".pic-overlay img").height(); 59 60 var pxleft = ((w - cw) / 2); 61 var pxtop = ((h - ch) / 2); 62 63 $(".pic-overlay img").css({"left": pxleft + "px"}); 64 $(".pic-overlay img").css({"top": pxtop + "px"}); 65 66 } 67 68 function centeringModalSyncer2(){ 69 var w = $(window).width(); 70 var h = $(window).height(); 71 72 var cw = $(".pic-overlay img").width(); 73 var ch = $(".pic-overlay img").height(); 74 75 var pxleft = ((w - cw) / 2 + 30); 76 var pxtop = ((h - ch) / 2 + 30); 77 78 79 $(".hoverNav1").css({"left": pxleft + "px"}); 80 $(".hoverNav1").css({"top": pxtop + "px"}); 81 } 82 83 function centeringModalSyncer3(){ 84 var w = $(window).width(); 85 var h = $(window).height(); 86 87 var cw = $(".pic-overlay img").width(); 88 var ch = $(".pic-overlay img").height(); 89 90 var pxleft = ((w - cw) / 2 + 430); 91 var pxtop = ((h - ch) / 2 + 30); 92 93 94 $(".hoverNav2").css({"left": pxleft + "px"}); 95 $(".hoverNav2").css({"top": pxtop + "px"}); 96 } 97 98 function centeringModalSyncer4(){ 99 var w = $(window).width(); 100 var h = $(window).height(); 101 102 var cw = $(".pic-overlay img").width(); 103 var ch = $(".pic-overlay img").height(); 104 105 var pxleft = ((w - cw) / 2); 106 var pxtop = ((h - ch) / 2 + 335); 107 108 109 $("#index").css({"left": pxleft + "px"}); 110 $("#index").css({"top": pxtop + "px"}); 111 } 112 113});

試したこと

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

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2018/04/08 01:23

「3」について、ご自身で試されたコードを質問文に追記されたほうが回答を得られやすいと思います。
nyaosu_555

2018/04/08 03:08

ご指摘ありがとうございます!質問文に追記をしてみましたがこういう感じでも大丈夫でしょうか。
stampdoor

2018/04/08 05:38

なんだか閉じタグが不思議な感じなような。clickイベントの中に更に2つclickイベントがありません?
nyaosu_555

2018/04/08 06:46

ご指摘ありがとうございます。閉じタグは記述場所がズレていたのでレイアウトを変えました。prevボタンのclick場所を変更致しました。また当方jQuery初心者のためご教示いただきたいのですがclickイベントの中に複数のclickイベントが存在するのはNGなものでしょうか。
stampdoor

2018/04/08 06:58

いや、多分動くんでしょうが意味的には不思議な感じです。.on("click"〜は要素をクリックしたときの機能を定義しているので、aをクリックしたときのbをクリックしたときの機能、となると日本語でもちょっと変ですよね。条件づけするとしたらαが存在するならば(もしくはαが特定の状態であるならば)βをクリックしたときの機能、としてあげたほうが他の人が読んだ場合の可読性が上がると思います。
退会済みユーザー

退会済みユーザー

2018/04/08 10:25

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

2018/04/08 14:09

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

2018/04/08 14:10

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

回答1

0

ベストアンサー

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

html

1<!DOCTYPE HTML> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>sample</title> 6 <style type="text/css"> 7 img { 8 width: 200px; 9 } 10 </style> 11 </head> 12 <body> 13 <div id="box"> 14 <img src="https://dummyimage.com/600x400/666666/fff.jpg&amp;text=1" alt="1" /> 15 <img src="https://dummyimage.com/600x400/666666/fff.jpg&amp;text=2" alt="2" /> 16 <img src="https://dummyimage.com/600x400/666666/fff.jpg&amp;text=3" alt="3" /> 17 <img src="https://dummyimage.com/600x400/666666/fff.jpg&amp;text=4" alt="4" /> 18 <img src="https://dummyimage.com/600x400/666666/fff.jpg&amp;text=5" alt="5" /> 19 <div> 20 <button id="prev" type="button">PREV</button> 21 <button id='next' type="button">NEXT</button> 22 </div> 23 </div> 24 <script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.min.js"></script> 25 <script type="text/javascript"> 26 $(function () { 27 var images = $("#box img"); 28 var current_index = 0; 29 $("#box img").each(function (i) { 30 $(this).data('index', i); 31 }); 32 $("#box img").on('click', function (e) { 33 console.log(e); 34 current_index = $(this).data('index'); 35 console.log(current_index); 36 37 expand(current_index); 38 }); 39 $("#prev").on('click', function () { 40 current_index--; 41 if (current_index < 0) { 42 current_index = images.length - 1; 43 } 44 console.log(current_index); 45 expand(current_index); 46 }); 47 $("#next").on('click', function () { 48 current_index++; 49 console.log(current_index); 50 console.log(current_index % images.length); 51 expand(current_index); 52 }); 53 54 /** 55 * 拡大処理 56 * @returns void 57 */ 58 function expand(index) { 59 var target_image = images.eq(index); 60 var src = target_image.prop('src'); 61 console.log(src); 62 } 63 }); 64 </script> 65 </body> 66</html>

html

1<!DOCTYPE HTML> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>sample</title> 6 <style type="text/css"> 7 #box img { 8 width: 200px; 9 } 10 </style> 11 </head> 12 <body> 13 <div id="box"> 14 <img src="https://dummyimage.com/600x400/666666/fff.jpg&amp;text=1" alt="1" /> 15 <img src="https://dummyimage.com/600x400/666666/fff.jpg&amp;text=2" alt="2" /> 16 <img src="https://dummyimage.com/600x400/666666/fff.jpg&amp;text=3" alt="3" /> 17 <img src="https://dummyimage.com/600x400/666666/fff.jpg&amp;text=4" alt="4" /> 18 <img src="https://dummyimage.com/600x400/666666/fff.jpg&amp;text=5" alt="5" /> 19 <div> 20 <button id="prev" type="button">PREV</button> 21 <button id='next' type="button">NEXT</button> 22 </div> 23 </div> 24 <div> 25 <img id="response" src="" alt="" /> 26 </div> 27 <script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.min.js"></script> 28 <script type="text/javascript"> 29 $(function () { 30 var images = $("#box img"); 31 var current_index = 0; 32 $("#box img").each(function (i) { 33 $(this).data('index', i); 34 }); 35 $("#box img").on('click', function (e) { 36 current_index = $(this).data('index'); 37 expand(current_index); 38 }); 39 $("#prev").on('click', function () { 40 current_index--; 41 if (current_index < 0) { 42 current_index = images.length - 1; 43 } 44 expand(current_index); 45 }); 46 $("#next").on('click', function () { 47 current_index++; 48 expand(current_index % images.length); 49 }); 50 51 /** 52 * 拡大処理 53 * @returns void 54 */ 55 function expand(index) { 56 var target_image = images.eq(index); 57 var src = target_image.prop('src'); 58 $("#response").prop("src", src); 59 } 60 }); 61 </script> 62 </body> 63</html>

投稿2018/04/08 07:28

編集2018/04/08 15:05
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

nyaosu_555

2018/04/08 14: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 15:10 編集

attr ではなく、prop を使うべきではないでしょうかね? また、expand() で値を返すのではなく、そこで表示させる意図で、expand()「拡大 」と命名しているので…。 コピペで再現できるなら、そちらのソースで検証してもいいけど、一部からHTMLの全体を推測で書き直して検証するのは正直面倒です。
nyaosu_555

2018/04/09 15:25

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

退会済みユーザー

2018/04/09 15:28

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問