Галерея, слайдер или карусель на MODx – Gallery + BXSlider + Fancybox
В данной статье описано как:
- Создать галерею в MODx
- Создать слайдер в MODx используя пакет Gallery и jQuery BXSlider
- Создать карусель в MODx используя пакет Gallery и jQuery BXSlider и jQuery Fancybox
Инструменты:
- Пакет Gallery
- BXSlider
- Пакет rezimgcrop (Для карусели)
- Fancybox (Для карусели и обычной галереи)
- Скачать немного измененный (CSS) BXSlider
- Скачать оригинальный BXSlider
- Скачать Fancybox
- (современная библиотека jQuery)
СОЗДАНИЕ ГАЛЕРЕИ:
1) Установить пакет Gallery;
2) Создать дополнительное (tv) поле;
3) Создать альбом;
4) Вывод альбома
4.1) Добавление сниппета в шаблон
4.2) Редактирование tpl-файла
4.3) Вывод альбома в конкретном ресурсе
Создаем дополнительное поле:
- Имя: gal-item
- Заголовок: Альбом галереи
- Во вкладке "Параметры ввода" установить "galleryalbumlist"
- Во вкладке "Доступно для шаблонов" проставить галочки для каких шаблонов применить новое доп. поле
- Сохранить
Создать альбом
- Админка->Приложения->Gallery
- Нажать "создать альбом", вводим название, обе галочки ставим "да", сохранить
- Зайти в новый альбом и добавить изображения
Добавление сниппета в шаблон
В том месте шаблона, где мы хотим вывести альбом галереи прописываем:
Добавляем Fancybox: (пропустите этот пункт, если создаете галерею для слайдера или карусели)
<link href="fancybox/jquery.fancybox.css" rel="stylesheet">
<script src="fancybox/jquery.fancybox.pack.js"></script>
В шаблон добавить сниппет Gallery:
[ [!Gallery?
&album=`[ [*gal-item]]`
&checkForRequestTagVar=`1`
&useCss=`0`
&thumbTpl=`galItemThumb`]]
<div style="clear:both"></div>
В сниппете:
- album — tv-поле, в котором хранится id альбома ресурса
- checkForRequestTagVar, useCss — бездумно проставляем неизвестные параметры:)
- thumbTpl — tpl для вывода элемента галереи. От его содержимого зависит как будут отображаться элементы галереи. Его и дополнительные скрипты мы рассмотрим ниже в примерах использования Gallery для создания слайдера или карусели.
Запускам Fancybox: (пропустите этот пункт, если создаете галерею для слайдера или карусели)
<script>$(document).ready(function(){$(".fancybox").fancybox();});</script>
Редактирование tpl-файла (пропустите этот пункт, если создаете галерею для слайдера или карусели)
Для обычного вывода галереи предлагаю использовать такой tpl (назовем его gal-item):
<div class="gal-item">
<a href="[ [+image_absolute:rezimgcrop=`r-800`]]" class="fancybox" rel="gallery1" title="[ [+description]]">
<img class="[ [+imgCls]]" src="[ [+image_absolute:rezimgcrop=`min-120,c-120x120`]]" style="width:120px;height:120px;" alt="[ [*pagetitle]] [ [+idx]]" />
</a>
</div>
.gal-item{border:1px solid #EEE;margin:10px;padding:10px;float:left;font-size:0;}
.gal-item:hover{border-color:#CFCFCF;}
Вывод альбома в конкретном ресурсе
Заходим в ресурс, переходим во вкладку "дополнительные поля" и выбираем нужный нам альбом в соответствующем поле.
(если в дополнительных полях нет созданного ранее поля "gal-item", или вкладка "дополнительные поля" отсутствует вовсе — убедитесь, что в настройках дополнительного поля (вкладка "доступно для шаблонов") вы отметили тот шаблон, которому принадлежит редактируемый ныне ресурс.)
Реализация слайдера средствами Gallery и BXSlider:
Для начала создаем галерею (процесс описан выше)
Добавляем CSS и JS-файлы BXSlider в шаблон:
<link href="css/jquery.bxslider.css" rel="stylesheet">
<link href="fancybox/jquery.fancybox.css" rel="stylesheet">
<script src="js/jquery.bxslider.min.js"></script>
<script src="fancybox/jquery.fancybox.pack.js"></script>
Код tpl-чанка thumbTpl (назовем его "gallery-slider-tpl"):
<li><img src="[ [+image_absolute]]" alt="Слайдер [ [+idx]]" /></li>
Код сниппета Gallery в шаблоне:
<ul class="bxslider-slider">
[ [!Gallery?
&album=`[ [*gal-item]]`
&checkForRequestTagVar=`1`
&useCss=`0`
&thumbTpl=`gallery-slider-tpl`]]
</ul>
Примечание: Если нет нужды настраивать динамическое отображение галереи (в данном случае оформленной как слайдер) на разных страницах, то можно обойтись без TV-поля, и просто вписать туда id альбома. В таком случае во всех ресурсах с этим шаблоном выводится один и тот же альбом. TV-поле имеет смысл использовать если на разных ресурсах требуется выводить разный альбом, или на каких-то ресурсах не выводить галерею вовсе.
Запускам BXSlider:
<script>$(document).ready(function(){$('.bxslider-slider').bxSlider({mode:'fade',captions:false,pager:false});});</script>
Все настройки BXSlider – http://bxslider.com/options
Реализация карусели средствами Gallery и BXSlider:
Для начала создаем галерею (процесс описан выше), и устанавливаем пакет для MODx "RezImgCrop".
Добавляем CSS и JS-файлы BXSlider и Fancybox в шаблон:
<link href="css/jquery.bxslider.css" rel="stylesheet">
<link href="fancybox/jquery.fancybox.css" rel="stylesheet">
<script src="js/jquery.bxslider.min.js"></script>
<script src="fancybox/jquery.fancybox.pack.js"></script>
Код tpl-чанка thumbTpl (назовем его "gallery-carusel-tpl"):
<li><a href="[ [+image_absolute:rezimgcrop=`r-800`]]" class="fancybox" rel="gallery1"><img src="[ [+image_absolute:rezimgcrop=`r-x120`]]" alt="Карусель" /></a></li>
Чуть подробнее о плейсхолдерах и классах:
- [ [+image_absolute]] — это ссылка на изображение. Добавляя фильтр ":rezimgcrop=`r-800`" мы меняем размер изображения до 800px (по высоте или ширине)
- class="fancybox" — нужен чтобы использовать лайтбокс Fancybox.
- rel="gallery1" — группирует изображения для удобного просмотра в лайтбоксе.
Код сниппета Gallery в шаблоне:
<ul class="bxslider-carusel">
[ [!Gallery?
&album=`[ [*gal-item:code]]`
&checkForRequestTagVar=`1`
&useCss=`0`
&thumbTpl=`gallery-carusel-tpl`]]
</ul>
Запускам Fancybox BXSlider:
<script>
$(document).ready(function(){
$(".fancybox").fancybox();
$('.bxslider-carusel').bxSlider({
minSlides: 5,
maxSlides: 5,
slideWidth: "auto",
slideMargin: 10,
pager:false
});
});
</script>
Комментарии (0)
