初めての質問なので、分かりづらい質問かと思いますが至らない点がありましたらご指南、ご指摘ください。
【やりたいこと】
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つ前の画像が表示されるのかと思っています。
回答1件
あなたの回答
tips
プレビュー