Question

您好我正在尝试在jquery lightbox插件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的了解是基本的，所以也许有人可以提供帮助？

Answer 1

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

方法1 ：使用Fancy Box Plugin

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

方法2 ：将Jquery Cycle Plugin与灯箱一起使用此插件支持循环功能。

我更喜欢方法1 用于此类实现，但如果灯箱是您必须使用的，则可以使用方法2，而不是编写自己的代码，这可能包含错误。< / p>

由于

Answer 2

对于弹出循环，magnifix弹出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>';
      }
    }
  });

}

在jquery灯箱中制作循环

2 个答案: