Superbox JS & Quicksand Combo Issue

Question

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

kingkode · Accepted Answer · 2013-03-25T18:12:31.360

0

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..

edited Mar 25 '13 at 18:12

answered Mar 25 '13 at 18:07

kingkode

2,220
18
28

I was thinking of something like this $('.superbox').on('click', '.superbox-list', function() { Instead of $('.superbox-list').click(function() { – bryanlewis Mar 25 '13 at 18:14
it is something to do with the QuickSand plugin. every time that the `ul` is filtered, the plugin sets a specific height for the `ul` and also adds `overflow: hidden` to the `ul`.. if you do not have the minified version of the QS plugin, you can run a search for `overflow` and change it accordingly.. i have removed the `overflow` through the code inspector in chrome and it worked fine.. – kingkode Mar 25 '13 at 18:18
Ahh I see what you are saying. Let me see if I can find that. – bryanlewis Mar 25 '13 at 18:22
or, you could add this to your superbox click function: `$('ul.filterable-grid').css({overflow: 'visible'});` – kingkode Mar 25 '13 at 18:22
any time! enjoy that QS plugin, i've used it a bunch. – kingkode Mar 25 '13 at 18:26
Will do. I hope this works out. I still have a lot more work to do. – bryanlewis Mar 25 '13 at 18:27

Superbox JS & Quicksand Combo Issue

1 Answers1