灯箱图库-分别隐藏第一张和最后一张图片上的上一个和下一个按钮

Question

我已使用该链接https://codepen.io/mmgolden/pen/YrGddm的基础添加了jquery lightbox gallery插件。它提供了从最后一张图像开始的无限滚动，也就是说，我可以从最后一张图像滚动到第一张图像，但是反之亦然。我需要在第一个和最后一个图像上都启用无限滚动，或者必须隐藏第一个图像中的上一个按钮，然后隐藏最后一个图像中的下一个按钮。

将此链接中的代码用作基础 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();
  });