Question

我正在尝试建立一个图库，点击每个图像打开一个孤立的灯箱，您可以点击相关的图像，但必须保持在集合中。我已经得到它，以便它可以动态地将图像添加到幻灯片中，但我无法创建几个单独的幻灯片而不是一个连续的幻灯片

我做了一个简单的代码来说明我的意思 - 目标是让“下一个”按钮循环“一”“两”和“三”然后循环回“一”（而不是继续到“四”，并在“四”到“六”中有类似的行为

正如您所看到的，它可以工作，但所有图像（“一个”到“六个”）都在一个长幻灯片中。我希望“Starts with”选择器会为我做，但它似乎仍然抓住了所有这些。

Codepen示例：http://codepen.io/anon/pen/gbBWOj

CSS：

body { margin: 0; padding: 0; background: #efefef; text-align:center; font-size:30px;}
ul
{list-style-type: none;}
/* lightbox styles */
#lightbox { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background:
  url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA9JREFUeNpiYGBg2AwQYAAAuAC01qHx9QAAAABJRU5ErkJggg==) repeat; }

#lightbox p { text-align: right; color: #fff; margin-right: 20px; font-size: 12px; }

#lightbox img { max-width: 940px; }

/* slideshow styles */
#slideshow { position: relative; z-index: 100; width: 600px; height: 350px; margin: 0 auto; padding: 10px; background-color: #fff; box-shadow: 0 0 20px rgba(0,0,0,0.4); }
#slideshow ul > li { position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; list-style: none; }
.nav { display: none; }
.prev, .next { position: absolute; top: 50%; background: rgba(100, 100, 100, .5); padding: .25em .5em; color: #fff; text-decoration: none; }
.next { right: 10px; }
.prev { left: 10px; }

HTML：

    <ul class="imageSet" id="set1">
        <li>
            <a href="http://placehold.it/600x350/f99/fff&text=one" class="lightboxTrigger">
            one
            </a>
        </li>
        <li>
            <a href="http://placehold.it/600x350/9f9/fff&text=two" class="lightboxTrigger">
            two
            </a>
        </li>
        <li>
            <a href="http://placehold.it/600x350/99f/fff&text=three" class="lightboxTrigger">
            three
            </a>
        </li>
    </ul>

  <ul class="imageSet" id="set2">
        <li>
            <a href="http://placehold.it/600x350/f99/fff&text=four" class="lightboxTrigger">
            four
            </a>
        </li>
        <li>
            <a href="http://placehold.it/600x350/9f9/fff&text=five" class="lightboxTrigger">
            five
            </a>
        </li>
        <li>
            <a href="http://placehold.it/600x350/99f/fff&text=six" class="lightboxTrigger">
            six
            </a>
        </li>
    </ul>

JS：

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>Click to close</p>' +
          '<div id="slideshow">' +
          '<ul></ul>' +        
          '<div class="nav">' +
          '<a href="#prev" class="prev slide-nav">prev</a>' +
          '<a href="#next" class="next slide-nav">next</a>' +
          '</div>' +
          '</div>' +
          '</div>';

      //insert lightbox HTML into page
      $('body').append(lightbox);

      // fill lightbox with .lightboxTrigger hrefs in #imageSet
      $("[id^='set']").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);
  });

  // show/hide navigation when hovering over #slideshow
  $('body').on(
    { mouseenter: function() {
      $('.nav').fadeIn(300);
    }, mouseleave: function() {
      $('.nav').fadeOut(300);
    }
    },'#slideshow');

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

});

Answer 1

更改选择器以使用类似

的ID获取该ul下的选择器

$("[id^='"+$(this).parent().parent()[0].id+"']")

编辑： -

这将修复索引的起点

var slideNum = $("[id^='"+$(this).parent().parent()[0].id+"']").find('.lightboxTrigger').index(this);

我还添加了灯箱的删除功能

再次检查代码

http://codepen.io/anon/pen/vEVmWz

Answer 2

您已经可以使用HTML了。将代码嵌入到选择.imageSet元素的图层中

$('.imageSet').each(function(imageSetIndex, imageSetElement){
    ...
});

然后使用imageSetElement作为.lightboxTrigger选择器的上下文

$('.imageSet').each(function(imageSetIndex, imageSetElement){

    $('.lightboxTrigger', imageSetElement).click(function(e) {
        ... 
    });

});

最后，进行更改以处理$（＆＃39; #slideshow ul＆＃39;）LI元素，只使用范围内的.lightboxTrigger元素。

如何在几个不同的ID上运行相同的jQuery函数？

2 个答案: