灯箱图像滑块没有点击明智，滑块没有正确循环

Question

在我的代码中，我有三个图像，当单击每个图像时，将打开一个模式框，该框将具有通过单击右箭头（下一个）、左箭头（上一个）来显示所有图像的功能。

我已经完成了所有基本的事情，但我面临两个问题：

1. 当在最后一张图像时单击下一个按钮时，它会显示空白，在第一个图像时，上一个按钮也会发生同样的情况。
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')
    }
});