Array onClickの次の画像を表示

Question

私は画面の矢印でクリックできる画像の設定に取り組んでいます。現在、ループと配列を介してすべての画像が表示されています。私はそれをセットアップすることができたので、小さな画像のプレビューでメイン画像がその画像に変わるようにしました。あなたは大きなバージョンを見るためにそれらに乗ることができます。

私の配列は、モンゴモデル内である：以下Listings.currentimages

私の現在のコードは、上のホバリング時に取り上げ画像を引き継ぐために小さな画像を取得するために動作します。画面左/右の矢印で作業するためにコードを変更するにはどうすればよいですか？

<% var imgsrc = awspath + listings.currentimages[0] %> 
<img id='mainPicture' class="image-resposive" src=<%=imgsrc%>> 
<div id='allimages'> 
    <% for(var i = 0; i < listings.currentimages.length; i++) { %> 
     <div class='smallerImages'> 
      <% var imgsrc = awspath + listings.currentimages[i] %> 
      <img class="small" src="<%= imgsrc %>"> 
     </div> 
    <% } %> 
</div> 

ホバー機能：

$('.small').hover(function() { 
    $('.small').removeClass('selectedImage') 
    var src = $(this).attr('src'); 
    $(this).addClass('selectedImage') 
    $('#mainPicture').attr('src', src); 
}); 

Answer 1

はあなたが右または左に移動するために、2つの次のイベントハンドラを定義することができる2つのアイコン（次/前のページ）持っていると仮定：

$('#nextArrow').on('click', function(e) { 
    var anchestor = $('.small.selectedImage').closest('.smallerImages'); 
    var nextImg = $('#allimages .smallerImages:first .small'); 
    if (anchestor.next().length != 0) { 
     nextImg = anchestor.next().find('.small'); 
    } 
    $('.small').removeClass('selectedImage'); 
    var src = nextImg.attr('src'); 
    nextImg.addClass('selectedImage'); 
    $('#mainPicture').attr('src', src); 
}) 


$('#prevtArrow').on('click', function(e) { 
    var anchestor = $('.small.selectedImage').closest('.smallerImages'); 
    var nextImg = $('#allimages .smallerImages:last .small'); 
    if (anchestor.prev().length != 0) { 
     nextImg = anchestor.prev().find('.small'); 
    } 
    $('.small').removeClass('selectedImage'); 
    var src = nextImg.attr('src'); 
    nextImg.addClass('selectedImage'); 
    $('#mainPicture').attr('src', src); 
}) 

Answer 2

私はあなたがしたいことをするためにいくつかのコードを作成しました。基本的には、現在表示されているイメージのインデックスを保持し、そのインデックスを使用して正しいイメージを表示する必要があります。

私は、拡大画像の偽のリストを作成しました。あなたはそれを捨てることができます。

<script> 
 
    var currentImage = 0; 
 
    var maximages = 4; 
 

 
    $(document).ready(function() { 
 
     $('#leftarrow').click(function() { 
 
     currentImage = currentImage - 1; 
 
     if (currentImage < 0) { 
 
      currentImage = 0; 
 
     } 
 
     updateImage(); 
 
     }); 
 

 
     $('#rightarrow').click(function() { 
 
     currentImage = currentImage + 1; 
 
     if (currentImage > maximages) { 
 
      currentImage = maximages; 
 
     } 
 
     updateImage(); 
 
     }); 
 
    }); 
 

 
    function updateImage() { 
 
     var kids = $('.smallerImages').children(); 
 
     var newsrc = kids.eq(currentImage).attr('src'); 
 
     
 
     $('#mainPicture').attr('src', newsrc); 
 

 
    } 
 
    </script> 
 

 
    <img id='leftarrow' src="leftarrow.png" style="width:30px;height:200px;" /> 
 

 
    <img id="mainPicture" class="image-resposive" src="test1.png" /> 
 
    <span id="rightarrow"> 
 
     <img src="leftarrow.png" style="width:30px;height:200px;" /> 
 
    </span> 
 
    <div id="allimages"> 
 
    <div class="smallerImages"> 
 
     <img class="small" src="image1.png" /> 
 
    </div> 
 
    <div class="smallerImages"> 
 
     <img class="small" src="image2.png" /> 
 
    </div> 
 
    <div class="smallerImages"> 
 
     <img class="small" src="image3.png" /> 
 
    </div> 
 
    <div class="smallerImages"> 
 
     <img class="small" src="image4.png" /> 
 
    </div> 
 
    <div class="smallerImages"> 
 
     <img class="small" src="image5.png" /> 
 
    </div> 
 
    </div> 
 

の