灯箱图片滑块无法正常点击，滑块无法正确循环播放

Question

In my code i have three images and when each image is clicked a modal box will open and that box will have a function to show all images by clicking right arrow(next), left arrow(prev).

I've done all basic things but I am facing two problems:

1. When the next button is clicked at the time of last image it giving blank, the same is happening with prev button at first image time.
2. when at the page I click on any image it opens the modal with the first image every time, how to enable that when modal will open with particular image which I've clicked.

This is my JavaScript code:

//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

Replace all your js code and remove class="activepostimg" from your html. Here is the DEMO

Make sure that your images are in the same order when they are zoomed and not.

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')
    }
});