0

Im using Galleriffic (a dynamic gallery jquery plug) and Quicksand (a jquery filtering plug).

Here is my working example: http://www.metropoliscreative.com/jake_test/test1.html

If you click the thumbnails, they will load properly in the big pane. If you select project type or industry, it will sort those thumbnails based on some data types.

However, the issue is that once you sort them, the Galleriffic functionality stops working.

I'm not getting any errors in my console, nor is the code changing once I sort the thumbnails(from what I can see in my inspector). I'm not sure what the issue could be.

Thank you so much in advance for any help.

Redlist
  • 93
  • 3
  • 10

2 Answers2

0

As far as I am aware, jQuery events are attached to the elements upon page load, so if the thumbnails are being created dynamically - jQuery hasn't attached the Galleriffic functionality to them. Only way round it, would be to re-attach the Gallerific functionality on a callback after Quicksand has finished calling in the new thumbnails.

$quicksand.quicksand($filteredData, {
    duration: 1000,
    easing: 'easeInOutQuad',
    adjustHeight:   'false'
}, function() {
    $('#thumbs').galleriffic({
        imageContainerSel:      '#slideshow',
        controlsContainerSel:   '#controls'
    });
});

Hope that helps

benmacgowan
  • 185
  • 1
  • 1
  • 9
  • UrbenKeach, thank you so much for the quick response. That definitely helped and I believe you've put me on the right track. I've updated my link: metropoliscreative.com/jake_test/test1.html# It appears that jquery is successfully recalling the gallerific function after quicksand does its thing. However, I'm catching an error at this point. Ive caught the same error (imageData undefined) when galleriffic isnt configured properly, but I'm not calling it any differently than when the page loads. And it works when the page loads. Any ideas? Thanks again—SO much. – Redlist Jan 25 '11 at 16:44
0

When you use quicksand, it does not put back the ul.thumbs class that gallerific uses.

this.find('ul.thumbs > li').each

Do you have to use quicksand? can't you just use hide and show for filtering images? Or maybe, as part of the callback, you can wrap all the li in a ul.thumbs before sending them to gallerific.

vinhboy
  • 8,542
  • 7
  • 34
  • 44