Скажу сразу, что данная статья предназначена для новичков.

Итак, что нам нужно, для того чтобы быстро вывести фотогалерею на странице?
EvoGallery

1) Установите из репозитория модуль EvoGallery (я использую сборку от Dmi3yy). Репозиторий находится в Модули — Extras.



2) В чанке mm_rules пропишите строку
mm_widget_evogallery(4, Галерея, '1,2,3', 6);

где
4 — это id модуля, его можно посмотреть наведя мышь на название модуля
Галерея — это название таба, тут можно писать что угодно
1,2,3 — это указание того, кто будет видеть этот таб (можно посмотреть в «Роли пользователя»)
6 — это id шаблона, к которому будет прикреплена галерея

EvoGallery

3) Теперь выведем галерею на странице сайта. Для этого в шаблоне страницы выведем следующий код:
[[EvoGallery? &display=`images` &type=`simple-list` &sortBy=`sortorder` &itemTpl=`simple-list-tpl`]]

и создадим чанк simple-list-tpl:
<a href="[[phpthumb? &input=`[+images_dir+][+filename+]` &options=`h=500,far=C`]]" class="fancybox" rel="fancy" title="[+title+]"><img src="[[phpthumb? &input=`[+images_dir+][+filename+]` &options=`w=150,h=100,zc=C`]]" alt="[+title+]" /></a>


4) Не забудьте установить библиотеку Fancybox из репозитория. Она нужна, чтобы открывать увеличенные фотографии в модальном окне. Но в принципе, вы можете использовать любую библиотеку, на ваше усмотрение.
Чанк с именем fancybox, вставьте в шаблон страницы, не забыв подключить JQuery.

<script type="text/javascript" src="/assets/js/fancybox/jquery.mousewheel-3.0.6.pack.js"></script>
<script type="text/javascript" src="/assets/js/fancybox/jquery.fancybox.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$(".fancybox").fancybox();
	});
</script>
<link rel="stylesheet" type="text/css" href="/assets/js/fancybox/jquery.fancybox.css" media="screen" />
<script type="text/javascript" src="/assets/js/fancybox/jquery.fancybox.pack.js?v=2.1.5"></script>


EvoGallery

5) Подправим CSS стили, чтобы добавить немного красоты.

.photo a img {
padding:5px 5px 5px 5px;
background-color:#FFFFFF;
border:#ccc 1px solid;
margin:5px 10px 5px 0;}


Вот и все! Наша фотогалерея готова :)