Задача быстрой отправки jQuery при расчете позиции - PullRequest
Новая
       25

Задача быстрой отправки jQuery при расчете позиции

2 голосов
/ 23 июня 2011

Я пытаюсь реализовать плагин jquery quicksend, чтобы страница с фотографией галереи и списком категорий для их фильтрации, но есть проблема с вычислением позиции, потому что во время фильтрации все большие пальцы перемещаются влево и в конце большие пальцы возвращаются в правильное положение.

Вы можете увидеть демонстрационную страницу , чтобы понять проблему. (Я оставил медленную анимацию, чтобы вы могли проверить лучше).

Я думаю, что моя ошибка в css есть, но я не совсем понимаю, что!

Вот код JS: 

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

            });

        }); 

    });

}

А вот и галерея: 

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

Спасибо.

1 Ответ

4 голосов
/ 09 июля 2011

Вы пытались стилизовать вашу # портфолио-галерею и ее элементы списка, используя классы вместо идентификатора?

Зыбучие пески документы . Прокрутите вниз до «Рекомендации CSS».

Вместо: 

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

Попробуйте что-то вроде: 

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

Рабочая демонстрация .

...