Пример создания простой галереи в MODX Revo: Gallery
Рассмотрим создание простой галереи в MODX Revo. Для этого нам потребуется:
- Gallery - бесплатный компонент Modx для создание галерей;
- Pthumb - компонент, для ресайза изображений.
- Colorbox - плагин jquery, для открытия изображений в полном размере по клику.
И так, для начала скачаем компоненты Gallery и Pthumb через админку сайта (Приложения - Установщик). И скачаем Colorbox с официального сайта.
Теперь заходим в компонент Gallery (появится в компонентах), создаём новую галерею.
После создания, нажимаем правой кнопкой мыши на созданный альбом и выбираем «редактировать альбом».
Загружаем нужные фотографии.
Галерея создана, теперь мы вызываем её в нужном месте (лучше в новом шаблоне):
[[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' });
});
После этого присвойте ресурсу данный шаблон, и вы увидите свою галерею.
E-mail: 
Telegram:
Комментарии