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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

$(document).ready(function(){ — теперь давайте определим размер документа, чтобы наложить оверлейный фон на полную высоту-ширину

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

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

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

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

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