pdoResources, pdoPage, Masonry

Доброго всем дня и всяческих успехов)))

Поделитесь пожалуйста решением связки pdoResources, pdoPage, Masonry.

[[!pdoPage?
                    &parents=`4`
                    &ajaxMode=`button`
                    &limit=`5`
                    &ajaxTplMore=`tplAjaxButton`
                    &depth=`1`
                    &tpl=`tplInterieri`
                    &includeTVs=`projectFaceImg,yearProgect`
                    &sortdir=`ASC`
                    &sortby=`menuindex`
                ]]
Пробую вызывать таким образом.
Предварительно подключаем скрипты Masonry

<script src="[[++assets_url]]js/masonry/imagesloaded.pkgd.min.js"></script>
    <script src="[[++assets_url]]js/masonry/masonry.pkgd.min.js"></script>
    <script>
//этот код срабатывает когда мы открываем страницу в первый раз
        $(document).ready(function() {
            var $container = $(".masonry-container");
        	$container.imagesLoaded(function () {
        		$container.masonry({
        			columnWidth: 1,
        			itemSelector: ".item"
        		});
        	});
        });
// этот код призван отработать, когда мы нажимаем на кнопку подгрузки ресурсов
// в моем случае это tplAjaxButton (<button class="btn btn-default btn-more">Показать еще 10</button>)
        $(document).on('pdopage_load', function() {
            var $container = $(".masonry-container");
        	$container.imagesLoaded(function () {
        		$container.masonry({
        			columnWidth: 1,
        			itemSelector: ".item"
        		});
        	});
        });
    </script>
С такой конструкцией новые ресурсы выводятся поверх старых, если убрать один из кусков кода, то все начинает работать.
Станислав
29 мая 2016, 07:38
modx.pro
3
2 323
0

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

Алексей Федоров
29 мая 2016, 10:50
0
Возможно, это обсуждение поможет
    Станислав
    29 мая 2016, 11:25
    0
    Спасибо большое благодаря вам все получилось.
    Станислав
    29 мая 2016, 11:25
    1
    +2
    Вот решение

    $(document).ready(function() {
                var $container = $(".masonry-container");
            	$container.imagesLoaded(function () {
            		$container.masonry({
            			columnWidth: 1,
            			itemSelector: ".item"
            		});
            	});
            });
            $(document).on('pdopage_load', function() {
            	var $container = $(".masonry-container");
    // вся вишка сводится к добавлении этой строки
            	$container.masonry('reloadItems');
    //конец добавленной строки
                $container.imagesLoaded(function () {
            		$container.masonry({
            			columnWidth: 1,
            			itemSelector: ".item"
            		});
            	});
            });
      Юрий
      19 июля 2017, 16:34
      1
      +1
      Тоже пытался заставить работать masonry с подгруппой через pdoPage, но по непонятным причинам, не хотел инициализироваться плагин стандартным способом:
      $(document).on('pdopage_load', function (e, config, response) {
            var $grid = $(".masonry");
            $grid.masonry('reloadItems');
            $grid.masonry( 'layout' );
        });
      Давая небольшую задержку через setTimeout, заработало на ура.
      Вот финальный код:
      $(document).ready(function () {
        /* masonry */
        var $grid = $('.masonry').masonry({
          itemSelector      : '.masonry-item',
          columnWidth       : '.masonry-item',
          gutter            : 15,
          percentPosition   : true,
          transitionDuration: '0'
        });
        
        /* pdopage_load */
        $(document).on('pdopage_load', function (e, config, response) {
          function masonryUpd () {
            var $grid = $(".masonry");
            $grid.masonry('reloadItems');
            $grid.masonry( 'layout' );
          }
          setTimeout(masonryUpd, 300);
        });
      });
      Что странно. По идее не нужно никакой задержки.
      Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
      4