divの外側からクリックしたときのJqueryとJavascriptのスクロール画像

Question

divで画像を使用できる場所に作成したライトボックスがあり、次に新しいdivのライトボックスエフェクトで画像が大きく開きます。あなたがクリックして、他の外側のdivの画像を前後にスクロールさせるための矢印が必要です。私はJQueryとjavascriptを初めて使っています。考えられるあらゆる方法で試してみましたが、これをどのように動作させるかについては何か不足しています。私は参照として自分のコードの基本を添付しました。

何らかの理由で他のdivを検出していないため、ハイおよびショーコードが動作していません。

$(document).ready(function() { 
 
\t $("img").click(function(){ 
 
\t \t $src=$(this).attr("src"); 
 
\t \t $title=$(this).attr("title"); 
 
\t \t $alt=$(this).attr("alt"); 
 

 

 
if(!$("#lightbox").length>0){ 
 
\t \t \t $('body').append("<div id='lightbox'><span class='closer'>X</span><span class='nextimg'>></span><span class='previmg'><</span><div class='lightbox_container'><img src='' title='' alt=''><p>" + $title + "</p></div></div>"); 
 
\t \t \t 
 

 
\t \t \t $("#lightbox").show(); 
 
\t \t \t 
 
\t \t \t 
 
\t \t \t 
 
\t \t \t 
 
\t \t \t //********************************************************* 
 
\t \t \t if(!$(this).parent("#lightboxsm img").next().length>0){ 
 
\t \t \t \t $(".nextimg").show(); 
 
\t \t \t } else { 
 
\t \t \t \t $(".nextimg").hide(); 
 
\t \t \t }; 
 
\t \t \t 
 
\t \t \t $("body").on('click','.nextimg',function(){ 
 
\t \t \t \t $newsrc=$("#lightbox img").attr("src"); 
 
\t \t \t \t $newtitle=$("#lightbox img").attr("title"); 
 
\t \t \t \t $newalt=$("#lightbox img").attr("alt"); 
 
\t \t \t \t 
 
\t \t \t \t 
 
\t \t \t \t $("#lightboxsm img").next("lightbox img").attr('src', $newsrc); 
 
\t \t \t \t 
 
\t \t \t }); 
 
\t \t \t 
 
\t \t \t //********************************************************* 
 
    
 
    }else{ 
 
\t \t \t $("#lightbox img").attr("src",$src); 
 
\t \t \t $("#lightbox img").attr("alt",$alt); 
 
\t \t \t $("#lightbox img").attr("title",$title); 
 
\t \t \t $("#lightbox").show(); 
 
\t \t } 
 
\t }); 
 
\t 
 
\t 
 
\t //Closes the lightbox*************************************** 
 
\t $("body").on('click', '#lightbox .closer',function(){ 
 
\t \t $("#lightbox").hide(); 
 
\t }) 
 
    
 
    });

.lightboxsm { 
 
\t width: 175px; 
 
    height: 175px; 
 
    overflow: hidden; 
 
\t /*float:left;*/ 
 
\t display:inline-block; 
 
\t padding:10px; 
 
\t position:relative; 
 
\t cursor:pointer; 
 
} 
 

 
.lightboxsm img{ 
 
\t width:auto; 
 
    height: 175px; 
 
\t object-fit: cover; 
 
} 
 

 
#lightbox{ 
 
\t position:fixed; 
 
\t height:100%; 
 
\t width:100%; 
 
\t background: rgba(0, 0, 0, 0.5); 
 
\t left:0; 
 
\t right:0; 
 
\t top:0; 
 
\t bottom:0; 
 
\t z-index:200; 
 
} 
 

 
#lightbox img{ 
 
\t max-width:80%; 
 
\t max-height:80%; 
 
\t position:fixed; 
 
\t left:0; 
 
\t right:0; 
 
\t top:0; 
 
\t bottom:0; 
 
\t margin:auto; 
 
} 
 

 
.closer { 
 
\t display: block; 
 
    height: 60px; 
 
    width: 60px; 
 
    line-height: 60px; 
 

 
    -moz-border-radius: 30px; 
 
    border-radius: 30px; 
 

 
    background-color: black; 
 
    color: white; 
 
    text-align: center; 
 
    font-size: 2em; 
 
\t float:right; 
 
\t margin:5% 10%; 
 
\t z-index:250; 
 
} 
 

 
.closer:hover { 
 
\t cursor:pointer; 
 
} 
 

 
.nextimg { 
 
\t display: block; 
 
    height: 60px; 
 
    width: 60px; 
 
    line-height: 60px; 
 

 
    -moz-border-radius: 30px; 
 
    border-radius: 30px; 
 

 
    background-color: black; 
 
    color: white; 
 
    text-align: center; 
 
    font-size: 2em; 
 
\t float:right; 
 
\t margin:5% 10%; 
 
\t z-index:600; 
 
\t clear:right; 
 
} 
 

 
.nextimg:hover { 
 
\t cursor:pointer; 
 
} 
 

 
.previmg { 
 
\t display: block; 
 
    height: 60px; 
 
    width: 60px; 
 
    line-height: 60px; 
 

 
    -moz-border-radius: 30px; 
 
    border-radius: 30px; 
 

 
    background-color: black; 
 
    color: white; 
 
    text-align: center; 
 
    font-size: 2em; 
 
\t float:left; 
 
\t margin:5% 10%; 
 
\t z-index:600; 
 
\t clear:left; 
 
} 
 

 
.previmg:hover { 
 
\t cursor:pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="lightbox_container"> 
 
      <div class="lightboxsm" id="img1"> 
 
       <img src="http://2017.sunkissed-villas.com/images/1.png" alt="1"/> 
 
      </div> 
 
     
 
      <div class="lightboxsm" id="img2"> 
 
       <img src="http://2017.sunkissed-villas.com/images/2.png" alt="2"/> 
 
      </div> 
 
      
 
      <div class="lightboxsm" id="img3"> 
 
       <img src="http://2017.sunkissed-villas.com/images/3.png"/> 
 
      </div> 
 
      
 
     </div>

Answer 1

問題は、それが（）の次を得ていた前nextimgセレクタが親にアクセスしていなかったということでしたので、何の次の要素がありませんでした。更新されたスニペットが機能するかどうか教えてください。次の画像や前の画像がなければ、次の/前のボタンを隠すようにしました。

$(document).ready(function() { 
 
    $("img").click(function(){ 
 
    $(this).addClass('selected') 
 
    $src=$(this).attr("src"); 
 
    $title=$(this).attr("title"); 
 
    $alt=$(this).attr("alt"); 
 

 

 
    if(!$("#lightbox").length > 0){ 
 
     $('body').append("<div id='lightbox'><span class='closer'>X</span><span class='nextimg'>></span><span class='previmg'><</span><div class='lightbox_container'><img src='' title='' alt=''><p>" + $title + "</p></div></div>"); 
 
    \t \t \t 
 
     $("body").on('click','.nextimg',function(){ 
 
     $newimg=$('.selected').parent().next().find('img') 
 
     $('.selected').removeClass('selected') 
 
     $newimg.addClass('selected') 
 
    \t $("#lightbox img").attr("src", $newimg.attr("src")); 
 
     checkPrevNext(); 
 
     }); 
 
     
 
     $("body").on('click','.previmg',function(){ 
 
     $newimg=$('.selected').parent().prev().find('img') 
 
     $('.selected').removeClass('selected') 
 
     $newimg.addClass('selected') 
 
    \t $("#lightbox img").attr("src", $newimg.attr("src")); 
 
     checkPrevNext(); 
 
     }); 
 
    } 
 
     $("#lightbox").show(); 
 
     $("#lightbox img").attr("src",$src); 
 
     $("#lightbox img").attr("alt",$alt); 
 
     $("#lightbox img").attr("title",$title); 
 
     checkPrevNext(); 
 
    }); 
 
    \t 
 
    $("body").on('click', '#lightbox .closer',function(){ 
 
    $("#lightbox").hide(); 
 
    }) 
 
    
 
    function checkPrevNext() { 
 
    if($('.selected').parent().next().find('img').length > 0) { 
 
     $(".nextimg").show(); 
 
    } else { 
 
     $(".nextimg").hide(); 
 
    }; 
 
    
 
    if($('.selected').parent().prev().find('img').length > 0) { 
 
     $(".previmg").show(); 
 
    } else { 
 
     $(".previmg").hide(); 
 
    }; 
 
    } 
 
});

.lightboxsm { 
 
\t width: 175px; 
 
    height: 175px; 
 
    overflow: hidden; 
 
\t /*float:left;*/ 
 
\t display:inline-block; 
 
\t padding:10px; 
 
\t position:relative; 
 
\t cursor:pointer; 
 
} 
 

 
.lightboxsm img{ 
 
\t width:auto; 
 
    height: 175px; 
 
\t object-fit: cover; 
 
} 
 

 
#lightbox{ 
 
\t position:fixed; 
 
\t height:100%; 
 
\t width:100%; 
 
\t background: rgba(0, 0, 0, 0.5); 
 
\t left:0; 
 
\t right:0; 
 
\t top:0; 
 
\t bottom:0; 
 
\t z-index:200; 
 
} 
 

 
#lightbox img{ 
 
\t max-width:80%; 
 
\t max-height:80%; 
 
\t position:fixed; 
 
\t left:0; 
 
\t right:0; 
 
\t top:0; 
 
\t bottom:0; 
 
\t margin:auto; 
 
} 
 

 
.closer { 
 
\t display: block; 
 
    height: 60px; 
 
    width: 60px; 
 
    line-height: 60px; 
 

 
    -moz-border-radius: 30px; 
 
    border-radius: 30px; 
 

 
    background-color: black; 
 
    color: white; 
 
    text-align: center; 
 
    font-size: 2em; 
 
\t float:right; 
 
\t margin:5% 10%; 
 
\t z-index:250; 
 
} 
 

 
.closer:hover { 
 
\t cursor:pointer; 
 
} 
 

 
.nextimg { 
 
\t display: block; 
 
    height: 60px; 
 
    width: 60px; 
 
    line-height: 60px; 
 

 
    -moz-border-radius: 30px; 
 
    border-radius: 30px; 
 

 
    background-color: black; 
 
    color: white; 
 
    text-align: center; 
 
    font-size: 2em; 
 
\t float:right; 
 
\t margin:5% 10%; 
 
\t z-index:600; 
 
\t clear:right; 
 
} 
 

 
.nextimg:hover { 
 
\t cursor:pointer; 
 
} 
 

 
.previmg { 
 
\t display: block; 
 
    height: 60px; 
 
    width: 60px; 
 
    line-height: 60px; 
 

 
    -moz-border-radius: 30px; 
 
    border-radius: 30px; 
 

 
    background-color: black; 
 
    color: white; 
 
    text-align: center; 
 
    font-size: 2em; 
 
\t float:left; 
 
\t margin:5% 10%; 
 
\t z-index:600; 
 
\t clear:left; 
 
} 
 

 
.previmg:hover { 
 
\t cursor:pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="lightbox_container"> 
 
    <div class="lightboxsm" id="img1"> 
 
    <img src="http://2017.sunkissed-villas.com/images/1.png" alt="1"/> 
 
    </div> 
 
     
 
    <div class="lightboxsm" id="img2"> 
 
    <img src="http://2017.sunkissed-villas.com/images/2.png" alt="2"/> 
 
    </div> 
 
      
 
    <div class="lightboxsm" id="img3"> 
 
    <img src="http://2017.sunkissed-villas.com/images/3.png"/> 
 
    </div>    
 
</div>