Галерея Modx Revolution + Gallery + getPage

Дата публикации: 30 Ноя 2016г.

В продолжении темы создания галереи в Modx Revo решим задачу с ограничением выводимых фотографий на одной странице, и выводом пагинации. Для этого нам потребуется пакет getPage. Скачиваем его и устанавливаем. Вывод и увеличение картинок мы будет делать с помощью jQuery плагина fancyBox см. тут. Далее привожу код и css для оформления пагинации:

<div class="galleries">
[[!getPage?
&element=`Gallery`
&limit=`8`
&album=`portfolio`
&totalVar=`gallery.total`
&thumbWidth=`230`
&thumbHeight=`194`
&containerTpl=`NewGalleryAlbumTpl`
&thumbTpl=`NewGalItemThumb`
&imageWidth=`750`
&imageHeight=`800
&cache=`0`
&cache_expires=`0`
&pageNavVar=`page.nav`
]]
</div>
<div class="system-nav-orange">
<span class="pages">Страница [[+page]] из [[+pageCount]]</span>
<ul class="pager">
[[!+page.nav]]
</ul>
<div class="clear"></div>
</div>
.clear{
 	clear: both;
 	width: 100%;
	height: 1px;
}
/* pagenavigation */
div.system-nav-orange {
	padding-bottom: 6px;
	width: 96%;
	margin: 0 auto;
	text-align: center;
}
ul.pager {
	text-align: center;
	padding: 5px 0;
}
ul.pager li {
	display: inline-block;
	list-style: none;
	margin: 2px;
	padding: 0;
	position: relative;
}
ul.pager li:last-child:after {
	display: table;
	clear: both;
	content: '';
}
ul.pager .pager-item{
	color: #999;
	font-family: verdana;
}
ul.pager a{
	font-size: 12px;
	line-height: 14px;
	font-weight: normal;
	color: #fff;
	background-color: rgba(255, 0, 0, 0.59);
	border: 1px solid #ab0000;
	padding: 1px 4px;
	border-radius: 3px;
	text-decoration: none;
}
ul.pager a:hover{
	background-color: rgba(255, 0, 0, 1);
}
ul.pager a.active{
	position: relative;
	top: 0px;
	color: #777;
	background-color: #fff;
	border: 1px solid #777;
	padding: 1px 4px;
	line-height: 14px;
	border-radius: 3px;
}