Как созадать фотогалерею EvoGallery на MODx

Источник: http://cstudiopro.ru/sozd-site/cms/modx-cms/sozdaem-sajt-urok14.php

EvoGallery - позволяет создавать галерею изображений на MODx Evolution.

Пример реализации EvoGallery можно посмотреть на странице Evo_Gallery.

Фотогалерея включает три альбома, которые выводятся на страницу Evo_Gallery. Т.е. для ресурса Evo_Gallery надо создать три дочерних ресурса Альбом 1, Альбом 2,  Альбом 3. См. рисунок 1.

Рисунок 1

При нажатии на миниатюру, появляется увеличенное изображение средствами скрипта FancyBox. Поэтому нам понадобится еще этот скрипт. 

Инструкция по созданию такой галереи

1. Сначала скачиваем дистрибутив EvoGallery здесь.

2. В архиве две папки: «assets» и «install». Архив надо распаковать на сервер в папку www, при распаковке подтвердить слияние папок.

3. Далее запускаем инсталлятор, набрав в строке браузера: http://ваш_сайт/install/index.php

Появится установка модуля MODx Gallery, которая включает следующие этапы:

  • выбор языка. Русский;
  • выбор параметров. Оставляете так, как есть (модуль, плагин и сниппет);
  • проверка перед установкой. Соглашаемся с лицензией, жмем кнопку «Дальше»;
  • результаты установки. Обратите внимание на пункт «Удалить папку и файлы программы установки с моего сайта». Обязательно олжна стоять галочка;
  • установка завершена. Жмем «Закрыть», и входим в панель администратора, введя логин и пароль.

4. Скачиваем архив скрипта FansyBox здесь. И распаковываем в папку assets/js/gallery/. См. рисунок ниже.

Рисунок 2

5. Создаем отдельный шаблон evo_gallery. В этом шаблоне в <head> (или перед закрывающим </body>) вставляем следующий код:

<script type="text/javascript" src="assets/js/gallery/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="assets/js/gallery/jquery.mousewheel-3.0.6.pack.js"></script>
<script type="text/javascript" src="assets/js/gallery/jquery.fancybox.js?v=2.1.4"></script>
<link rel="stylesheet" type="text/css" href="assets/js/gallery/jquery.fancybox.css?v=2.1.4" media="screen" />

<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox({
openEffect: 'none',
closeEffect: 'none'});
});</script>

6. Создаем ресурс Evo_Gallery с шаблоном  evo_gallery, на страницу которого будут выводиться фотоальбомы. Описания для ресурса могут быть такими (рис. 3).

На странице  Evo_Gallery вставляем вызов сниппета EvoGallery:

[[EvoGallery?&docId=`240` &display=`galleries`&itemTpl=`item-list`]]

Здесь использованы следующие параметры:

  • &docId=`240` - id страницы, дочерние ресурсы которого являются альбомами, вставьте сюда свой id;
  • &display=`galleries` - категория вывода, возможные значения: galleries, images, single;
  • &itemTpl=`item-list` - шаблон вывода информации об альбоме.

Рисунок 3

8. Создаем чанк  item-list с кодом:

<div class="albom-gallery">
<a href="[~[+id+]~]"  title="[+title+]"><img class="pic" src="[+thumbs_dir+][+filename+]" alt="[+title+]" /></a>
<span><a href="[~[+id+]~]">[+longtitle+]</a></span>
<p>[+introtext+]</p>
<p><a href="[~[+id+]~]">[+pagetitle+]</a><p>
</div>

9. Создаем три дочерних ресурса Альбом 1, Альбом 2, Альбом 3  с шаблоном  evo_gallery. В содержимое каждого ресурса вставляем код:

<p>[*introtext*]</p>
<div class="img-all">[[EvoGallery]]</div>

Рисунок 4

10. В папке simple-list, находящийся по адресу: assets/snippets/evogallery/simple-list, есть файл tpl.item.default.txtотвечающий за шаблон вывода одной фотографии. Нужно удалить содержимое файла, и вставить в него следующий код:

<div class="img-gallery"><a href="[+images_dir+][+filename+]" class="fancybox" rel="gallery1" title="[+title+]"><img src="[+thumbs_dir+][+filename+]" alt="[+title+]" /></a></div>

11. В шаблоне evo_gallery в <head> вставляем таблицу стилей:

<style>
/* Галерея */
.img-all .img-gallery {width:200px; height:160px; margin:0 15px 25px 0; padding:5px;}
.img-all img {width: 195px; height: 155px;}
.img-gallery {float:left;}
.albom-gallery {clear:both; padding-bottom: 30px; padding-top: 10px;}
.albom-gallery img {float:left; padding:5px; border:1px solid #CCC; margin-right:20px; width: 170px; height: 126px;}
.albom-gallery span a {font-size:18px; font-family: Georgia, "Times New Roman", Times, serif; color: #777 ;}
.albom-gallery span a:hover {color:#999;}
</style>

12. Сейчас надо загрузить фотографии в наши альбомы. Скачиваем архив для альбомов здесь.

Заходим в административную панель, и переходим по ссылке в меню: Модули –  EvoGallery.

Кликаем по «Evo_Gallery», потом «Альбом 1». Кликаем по кнопке «Select Files», появляется окно выбора изображений. Из распакованных файлов находим папку «Альбом 1». Выделяем все и нажимаем кнопку «Открыть».

Далее следует нажать ссылку «Загрузить файлы» и дождаться окончания загрузки.

Рисунок 5

Если возникает ошибка с сообщением, что файл большой, следует изменить максимальный размер загрузки файла. Для этого идем по вкладкам Инструменты – Конфигурация – Максимальный размер загрузки, и устанавливаем значение в байтах, например 20000000.

Если это не помогает, то попробуйте прописать в .htaccess следующее:

php_value upload_max_filesize 20M
php_value post_max_size 20M
php_value max_execution_time 100

Это увеличит размер закачки до 20Мб, а время исполнения до 100 секунд.

Предупреждение!!!
Данный модуль фотогалереи EvoGallery имеет уязвимость, позволяющую загрузить произвольный файл (в том числе и хакерский шелл).
Поэтому после установки галереи удалите файл uploadify.php по адресу /assets/modules/evogallery/js/uploadify/uploadify.php