Урок 16. MIGX галерея с AJAX загрузкой

Для этого вам нужно установить следующие дополнения:

  1. MIGx
  2. GetResources для вывода миниатюр различных галерей на странице
  3. phpThumbOf для ресайза изображений

Установите их и начнём:

1. Создайте ТВ для списка MIGx назовите её galleryPhotos, тип ввода MIGx. Теперь нужно установить Вкладки формы и Разметку колонок для определения функционала переменной.

Вкладки формы (Form Tabs):

Разметка колонок (Grid Columns):

2. Теперь создайте новый шаблон. Назовите его как-нибудь, например galleryTpl. Вам не нужно вводить какой-либо html-код, но нужно зайти во вкладку переменные шалона в настройку доступа к шаблону и дать ТВ, которую мы создали в п.1 (galleryPhotos), доступ к данному шаблону.

3. Далее создайте дочерний ресурс для страницы, где должна появляться ваша галерея. Дайте ей какое-либо имя. Я, например, создал два ресурса «Fireworks» и «Some Photos», установите галочку в «Скрыть от меню» («Hide from Menus»). Далее зайдите в этом ресурсе на вкладку Переменные шаблона и добавьте несколько изображений.

4. Теперь нужно создать миниатюры галереи для вашего сайта. Добавьте вызов getResources к html коду ресурса, который является родителем галереи.

5. Давайте создадим новый чанк. Он будет шаблонировать вывод вызова getResources. Конечно же, вам нужно указать его имя, точно такое же как и в вызове getResouces — параметр &tpl. В моём случае это galleryGetres. Код чанка будет следующим:

Как видите у нас есть вызов MIGx в данном шаблоне, который станет первым набором данных нашей Переменной шаблона — галереи. Он будет использоваться для генерирования миниатюр со ссылкой. Мы добавим uid атрибут к нашему <a> элементу. Мы будем его чуть позже использовать для AJAX вызова загрузки данных от ресурса, которому пренадлежат миниатюры.

6. Теперь нужно создать еще один чанк для вызова шаблонирования MIGx вызова. Имя чанка в моём случае galleryMigx:

Как видите единственной вещью, что мы добавили — это изображение, с изменённым размером с помощью phpthumbof.

7. Если вы перезагрузите вашу страницу с миниатюрами галереи, то вы увидите единственную миниатюру для каждой созданной нами галереи. Чтобы вы знали, это первоё изображение в MIGx TV списке.

8. Теперь добавьте два div элемента как раз перед закрывающим тегом body в месте, где должна появится галерея.

Первый служит для затемнения страницы и второй для контейнера галереи.

9. Добавим чуть CSS

10. Я исключил CSS3 части для круглых углов, теней и т.д. для уменьшения количества кода и чтобы было легче понять, но они включены в исходные файлы, которые вы можете загрузить. Мы установим позиционирование обеих div`ов и сделаем их невидимыми по-умолчанию.

11. Теперь нужно создать шаблон для контейнера нашей галереи. Давайте создадим пустой файл (в моём случае gallery.tpl и добавим следующий код:

12. Теперь создадим пустой JS-файл (в моём случае dopelessGallery.js) и включим его в ваш HTML после вызова библиотеки Jquery

13. Давайте добавим чуть JS к созданному файлу. Начнём с:

$(document).ready(function(){

— теперь давайте определим размер документа, чтобы наложить оверлейный фон на полную высоту-ширину

var docHeight = $(document).height(); 
var docWidth = $(document).width();

— загрузите HTML с шаблона галереи (который мы создали в п.11) и добавьте его к контейнеру #gallery_overlay, далее установите ширину и высоту элемента #full_overlay:

— добавьте еще пару действий при нажатии на миниатюре. Вначале мы предотвращаем действите по-умолчанию при нажатии, определяем несколько переменных, добавляем содержимое к нашему HTML коду и затемнение галерейным оверлеем.

14. Теперь наш AJAX вызов:

Здесь мы вначале загрузим php-скрипт, который мы обсудим в п.15 и посылаем ИД ресурса (см. п.6 для более подробных деталей), содержащий фотографии галереи, которую мы хотим загрузить. Далее мы добавляем данные, сгенерированные с PHP в наш HTML код. Это будут наши галерейные миниатюры. После этого мы посчитаем количество изображений в нашей галерее (количество миниатюр, которые мы получили из PHP), мы посчитаем длинну наших <ul> элементов, содержащих все миниатюры, в пикселах для CSS и дальнейшего JS вычисления. И вызовем функцию loadGallery для вывода содержимого галереи для наших пользователей (см. п.17)

15. Создадим пустой PHP файл с именем, которое вы определили в п.14. В нашем случае loadGallery.php. Вставим туда это содержимое:

Итак вначале мы инициализировали соединение с MODX, далее определили ИД ресурса, который мы хотим загрузить. Далее загрузили все значения нашей galleryPhotos MIGx ТВ в массив. После того, как мы сгенерировали HTML для каждого набора данных основываясь на шаблоне renderGalleryThumbnails (см. п.16), добавляем его к выводу данных. Этот вывод будет частью HTML с сгенерированными миниатюрами для нашей галереи, который мы использовали в п.14. В самом конце мы посылаем его обратно к JS.

16. Создайте новый чанк и дайте ему название, которое мы использовали в п.15, в моём случае это renderGalleryThumbnails. Вставьте туда этот код:

как видите, мы просто использовали значение наших MIGx ТВ. Также мы использовали phpThumbOf для ресайза миниатюр.

Вернёмся к Jquery. Как мы уже сказали в п.14, мы пишем функцию для загрузки содержимого наших галерей.

JS-код весьма понятен и я не буду его объяснять (не это цель урока). Также мы напишем еще одну функцию ‐ loadThumbs для просмотра наших миниатюр.

должно быть это выглядит немного сложно, но снова — это простой код и тут речь идёт о предзагрузке и добавлению классов к кнопкам навигации. Остальная часть JS файла — это навигация между изображениями. Я не буду объяснять её в этом уроке, но всё что нужно вы найдёте в прикреплённых файлах. Тоже самое касается CSS. Вот и всё. Надеюсь этот урок поможет вам в MODX разработке.

Demo Скачать

Дополнительно рекомендую почитать:

  1. Урок 14. Использование MIGX. Создание таблицы
  2. Урок 15. Создание слайдера с помощью MIGx TV
  3. Создание галереи в MODx Revolution

Урок найден на Форуме MODX, переведён и исправлена пара несущественных ошибок. Внизу в комментариях предлагайте улучшения по данному способу вывода галереи.