Question

I’m trying to implement the jquery quicksend plugin, to a page with a gallery photo and a category list to filter them, but there is a problem with position calculation, because during the filtering, all thumbs move on left and, at the end, the thumbs return to the right position.

You can see the demo page, so you can understand the problem. (I’ve left slow animation, so you can check better).

I think there is some my mistake with css, but I don’t really understand what!

Here the JS code:

    // gallery
if (jQuery().quicksand) {

    (function($) {

        $.fn.sorted = function(customOptions) {
            var options = {
                reversed: false,
                by: function(a) {
                    return a.text();
                }
            };

            $.extend(options, customOptions);

            $data = jQuery(this);
            arr = $data.get();
            arr.sort(function(a, b) {

                var valA = options.by($(a));
                var valB = options.by($(b));

                if (options.reversed) {
                    return (valA < valB) ? 1 : (valA > valB) ? -1 : 0;              
                } else {        
                    return (valA < valB) ? -1 : (valA > valB) ? 1 : 0;  
                }

            });

            return $(arr);

        };

    })(jQuery);

    jQuery(function($) {

        var read_button = function(class_names) {

            var r = {
                selected: false,
                type: 0
            };

            for (var i=0; i < class_names.length; i++) {

                if (class_names[i].indexOf('selected-') == 0) {
                    r.selected = true;
                }

                if (class_names[i].indexOf('segment-') == 0) {
                    r.segment = class_names[i].split('-')[1];
                }
            };

            return r;

        };

        var determine_sort = function($buttons) {
            var $selected = $buttons.parent().filter('[class*="selected-"]');
            return $selected.find('a').attr('data-value');
        };

        var determine_kind = function($buttons) {
            var $selected = $buttons.parent().filter('[class*="selected-"]');
            return $selected.find('a').attr('data-value');
        };

        var $preferences = {
            duration: 2000,
            adjustHeight: 'auto'
        }

        var $list = jQuery('#portfolio-gallery');
        var $data = $list.clone();

        var $controls = jQuery('.gallery-categories');

        $controls.each(function(i) {

            var $control = jQuery(this);
            var $buttons = $control.find('a');

            $buttons.bind('click', function(e) {

                var $button = jQuery(this);
                var $button_container = $button.parent();
                var button_properties = read_button($button_container.attr('class').split(' '));      
                var selected = button_properties.selected;
                var button_segment = button_properties.segment;

                if (!selected) {

                    $buttons.parent().removeClass();
                    $button_container.addClass('selected-' + button_segment);

                    var sorting_type = determine_sort($controls.eq(1).find('a'));
                    var sorting_kind = determine_kind($controls.eq(0).find('a'));

                    if (sorting_kind == 'all') {
                        var $filtered_data = $data.find('li');
                    } else {
                        var $filtered_data = $data.find('li.' + sorting_kind);
                    }

                    var $sorted_data = $filtered_data.sorted({
                        by: function(v) {
                            return $(v).find('strong').text().toLowerCase();
                        }
                    });

                    $list.quicksand($sorted_data, $preferences, function () {
                            yiw_lightbox();
                            Cufon.replace('#portfolio-gallery h6');
                    });

                }

                e.preventDefault();

            });

        }); 

    });

}

And here the css of gallery:

.gallery-wrap { position:relative; width:675px; float:left; }
#portfolio-gallery { list-style:none; margin:0; width:710px; } 
#portfolio-gallery li { float:left; margin:0 35px 0 0; width:201px; height:315px; position:relative; overflow:hidden; } 
.layout-sidebar-no #portfolio-gallery li { margin:0 50px 0 0; }
#portfolio-gallery li .post-thumb a { display:block; width:179px; height:179px; padding:10px; border:1px solid #b2b0b0; } 
#portfolio-gallery li .post-thumb img { border:0; padding:0; width:179px; height:179px; } 
#portfolio-gallery li .post-thumb .shadow-thumb { width:199px; height:27px; background:url('images/bg/shadow-gallery.png') bottom center no-repeat; } 
#portfolio-gallery li h6 { font-style:italic; }
#portfolio-gallery li p { color:#656262; font-size:90%; } 
#portfolio-gallery li h6, #portfolio-gallery li p { margin:0; }
#content .gallery .gallery-caption {color: #888;font-size: 12px;margin: 0 0 12px;}

Thank you.

Answer 1

Have you tried styling your #portfolio-gallery and its list items using classes instead of an ID?

Quicksand docs. Scroll down to “CSS recommendations”.

Instead of:

#portfolio-gallery li { float:left; margin:0 35px 0 0; width:201px; height:315px; position:relative; overflow:hidden; } 

Try something like:

.gallery-wrap li { float:left; margin:0 35px 0 0; width:201px; height:315px; position:relative; overflow:hidden; }

Working demo.