Fancybox和Isotope排序和更新库顺序

Question

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

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

任何帮助都是非常感谢的。

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和lightbox1)。但由于lightbox没有可见的缩略图，这些图像实际上是从lightbox/shadowbox中删除的。

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

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

我建议在javascript中重新排序网格项的顺序，这样在调用同位素函数之前，所有的项都已经是正确的顺序，并且任何lightbox插件都不会被混淆:)

(例如：jquery sort list based on data attribute value)

希望我帮助了某人;-)对我来说很有吸引力:-)