Контактная информация

По всем интересующим вас вопросам связывайтесь при помощи контактной информации приведенной на этой странице!

skype: metsof
email: accusser@gmail.com

В социальных сетях...

Форма обратной связи

Авторизация

MODX статьи, уроки и готовые решения для MODX Revo

Сайдбар

Cliche MODX Revolution jQuery Pagination.

09 дек. 2012

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






Подпишитесь на рассылку! Никакого спама, только обновления!!!

Комментарии (0)


    Услуги по MODX Revolution

    Посмотреть все услуги

    Техническая оптимизация сайта

    Подробнее & Заказать

    Создание сайта на MODX Revolution

    Подробнее & Заказать

    Перенос сайта на MODX Revolution

    Подробнее & Заказать

    Продвижение сайта на MODX

    Подробнее & Заказать