0

使用带有Isotope的 jQuery Fancybox插件，我试图弄清楚在我更改 Isotope 排序选项后如何在灯箱视图中更新 Fancybox 画廊顺序。

当我重新排序图像时，我需要能够告诉 Fancybox 新顺序是什么，这样当我在灯箱视图中的图像之间导航时，它会以新排序的顺序转到下一个图像。现在，下一个/上一个按钮会将您带到原始排序顺序中的下一个/上一个图像。

任何帮助深表感谢。

4

3 回答 3

0

参考this page，相关部分看起来像这样......

$('.option-set').change(function() {
var $this = $(this);
var delay = 1100; // approx 1 second delay after last input

clearTimeout($this.data('timer'));
$this.data('timer', setTimeout(function(){
    $this.removeData('timer');

$('a[rel^="lightbox"]').each(function() {
var opacity = $(this).parent().css("opacity");
$(this).attr('rel','lightbox['+opacity+']');
});
Shadowbox.clearCache();
Shadowbox.setup();
}, delay));
});

这当然是一个黑客。每当更改其中一个复选框时，此例程都会稍等片刻，让同位素做它的事情，然后更新所有“rels”以对应其各自父项的不透明度。所以实际上会有两组 rels（lightbox[0] 和 lightbox[1]）。但由于 lightbox[0] 没有可见的缩略图，这些图像实际上已从 lightbox/shadowbox 中删除。

于 2013-06-11T08:40:31.797 回答
0

我遇到了同样的问题，环顾四周寻找解决方案，也偶然发现了这个问题。由于找不到解决方案，我想自己尝试一下，解决方案很简单。不确定这是否会影响浏览器的性能，但简单的DOM操作将为您提供所需的行为。我正在使用同位素 V2，此版本中的事件与 V1 中的事件有点不同。Fancybox 版本无关紧要。

首先你必须确保你isInitLayout: false在初始化同位素时已经设置好了。

var $container = $("#isotopeContainer");
$container.isotope({
   //other options
   isInitLayout: false
});

之后，您必须绑定到layoutComplete同位素容器上的事件。

$container.isotope('on', 'layoutComplete', function(isoInstance, laidOutItems) {
    var $firstItem = laidOutItems[0].element;

    $($firstItem).prependTo(isoInstance.element);

    var $lastMovedItem = $firstItem,$nextItem;

    for (var i = 0; i < laidOutItems.length; i++) {
        $nextItem = laidOutItems[i].element;
        if ($nextItem != $firstItem) {
            $($nextItem).insertAfter($lastMovedItem);
            $lastMovedItem = $nextItem;
        }
    }
});

正如您在初始化同位素时设置isInitLayout的那样false，您必须arrange手动调用该方法以正确布局。

$container.isotope('arrange');

我很确定还有改进的余地。但我对这个解决方案很满意。

希望有人会发现这很有用。

于 2014-09-17T10:45:43.917 回答
0

今晚遇到完全相同的问题！

我建议在调用 isotope 函数之前在 javascript 中重新排序 griditems 的顺序，这样，您的所有项目都将处于正确的顺序，并且任何灯箱插件都不会混淆:)

（例如：jquery sort list based on data attribute value）

希望我帮助了某人;-)对我来说就像一个魅力:-)

于 2016-08-11T20:49:05.870 回答