0

Using the jQuery Fancybox plugin with Isotope, I'm trying to figure out how to update the Fancybox gallery order in lightbox view after I change the Isotope sort by options.

When I re-sort the images I need to be able to tell Fancybox what the new order is, so that when I navigate between images in lightbox view it goes to the next image in the newly sorted order. Right now the next/previous buttons take you to the next/previous image in the original sort order.

Any help is much appreciated.

Dylan Fisher
  • 316
  • 3
  • 8

3 Answers3

0

With reference to this page, the relevant part looks something like this...

$('.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));
});

It's a hack of course. Whenever one of the checkboxes is changed, this routine waits a bit to let isotope do its thing and then updates all 'rels' to correspond to the opacity of their respective parents. So there will actually be two sets of rels (lightbox[0] and lightbox[1]). But because there is no visible thumbnail for lightbox[0], those images are in effect removed from the lightbox/shadowbox.

Strawberry
  • 33,750
  • 13
  • 40
  • 57
  • It seems like the links you and JFK provided both deal with handling sets of images when the sort is different than the original set of images, but still relies on the original DOM order. I need to tell Fancybox to not rely on the DOM order, but instead navigate based on the newly arranged Isotope order, which is different than what is displayed in the DOM. – Dylan Fisher Jun 11 '13 at 08:50
  • Hm, yes, that's right. But the solution for the filtering quietly rewrites the DOM, so couldn't the solution for ordering do the same thing? – Strawberry Jun 11 '13 at 09:16
0

I came across the same problem and looked around to find a solution and stumbled upon this as well. As I couldn't find a solution, I thought I'd try it myself and the solution was simple. Not sure if this has an affect on performance of the browser, but simple DOM manipulation will give you the required behavior. I'm using isotope V2 and events in this version is a bit different to that in V1. Fancybox version shouldn't matter.

First you have to make sure you have set isInitLayout: false when initializing isotope. 

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

After that, you have to bind to the layoutComplete event on your isotope container.

$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;
        }
    }
});

As you set isInitLayout to false while initializing isotope, you have to call the arrange method manually to lay it all out properly.

$container.isotope('arrange');

I'm pretty sure there is room for improvement. But I'm happy with this solution.

Hope someone will find this useful.

Amila
  • 3,711
  • 3
  • 26
  • 42
0

Came across the exact same issue tonight!

I suggest re-ordering the order of your griditems in javascript, before you call the isotope function, that way, all your items will already be in the correct order and any lightbox plugin won't get confused :)

(like this for example: jquery sort list based on data attribute value)

Hope I helped someone ;-) Worked like a charm for me :-)

Community
  • 1
  • 1
Ben Van Looy
  • 45
  • 1
  • 5