Javascript 在bxslider中使用fancybox时显示多个Thumnail

我在bxslider中使用fancybox。当我打开我的图像时，多个缩略图一次又一次地重复它们。这是在我添加bxslider之后发生的。你知道怎么会发生吗。 HTML代码

            <!-- End .overlay -->
          </a>
          <a href="images\Gallery\picturesxlriaxiomsynergysummit\pic2.jpg" class="fancybox" rel="gallery1" >
          </a>
          <a href="images\Gallery\picturesxlriaxiomsynergysummit\pic3.jpg" class="fancybox" rel="gallery1">
          </a>
          <a href="images\Gallery\picturesxlriaxiomsynergysummit\pic4.jpg" class="fancybox" rel="gallery1">
          </a>
        </article>

            <!-- End .overlay -->
          </a>
          <a href="images\Gallery\picturesxlriaxiomsynergysummit\pic2.jpg" class="fancybox" rel="gallery1" >
          </a>
          <a href="images\Gallery\picturesxlriaxiomsynergysummit\pic3.jpg" class="fancybox" rel="gallery1">
          </a>
          <a href="images\Gallery\picturesxlriaxiomsynergysummit\pic4.jpg" class="fancybox" rel="gallery1">
          </a>
        </article>

您应该从Bxslider元素克隆中删除rel属性。通常，可以使用滑动加载功能实现：

            <!-- End .overlay -->
          </a>
          <a href="images\Gallery\picturesxlriaxiomsynergysummit\pic2.jpg" class="fancybox" rel="gallery1" >
          </a>
          <a href="images\Gallery\picturesxlriaxiomsynergysummit\pic3.jpg" class="fancybox" rel="gallery1">
          </a>
          <a href="images\Gallery\picturesxlriaxiomsynergysummit\pic4.jpg" class="fancybox" rel="gallery1">
          </a>
        </article>

$(document).ready(function(){
    $('.fourslide').bxSlider({
        slideWidth: 280,
        minSlides: 1,
        maxSlides: 4,
        moveSlides: 1,
        slideMargin: 0,
        adaptiveHeight: true,
        controls: true,
        auto: false,
        onSliderLoad: function(){
            $('.bx-clone').each(function(){
                $(this).removeAttr('rel');
            })
        }       
    });
});

---

一些滑块克隆了imagesconsider，为您的问题添加了JSFIDLE