Когда я внедрял компонент 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>