Question

我在网上找到了一个脚本，用它在我的网站上为图像制作灯箱和幻灯片。问题是它没有选项可以禁用最后一张幻灯片上的下一个按钮和第一张幻灯片上的上一个按钮。所以我在这里发布代码。

我的画廊由几个代表专辑（学校项目，个人项目等）的部分组成。我在JS中编写了脚本：当您单击某个部分名称时，它会隐藏一个部分并显示另一个部分。当我列出图像时，它会从一个部分中的最后一个图像跳到下一个部分中的第一个图像。

因此，我不仅需要帮助查看上一张和第一张图像上的next和prev按钮，而且我还需要脚本来识别一个部分中的图像数量并隐藏该部分中最后一张幻灯片上的下一个按钮（同样对于prev按钮）。请记住，我是JS的初学者。我正在为我的学校项目制作这个网站。

// Lightbox
jQuery(document).ready(function($) {

  // global variables for script
  var current, size;

  $('.lightboxTrigger').click(function(e) {

    // prevent default click event
    e.preventDefault();

    // grab href from clicked element
    var image_href = $(this).attr("href");

    // determine the index of clicked trigger
    var slideNum = $('.lightboxTrigger').index(this);

    // find out if #lightbox exists
    if ($('#lightbox').length > 0) {
      // #lightbox exists
      $('#lightbox').fadeIn(300);
      // #lightbox does not exist - create and insert (runs 1st time only)
    } else {
      // create HTML markup for lightbox window
      var lightbox =
          '<div id="lightbox">' +
          '<p class="close">&times;</p>' +
          '<div id="slideshow">' +
          '<ul></ul>' +
          '<div class="nav">' +
          '<a href="#prev" class="prev slide-nav">&#10094;</a>' +
          '<a href="#next" class="next slide-nav">&#10095;</a>' +
          '</div>' +
          '</div>' +
          '</div>';

      //insert lightbox HTML into page
      $('body').append(lightbox);

      // fill lightbox with .lightboxTrigger hrefs in .gallery
      $('.gallery').find('.lightboxTrigger').each(function() {
        var $href = $(this).attr('href');
        $('#slideshow ul').append(
          '<li>' +
          '<img src="' + $href + '">' +
          '</li>'
        );
      });

    }

    // setting size based on number of objects in slideshow
    size = $('#slideshow ul > li').length;

    // hide all slide, then show the selected slide
    $('#slideshow ul > li').hide();
    $('#slideshow ul > li:eq(' + slideNum + ')').show();

    // set current to selected slide
    current = slideNum;
  });

  //Click anywhere on the page to get rid of lightbox window
  $('body').on('click', '#lightbox', function() { // using .on() instead of .live(). more modern, and fixes event bubbling issues
    $('#lightbox').fadeOut(300);
  });

  // navigation prev/next
  $('body').on('click', '.slide-nav', function(e) {

    // prevent default click event, and prevent event bubbling to prevent lightbox from closing
    e.preventDefault();
    e.stopPropagation();

    var $this = $(this);
    var dest;

    // looking for .prev
    if ($this.hasClass('prev')) {
      dest = current - 1;
      if (dest < 0) {
        dest = size - 1;
      }
    } else {
      // in absence of .prev, assume .next
      dest = current + 1;
      if (dest > size - 1) {
        dest = 0;
      }
    }

    // fadeOut curent slide, FadeIn next/prev slide
    $('#slideshow ul > li:eq(' + current + ')').fadeOut(750);
    $('#slideshow ul > li:eq(' + dest + ')').fadeIn(750);

    // update current slide
    current = dest;
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gallery school">          
           <h3>School projects</h3>
            <a class="lightboxTrigger" href="portfolio/school/img1.jpg"><img class="thumb" src="portfolio/school/img1.jpg" alt="x"></a>
            <a class="lightboxTrigger" href="portfolio/school/img2.jpg"><img class="thumb" src="portfolio/school/img2.jpg" alt="x"></a>
            <a class="lightboxTrigger" href="portfolio/school/img3.jpg"><img class="thumb" src="portfolio/school/img3.jpg" alt="x"></a>
          </div>

          <div class="gallery personal">
           <h3>Personal projects</h3>
            <a class="lightboxTrigger" href="portfolio/personal/img1.jpg"><img class="thumb" src="portfolio/school/img1.jpg" alt="x"></a>
            <a class="lightboxTrigger" href="portfolio/personal/img2.jpg"><img class="thumb" src="portfolio/school/img2.jpg" alt="x"></a>
            <a class="lightboxTrigger" href="portfolio/personal/img3.jpg"><img class="thumb" src="portfolio/school/img3.jpg" alt="x"></a>
          </div>

Answer 1

要浏览当前选定的图库，您需要获取由触发器的索引确定的幻灯片编号 父画廊

我用

实现了这个目标

var slideNum = $(this).closest('.gallery').find('.lightboxTrigger').index(this);

这样做是找到最接近的.gallery父项，然后对触发器编制索引，而不是从一开始就为所有这些索引编制索引。

这是一个有效的代码：https://codepen.io/xhynk/pen/GQVWpm?editors=1010

注意：你没有任何风格，所以我很快拼凑了一些相当丑陋的风格，因为你的图像是相对的，我用过＆＃34; lorempixel＆＃34; - 因此实际图像不会正常显示，幻灯片显示最有可能有6张相同的图像，仅用于演示目的。

JS中的注意事项在最初的$('.lightboxTrigger').click(function(e) {

中

   if( slideNum == 0 ){
        $('.prev').hide();
    } else {
        $('.prev').show();
    }

    if( slideNum == size - 1 ){
        $('.next').hide();
    } else {
        $('.next').show();
    }

上一页/下一页导航中的类似代码：$('body').on('click', '.slide-nav', function(e) {

    if( current == 0 ){
        $('.prev').hide();
    } else {
        $('.prev').show();
    }

    if( current == size - 1 ){
        $('.next').hide();
    } else {
        $('.next').show();
    }

以及基于上述父画廊的索引

var slideNum = $(this).closest('.gallery').find('.lightboxTrigger').index(this);

图库也只使用以下内容填充了来自父库的图像，而不是所有图像：

$(this).closest('.gallery').find('.lightboxTrigger').each(function() {

最后，当您关闭时，此代码仍将fadeOut图库关闭，但在淡入淡出完成后，它也将使用remove将其销毁。这允许索引和使用新的图库，而不允许用户以互连的方式滑过它们。

隐藏/停用最后一张幻灯片上的“下一步”按钮和第一张幻灯片上的“上传”按钮

1 个答案: