галерея лайтбокса - скрыть предыдущую и следующую кнопки на первом и последнем изображении соответственно - PullRequest
0 голосов
/ 11 июня 2019

Я добавил плагин галереи лайт-бокса 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();
  });
...