在jQuery灯箱中制作循环答案

【问题标题】：make loop in jquery lightbox在jQuery灯箱中制作循环
【发布时间】：2012-09-11 05:30:04
【问题描述】：

您好，我正在尝试在 jquery 灯箱插件 http://leandrovieira.com/projects/jquery/lightbox/ 中为图片库创建循环。（当它到达最后一张图像时，显示第一张图像的下一个按钮，或者当它显示第一张图像时，显示最后一张图像的上一个按钮）到目前为止，我发现我需要更改这些行：

        // Show the prev button, if not the first image in set
        if ( settings.activeImage != 0 ) {
            if ( settings.fixedNavigation ) {
                $('#lightbox-nav-btnPrev').css({ 'background' : 'url(' + settings.imageBtnPrev + ') left 15% no-repeat' })
                    .unbind()
                    .bind('click',function() {
                        settings.activeImage = settings.activeImage - 1;
                        _set_image_to_view();
                        return false;
                    });
            } else {
                // Show the images button for Next buttons
                $('#lightbox-nav-btnPrev').unbind().hover(function() {
                    $(this).css({ 'background' : 'url(' + settings.imageBtnPrev + ') left 15% no-repeat' });
                },function() {
                    $(this).css({ 'background' : 'transparent url(' + settings.imageBlank + ') no-repeat' });
                }).show().bind('click',function() {
                    settings.activeImage = settings.activeImage - 1;
                    _set_image_to_view();
                    return false;
                });
            }
        }

        // Show the next button, if not the last image in set
        if ( settings.activeImage != ( settings.imageArray.length -1 ) ) {
            if ( settings.fixedNavigation ) {
                $('#lightbox-nav-btnNext').css({ 'background' : 'url(' + settings.imageBtnNext + ') right 15% no-repeat' })
                    .unbind()
                    .bind('click',function() {
                        settings.activeImage = settings.activeImage + 1;
                        _set_image_to_view();
                        return false;
                    });
            } else {
                // Show the images button for Next buttons
                $('#lightbox-nav-btnNext').unbind().hover(function() {
                    $(this).css({ 'background' : 'url(' + settings.imageBtnNext + ') right 15% no-repeat' });
                },function() {
                    $(this).css({ 'background' : 'transparent url(' + settings.imageBlank + ') no-repeat' });
                }).show().bind('click',function() {
                    settings.activeImage = settings.activeImage + 1;
                    _set_image_to_view();
                    return false;
                });
            }
        }

我的 jquery 知识很基础，所以也许有人可以帮忙？

【问题讨论】：

标签： javascript jquery loops lightbox

【解决方案1】：

我不确定灯箱是否支持循环。顺便说一句，您可以使用两种方法来做同样的事情。

方法一：使用Fancy Box Plugin

您的图像也将在弹出窗口中打开，并且它还支持循环，如您所愿。它是高度可定制的。

方法二：使用Jquery Cycle Plugin和灯箱这个插件支持循环功能。

对于此类实现，我会首选方法 1，但如果您必须使用 lightbox，您可以使用方法 2，而不是编写可能包含错误的自己的代码。

谢谢

【讨论】：

【解决方案2】：

对于弹出循环，magnifix popup this 方式：

for (i = 1; i <= 2; i++) {

  console.log(i);

  $('.popup-gallery' + i).magnificPopup({
    delegate: 'a',
    type: 'image',
    tLoading: 'Loading image #%curr%...',
    mainClass: 'mfp-img-mobile',
    gallery: {
      enabled: true,
      navigateByImgClick: true,
      preload: [0, 1] // Will preload 0 - before current, and 1 after the current image
    },
    image: {
      tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
      titleSrc: function(item) {
        return item.el.attr('title') + '<small>by PNG City Builder</small>';
      }
    }
  });

}

【讨论】：