Фильтровать элементы в сетке слайд-шоу - PullRequest
Новая
       35

Фильтровать элементы в сетке слайд-шоу

0 голосов
/ 04 февраля 2019

Я использую radiantscroller вместе с фильтрами зыбучих песков и все начинает работать.Элементы фильтруются , но У меня проблема с поиском способа позиционирования элементов внутри строк ...

Пример.Моя HTML-разметка: 

<div id="myScroller">
<div class="scroller-el">
<a class="item1">image</a>
</div>
</div>

Но лучистый скроллер добавляет еще один div между #myScroller и .scroller-el с классом .radiant_scroller_row, в строке будет отображаться количество элементов, которые я поместил в скрипт лучистого скроллера: 

$(document).ready(function() {
var sc = $('#myScroller').radiantScroller({
elementWidth: 380,
cols: 3,
rows: 3,
elementMargin: 0, 
addPagination: true
});
});

Вот мой код для фильтрации, но он удаляет .radiant_scroller_row, когда я нажимаю 

$(window).load(function() {
var $data = $("#myScroller").clone();
$('.portfolio-filter li a').click(function(e) {
    $('.portfolio-filter li a').removeClass("active");   

    var filterClass=$(this).attr('class') //.split(' ').slice(-1)[0];
    filterClass = filterClass ? filterClass.split(' ')[0] : '';
    if (filterClass == 'all') {
        var $filteredData = $data.find('div[class|="radiant_scroller_row"] div[class|="scroller-el"] a');
    } else {
        var $filteredData = $data.find('a.' + filterClass);
    }
    $("#myScroller").quicksand($filteredData, {
        duration: 800,
        adjustHeight: 'dynamic' 

                });     
    $(this).addClass("active");             
    return false;
});

});

Есть ли способ изменить любой из этих фрагментов, чтобы фактически отображать строки?Или какая-нибудь альтернатива Radiant Scroller, которая может дать мне слайд сетки изображений?Этот вариант не очень удобен для работы с фильтрами (также пробовал изотоп, и даже если строки действительно появляются, разбивка на страницы всегда неверна для зыбучих песков или изотопов - он берет количество элементов из первой загрузки, поэтому при фильтрации он показывает пустые страницы.

Спасибо !!

...