ライトボックスの画像スライダがクリックされず、スライダが正しくループしていない

Question

私のコードでは3つの画像があり、各画像をクリックするとモーダルボックスが開き、そのボックスには右矢印をクリックしてすべての画像を表示する機能があります（次へ）、左矢印（前）。

私はすべての基本的なことをやったが、私は二つの問題直面しています。次のボタンは、それが空白与える最後の画像の時にクリックされると

1. を、同じことが第一の画像でPREVボタンで起こっています時間。
2. 画像をクリックすると、毎回最初の画像でモーダルが開きます。クリックした特定の画像でモーダルが開くと、その画像を有効にする方法。

これは私のJavaScriptコードです：

//next prev images 
//active image setting 
$('.image_post li:first').addClass('activepostimg'); 
//code for next image 
$('.buttons_next').on('click', function() { 
    $('.image_post li.activepostimg').index() + parseInt(1) !== $('.image_post li').length ; 
    $('.activepostimg').removeClass('activepostimg').next('.image_post li').addClass('activepostimg'); 
}); 
//code for previous 
$('.buttons_prev').on('click', function() { 
    $('.image_post li.activepostimg').index() + parseInt(1) !== $('.image_post li').length ; 
    $('.activepostimg').removeClass('activepostimg').prev('.image_post li').addClass('activepostimg'); 
}); 
//Image counter 
var totalItems = $('.image_post li').length; 
var currentIndex = $('.activepostimg').index() + 1; 
$('.slide_image_counter a').html(''+currentIndex+'/'+totalItems+''); 
//for next 

Code on Jsfiddle

Answer 1

は、すべてのJSコードを交換し、あなたのhtmlからclass="activepostimg"を削除します。ここにはDEMO

ズームしたときと同じ順序で画像が表示されていることを確認してください。

var totalItems = $('.image_post li').length, currentIndex = 1; 
$('.slide_image_counter a').html('' + currentIndex + '/' + totalItems + ''); 

//code for opening image 
$('.grid img').on('click', function() { 
    currentIndex = $('.grid img').index(this) + 1; 
    $('.slide_image_counter a').html('' + currentIndex + '/' + totalItems + ''); 
    $(".image_post li").removeClass("activepostimg"); 
    $('.image_post li').eq(currentIndex - 1).addClass('activepostimg') 
}); 

//code for next image 
$('.buttons_next').on('click', function() { 
    if($('.image_post li.activepostimg').index() < ($('.image_post li').length - 1)){ 
     currentIndex++; 
     $('.slide_image_counter a').html('' + currentIndex + '/' + totalItems + ''); 
     $('.activepostimg').removeClass('activepostimg').next('.image_post li').addClass('activepostimg'); 
    } else { 
     currentIndex = 1; 
     $('.slide_image_counter a').html('' + currentIndex + '/' + totalItems + ''); 
     $(".image_post li").removeClass("activepostimg"); 
     $('.image_post li').eq(currentIndex - 1).addClass('activepostimg') 
    } 
}); 

//code for previous 
$('.buttons_prev').on('click', function() { 
    if ($('.image_post li.activepostimg').index() > 0) { 
      currentIndex--; 
     $('.slide_image_counter a').html('' + currentIndex + '/' + totalItems + ''); 
     $('.activepostimg').removeClass('activepostimg').prev('.image_post li').addClass('activepostimg'); 
    } else { 
     currentIndex = $('.image_post li').length; 
     $('.slide_image_counter a').html('' + currentIndex + '/' + totalItems + ''); 
     $(".image_post li").removeClass("activepostimg"); 
     $('.image_post li').eq(currentIndex - 1).addClass('activepostimg') 
    } 
});