I have a portfolio section here... http://bvh.delineamultimedia.com/?page_id=2 and Superbox - (http://toddmotto.com/introducing-superbox-the-reimagined-lightbox-gallery/) is working but after I click on a quicksand "filter" link the superbox seems to be disabled. Is there a way to fix this. Here is the JavaScript. I'm a bit confused as to why this is happening. I'm guessing quicksand is a bit greedy but am not for sure.
Thanks in advanced!
;(function($) {
$.fn.SuperBox = function(options) {
var superbox = $('<div class="superbox-show"></div>');
var superboximg = $('<img src="" class="superbox-current-img">');
var superboxclose = $('<div class="superbox-close"></div>');
superbox.append(superboximg).append(superboxclose);
return this.each(function() {
//$('.superbox-list').click(function() {
$('.superbox').on('click', '.superbox-list', function() {
var currentimg = $(this).find('.superbox-img');
var imgData = currentimg.data('img');
superboximg.attr('src', imgData);
if($('.superbox-current-img').css('opacity') == 0) {
$('.superbox-current-img').animate({opacity: 1});
}
if ($(this).next().hasClass('superbox-show')) {
superbox.toggle();
} else {
superbox.insertAfter(this).css('display', 'block');
}
$('html, body').animate({
scrollTop:superbox.position().top - currentimg.width()
}, 'medium');
});
$('.superbox').on('click', '.superbox-close', function() {
$('.superbox-current-img').animate({opacity: 0}, 200, function() {
$('.superbox-show').slideUp();
});
});
});
};
})(jQuery);
when the quicksand filter is active, it sets a new height for the filterable-grid
ul
and also sets overflow:hidden
which hides the superbox from being displayed.. is is being called properly, it is just hidden in the overflow of the ul
.. may need to modify the quicksand
script or find another work around..