Cliche MODX Revolution jQuery Pagination.

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

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

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

<!script type="text/javascript"></pre>
   $(function(){
     $(".cliche").paginate({ limit: 9, content: '.item' });
    });
</script>

</body>

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

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

.link-container {
      top: 504px;
     width: 200px;
}
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="
[[+name]]
" href="
[[+image]]
">
         <img width="
[[+width]]
" height="
[[+height]]
" title="
[[+name]]
" alt="
[[+description]]
" class="attachment-thumbnail" src="
[[+thumbnail]]
"/>
      </a>
   </div>
</div>