Урок 16. MIGX галерея с AJAX загрузкой
Для этого вам нужно установить следующие дополнения:
- MIGx
- GetResources для вывода миниатюр различных галерей на странице
- 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 разработке.
Дополнительно рекомендую почитать:
- Урок 14. Использование MIGX. Создание таблицы
- Урок 15. Создание слайдера с помощью MIGx TV
- Создание галереи в MODx Revolution
Урок найден на Форуме MODX, переведён и исправлена пара несущественных ошибок. Внизу в комментариях предлагайте улучшения по данному способу вывода галереи.
Oct 15 2012 AJAX MIGx getResources Виктор Матушевский
Евгений Дочилов
12.02.2013 11:24Вкладки формы и разметка колонок это что? подскажите...
Viktor Minator
12.02.2013 11:29Form tabs & Grid columns соответственно.
Евгений Дочилов
12.02.2013 12:16а куда это добавлять?
Алексей
05.07.2013 15:35Возможно применить migx на платформе самого модуля gallery?
Viktorminator
10.08.2013 03:06Модули в Evolution, есть ли там MIGX - не знаю. MIGX позволяют включать ТВ всех существующих типов (в том числе galleryAlbum, galleryItem) в себя.
Михаил Алтухов
29.07.2013 02:16А как сделать условие чтоб эта картинка выводилась обложкой альбома например несколько картинок и напротив них "сделать обложкой"
Viktorminator
10.08.2013 03:08Для обложки я обычно использовал первую картинку либо делал отдельную ТВ для обложки.
В случае с первой картинкой - нужную вам обложку легко перетащить мышкой Click-Drag.
Sergey Ivanov
23.08.2013 20:26Здравствуйте Виктор,
я сейчас остановился на пункте 7.
вместо единственной миниатюры вижу:
https://modx.ws/assets/templates/main/images/modx_for_dummies/urok10/getResources6.jpg
Подскажите пожалуйста, что я сделал не так? :(
Viktor Minator
23.08.2013 21:15добрый вечер. Укажите tpl в вызове getResources. Если указали, то, возможно, не создали сам чанк.
Sergey Ivanov
24.08.2013 06:52Большое спасибо. Разобрался.
Вот теперь столкнулся с другой проблемой...
Если размер изображения не 640х425, картинка сильно обрезается.
Можно сделать, чтобы размер автоматом подгонялся?
Заранее спасибо за ответ.
Viktor Minator
24.08.2013 12:13phpthumbof параметр rc=1
Igor Churkin
27.08.2013 21:53Почему-то ни кто не сказал вот про эту ошибку.
`
&sortby={"menuindex":"ASC"}
&tpl=`galleryGertes`
&showHidden=`1`
&includeTVs=`1`
ошибка в &tpl=`galleryGertes` нужно Getres
Alex Moroz
08.09.2013 16:34Здравствуйте Виктор.
Аналогично Сергею застрял на п.7, только вместо кода у меня отображается не загруженное изображение. Пример: http://s019.radikal.ru/i619/1309/e3/c4e743f8c021.png
Структура: есть контейнерный ресурс "Галерея", а в нем один из ресурсов создаю "интерьер и дизайн". В нем провожу вывод изображений. В итоге вот результат.
Заранее спасибо за помощь.
Alex Moroz
09.09.2013 02:25Уже разобрался сам. Только появилась другая проблема:
1. При нажатии по превью отображается окно загрузки изображения и больше ничего. Пример: http://s019.radikal.ru/i635/1309/c1/4862cdf6d1fb.png
2. При нажатии на "Закрыть" (крестик), перебрасывает на главную страницу. Где можно настроить возможность только закрытия модального окна
Спасибо
Ivan Lozinsky
04.10.2013 07:57Здравствуйте. Спасибо за ваши уроки, они мне хорошо помогли.
У меня появилась идея сделать комментарии с помощью migx, и возник вопрос:
а можно ли добавлять данные в migx из frontend`а ?
Сергей Афиногенов
25.10.2013 11:28Alex, если разобрался с проблемой напиши, пжл, как. Тоже отображается только окно загрузки. Спасибо!
Артём Леонов
18.11.2013 14:09Alex и Сергей, проблема решается правильным прописыванием пути в файле loadGallery к config.core.php, который лежит в корне сайта. Нужно добавить\убавить н-ое кол-во ../ у меня путь получился ../../../../config.core.php - вроде правильно файл называется)
Мария
20.01.2014 15:17Здравствуйте! Когда галерея с прокруткой вниз, получается, что всплывающее окно открывается сверху, а не в текущем месте, что не очень удобно. Можно ли это исправить?
Viktor Matushevskyi
20.01.2014 18:14Добрый. дайте ссылку.
Мария
21.01.2014 09:07http://www.sofas-decor.ru/kupit-izgolovie-dla-krovati.html
Viktor Matushevskyi
21.01.2014 13:45Марина, я вам рекомендую сделать галерею на colorbox, а не по этому уроку. Я рад, что вы используете решения, которые я предлагаю на этом сайте, но они не все современные и удачные.
Мария
21.01.2014 15:29https://modx.ws/blog/blog-o-modx-revolution/modx-revolution-galereya.html
Посмотрела этот урок. Получается, что на каждый товар нужно создавать свой альбом и делать вызов этого альбома + мне нужно, чтобы открывалась не страница с вложенными изображениями, а всплывающее оконо и слайдер с прокруткой, в котором будет располагаться описание и название товара ( как сейчас сделано с помощью этого урока). Может все-таки имеет смысл делать на MiGX, там по крайней мере getresourses все выводит...в общем запуталась окончательно, как лучше. Тут нужно страницы создавать, но зато удобно потом редактировать. И все-таки треть товаров уже выложила.
Viktor Matushevskyi
21.01.2014 15:56если вы сделали на MIGx, то пусть так и остается.
Натали Владыка
24.03.2014 14:42Виктор все работает кроме одного нюанса. не работает фильтр в чанке renderGalleryThumbnails
работает так будто нет никакого фильтра: , соответсвенно Нет реайза ни в карусели, ни в окне увеличенной текущей картинки. Может вы подскажете в чем дело? Может дело в том, что этот чанк-шаблон вызывается через $modx->getChunk() или дело в JSON-не?
Alexandr Zilin
28.05.2014 11:08Помогите пожалуйста, долго мучился, но почти дошел до конца, но... фотографии не уменьшаются ни в миниатюры(нижний ряд) ни в слайдере, хотя вначале все ок, где выводится по одной миниатюре.
Alexandr Zilin
28.05.2014 11:13Забыл, вот ссылка: http://scl-group.ru//galereya/
Alexandr Zilin
28.05.2014 11:11Еще один вопрос : Какую галерею использовать(на база чего?), если задача в загрузке и показе большого объема фоток, и как эти фотки загружать большим массивом. Прошу прощения за дилетантские вопросы, я только первые шаги делаю. Спасибо.
Viktor Matushevskyi
28.05.2014 13:09попробуйте phpthumbsup phpthumbon дополения - может они заработают...
Alexandr Zilin
28.05.2014 23:07вместо phpthumbof, они подобны?
Alexandr Zilin
29.05.2014 12:06Спасибо, поменял на phpthumbon (буквально f на n) и все отлично заработало.
Alexandr Zilin
30.05.2014 15:19Подскажите пожалуйста, существует ли возможность загрузки несколько десятков фотографий сразу в галерею, если есть такая возможность дайте ссылку на ...прочитать...
MedVedZot
31.05.2014 18:34Виктор, спасибо огромное за статью.
У меня вопрос - нажимаю добавить, ищю фотку и добавляю ее в список, потом опять нажимаю кнопку добавить и опять вижу корневую директорию и опять нужно лезть по дереву до папки с фотками. Как исправить и сделать как у обычной TV работает (то есть когда просто tv не migx то все ок, запоминает путь)
MedVedZot
31.05.2014 18:45Пробовал ставить migx на чистую систему и та же фигня