msearch2 + masonry

Привет.

Вообщем у меня есть блок новостей. Все блоки складываются кирпичеком через скрипт masonry.js.
То есть когда страница загружается, срабатывает функция вызова скрипта и блоки нормально показываются.

Но когда делаешь фильтрацию новостей через msearch2 функция не срабатывает (из-за аякса).

Можно как-нибудь запускать функцию, каждый раз при фильтрации… или же есть более правильное решение?

Павел

23 июня 2015, 06:54

2 483

Комментарии: 11

Ганин Роман

23 июня 2015, 09:59

masonry.desandro.com/methods.html#layout-masonry

Павел

23 июня 2015, 10:17

А можно поподробней пожалуйста, не могу разобраться.

Максим Кузнецов

23 июня 2015, 10:17

$(document).ajaxStop(function(){
	//повторная инициализация masonry.js тут	
});

Василий Наумкин

23 июня 2015, 10:18

Скорее

$(document).on('mse2_load', function() {
	//повторная инициализация masonry.js тут	
});

Павел

23 июня 2015, 10:19

А подскажите пожалуйста, где это вызывать?

Максим Кузнецов

23 июня 2015, 10:30

Оум… Ну смотрите:

У вас, наверняка, или внутри тега head или перед закрывающим тегом body есть строчки в духе:

<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="scripts/masonry.js"></script>

<script type="text/javascript">
	$(document).ready(function(){ 
		$('#container').masonry(); //этим вы инициализируете ваш masonry скрипт
	});
	//здесь может быть еще код.
</script>

— в том месте, где написано «здесь может быть еще код», сразу после }); пишите:

$(document).on('mse2_load', function() {
	$('#container').masonry();
});

— ну и "$('#container').masonry();" нужно заменить на ваш вызов masonry, само собой.

Павел

23 июня 2015, 11:53

Перепробовал, не получается

<script src="assets/js/masonry.pkgd.min.js"></script>
		<script type="text/javascript">
        	$(document).ready(function(){ 
        		$('#mse2_results').masonry({
        		    columnWidth: 280,
                    itemSelector: '.grid_item',
                    gutter: 30
        		});
        	});
        	$(document).on('mse2_load', function() {
            	$('#mse2_results').masonry({
        		    columnWidth: 280,
                    itemSelector: '.grid_item',
                    gutter: 30
        		});
            });
        </script>

Павел

23 июня 2015, 11:59

Вызываю через mfilter:

[[!mFilter2? 
		   &element=`pdoResources`
		   &parents=`22` 
		   &filters=`tv|video`
		   &includeContent=`1`
		   &includeTVs=`img_preview,HitsPage`
		   &tpl=`tpl_video`
		   &tplOuter=`tpl_video_outer`
		   &tplFilter.row.default=`tpl_video_chekbox`
		   &tplFilter.outer.default=`tpl_video_filter`
]]

Максим Кузнецов

23 июня 2015, 15:40

Если не проблемно — киньте линк на сайт.

И у masonry, похоже, есть свой метод для обновления — container.masonry(«reloadItems»);. Возможно, вам вызывать на событие on('mse2_load') нужно его.

Павел

23 июня 2015, 15:43

Скинуть сайт сюда не могу, если только в личку…
Проблему решил, скидываю код:

<script>
	function masonryFunc(){
            var $container = $('#mse2_results');
            $container.masonry({
                columnWidth: 280,
                itemSelector: '.grid_item',
                gutter: 30,
                isAnimated: true,
                
            });
        } 
        setTimeout(masonryFunc,300);
        
        $(document).on('mse2_load', function() {
           $('#mse2_results').masonry('destroy');
           setTimeout(masonryFunc(),300);
        });
</script>

Максим Кузнецов

23 июня 2015, 15:46

Ну и отлично.
И да, если у вас будет время — посмотрите, все-таки, метод reload в этом скрипте — уничтожать и заново создавать древо, на мой взгляд, выглядит как костыль и грозит утечкой памяти.

Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.