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 105

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

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

    $(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
      Тоже пытался заставить работать 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