Когда я внедрял компонент Cliche на сайт, я столкнулся с несколькими проблемами.  Хотя в конце концов я получил, то что я хотел, я не получил нумерацию страниц, и я не смог найти никаких обучающих материалов на эту тему ни для js,  ни для modx.  Я нашел учебник по jQuery и, наконец, я заставил это работать.  Теперь я хочу помочь другим “чайникам”, сражающимся с этой же проблемой.

Все, что я сделал, достаточно просто, смотрите сами:

— Вставляете jquery.min.js и  jquery.paginate.min.js в ваш документ (взять можно здесь: https://github.com/fedecarg/jquery-paginate )
— Вставляете этот скрипт в ваш шаблон:

<code><!script type="text/javascript">

   $(function(){
     $(".cliche").paginate({ limit: 9, content: '.item' });
    });


<p у меня уже был подключенный jquery.min.js, потому что я использовал lightbox с Клише, и Клише уже добавило jquery. Из-за этого я добавил paginate js и javascript функцию в конец шаблона, перед тэгом

</body>

Добавление этого в начало и перед контентом страницы  вызывало конфликты с  jquery, который добавило Клише, и по этим причинам я не смог добиться стабильной работы. Удивительно, именно так я смог решить это, надеюсь, это поможет и вам.

Для настройки pagination просто добавьте этот класс в файл стилей (class names необходимо оставить наподобие этих):

.link-container {
      top: 504px;
     width: 200px;
<pre>}

a.ui-state-default, a.ui-state-default:visited{

      font-family: 'Droid Sans', Tahoma, sans-serif;

      font-weight: 400;

      color: #FFF;

      font-size: 18px;

      padding-right: 10px;

      text-decoration:none;

}

a.ui-state-default:hover {

      color: #00BFFF;

}

a.ui-state-active {

      color: #00BFFF;

      font-weight:700;

}

 
 
Чанк  itemtpl содержит:
 

<div class="item">

   <div class="album-icon">

      <a class="zoom" rel="lightbox" title="

<code>[[+name]]</code>

" href="

<code>[[+image]]</code>

">

         <img width="

<code>[[+width]]</code>

" height="

<code>[[+height]]</code>

" title="

<code>[[+name]]</code>

" alt="

<code>[[+description]]</code>

" class="attachment-thumbnail" src="

<code>[[+thumbnail]]</code>

"/>

      </a>

   </div>

</div>