Я добавил плагин галереи лайт-бокса jquery с основанием этой ссылки https://codepen.io/mmgolden/pen/YrGddm. Он обеспечивает бесконечную прокрутку от последнего изображения, то есть я могу прокрутить до первого изображения из последнего изображения, но не могу сделать этот порок наоборот. Либо мне нужно включить бесконечную прокрутку как на первом, так и на последнем изображении, или нужно скрыть предыдущую кнопку на первом изображении и скрыть следующую кнопку на последнем изображении.
Использовал код из этой ссылки в качестве базы
https://codepen.io/mmgolden/pen/YrGddm
// Lightbox
var $overlay = $('<div id="overlay"></div>');
var $galleryContainer = $('<div class="gallery-imgs"></div>');
var $image = $("<img class='current_img'/><div class='box-inset'></div>");
var $prevButton = $('<div id="prevButton"><img src="assets/images/g-left.png"></div>');
var $nextButton = $('<div id="nextButton"><img src="assets/images/g-right.png"></div>');
//Add overlay
$overlay.append($galleryContainer);
$galleryContainer.append($image).prepend($prevButton).append($nextButton);
$("#gallery").append($overlay);
// Hide overlay on default
$overlay.hide();
// When an image is clicked
$(".img-overlay").click(function(event) {
$('.gallery-caption').text('');
var c = $(this).prev().text();
var fb = '<img src="assets/images/fb -2.png">' +
'<span>3.44k</span>' +
'<img src="assets/images/g.png">' +
'<span>2.1k</span>' +
'<img src="assets/images/twitter -2.png">' +
'<span>7.18k</span>' +
'</p>' +
'</div>';
$('.gallery-desc').remove();
$('.gallery-imgs').append('<div class="gallery-desc" onclick="allowClick(event)"><p class="gallery-caption" style="color:#fff;">'+c+'</p> <p class="social-status">'+fb+'</p></div>');
// Prevents default behavior
event.preventDefault();
// Adds href attribute to variable
var imageLocation = $(this).prev().attr("href");
// Add the image src to $image
$image.attr("src", imageLocation);
// Fade in the overlay
$overlay.fadeIn("slow");
$("body").disableScroll();
});
// When the overlay is clicked
$overlay.click(function() {
// Fade out the overlay
$(this).fadeOut("slow");
$("body").enableScroll();
});
$(".box-inset").click(function(event) {
event.stopPropagation();
})
// $(".gallery-desc").click(function(event) {
// event.stopPropagation();
// })
var allowClick = function(event){
//alert()
event.stopPropagation();
}
// When next button is clicked
$nextButton.click(function(event) {
// Hide the current image
$("#overlay .current_img").hide();
// Overlay image location
var $currentImgSrc = $("#overlay .current_img").attr("src");
// Image with matching location of the overlay image
var $currentImg = $('#image-gallery img[src="' + $currentImgSrc + '"]');
// Finds the next image
var $nextImg = $($currentImg.closest(".image").next().find(".img-responsive"));
// All of the images in the gallery
var $images = $("#image-gallery img");
// If there is a next image
if ($nextImg.length > 0) {
// Fade in the next image
$("#overlay .current_img").attr("src", $nextImg.attr("src")).fadeIn(100);
} else {
// Otherwise fade in the first image
$("#overlay .current_img").attr("src", $($images[0]).attr("src")).fadeIn(100);
}
// Prevents overlay from being hidden
event.stopPropagation();
});
// When previous button is clicked
$prevButton.click(function(event) {
// Hide the current image
$("#overlay .current_img").hide();
// Overlay image location
var $currentImgSrc = $("#overlay .current_img").attr("src");
// Image with matching location of the overlay image
var $currentImg = $('#image-gallery img[src="' + $currentImgSrc + '"]');
// Finds the next image
var $nextImg = $($currentImg.closest(".image").prev().find(".img-responsive"));
// Fade in the next image
$("#overlay .current_img").attr("src", $nextImg.attr("src")).fadeIn(100);
// Prevents overlay from being hidden
event.stopPropagation();
});