Question

将jQuery Fancybox插件与Isotope一起使用，我试图找出在更改Isotope按选项排序后如何在灯箱视图中更新Fancybox图库订单。

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

非常感谢任何帮助。

Answer 1

参考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]）。但由于灯箱[0]没有可见的缩略图，这些图像实际上已从灯箱/影子箱中删除。

Answer 2

我遇到了同样的问题，并四处寻找解决方案并偶然发现了这一点。由于我找不到解决方案，我想我自己尝试一下，解决方案很简单。不确定这是否会影响浏览器的性能，但简单的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');

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

希望有人会觉得这很有用。

Answer 3

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

我建议在调用同位素功能之前重新排序你的网格项目的顺序，这样，你的所有项目都将按照正确的顺序排列，任何灯箱插件都不会混淆：）< / p>

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

希望我能帮助某人;-)对我来说像是一种魅力： - ）

Fancybox和Isotope排序和更新库订单

3 个答案: