Все для создания и продвижения сайтов

Верстка, программирование, SEO

Пример создания простой галереи в MODX Revo: Gallery

Рассмотрим создание простой галереи в MODX Revo. Для этого нам потребуется:

  • Gallery - бесплатный компонент Modx для создание галерей;
  • Pthumb - компонент, для ресайза изображений.
  • Colorbox - плагин jquery, для открытия изображений в полном размере по клику.

И так, для начала скачаем компоненты Gallery и Pthumb через админку сайта (Приложения - Установщик). И скачаем Colorbox с официального сайта.

Теперь заходим в компонент Gallery (появится в компонентах), создаём новую галерею.

Создание галереи в MODX Revo

После создания, нажимаем правой кнопкой мыши на созданный альбом и выбираем «редактировать альбом».

Загружаем нужные фотографии.

Создание галереи в MODX Revo

Галерея создана, теперь мы вызываем её в нужном месте (лучше в новом шаблоне):

[[Gallery? 
    &album=`1` 
    &thumbTpl=`tpl_mygallery`
]]

В «&album» мы пишем id нашей галереи, в «thumbTpl» названия чанка, отвечающий за формат вывода одного изображения.

В нём пишем следующие:

<div style="width: 200px; margin: 20px;">
    <a class="group1" href="[[+image_absolute]]" title="[[+name]]" [[+link_attributes]]>
        <img style="width:100%" src="[[pthumb? &input=`[[+image_absolute]]` &options=`w=300&h=300&zc=1`]]" alt="[[+description]]" title="[[+name]]" />
    </a>
</div>

Можете отредактировать, как вам удобнее. Тут «[[pthumb? &input=`[[+image_absolute]]` &options=`w=300&h=300zc=1`]]» мы задействовали ресайзер, он уменьшает размер картинки до 300px по ширине и обрезает на 300px по высоте от центра.

Далее подключите Colorbox и вызовите его:

$(document).ready(function(){
    jQuery(".group1").colorbox({ rel:'group1' });
});

После этого присвойте ресурсу данный шаблон, и вы увидите свою галерею.

Выделите опечатку и нажмите Ctrl + Enter, чтобы отправить сообщение об ошибке.