Jquery conflict? Quicksand vs. Gallerific cancel e

Question

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.

Answer 1

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

Answer 2

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.