Как в MODX Revolution сделать галерею с Ajax подгрузкой на MIGX?

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

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

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

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

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

[ {"caption":"Info", "fields": [ {"field":"title","caption":"Name"} ] }, {"caption":"Image", "fields":[ {"field":"image","caption":"Image","inputTVtype":"image"} ] } ]

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

[ {"header": "Name", "width": "160", "sortable": "true", "dataIndex": "title"}, {"header": "Image", "width": "50", "sortable": "false","dataIndex":"image","renderer":"this.renderImage"} ]

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

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

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

[[!getResources? &limit=`0` &parents=`[[*id]]` &sortby={"menuindex":"ASC"} &tpl=`Gertes` &showHidden=`1` &includeTVs=`1` ]] 

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

<div class='gallery_block'> <h3>[[+pagetitle]]</h3> <a class='home_gallery_link' href='[[~[[+id]]]]' uid='[[+id]]' title='[[+pagetitle]]'>[[!getImageList? &tvname=`galleryPhotos` &tpl=`galleryMigx` &docid=`[[+id]]` &limit=`1`]]</a> </div>

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

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

<img src='../[[+image:phpthumbof=`w=180&h=140&zc=1`]]'/>

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

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

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

<div id='full_overlay'></div> <div id='gallery_overlay'></div>

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

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

#full_overlay{ display:none; width:100%; height:100%; position:absolute; left:0px; top:0px; background:url(../images/full_overlay_bg.png) 0 0 repeat; } #gallery_overlay{ display:none; width:670px; height:600px; position:absolute; top:100px; left:50%; margin-left:-335px; background: #e4e4e4; }

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

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

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

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="dopeless_gallery/scripts/dopelessGallery.js"> <link rel="stylesheet" href="dopeless_gallery/stylesheets/dopelessGallery.css" type="text/css"> </script>

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

$(document).ready(function(){

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

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

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

$.get("dopeless_gallery/scripts/gallery.tpl", function(data){ $('#gallery_overlay').html(data); }); $("#full_overlay").css({ "height":docHeight, "width":docWidth });

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

$('.home_gallery_link').click(function(openOverlay){ openOverlay.preventDefault(); var pageTitle = $(this).attr('title'); var galleryId = $(this).attr('uid'); var leftOffset = parseInt($('.gallery_thumbnails').css('left')); var newBigSrc; ... var mainImage = $('#gallery_overlay').find('.gallery_image img'); ... $('#gallery_overlay').find('.gallery_title').append(pageTitle); $('.gallery_image').find('img').css({'display':'none'}); $('#gallery_overlay').find('#carousel').css({'display':'none'}); $('#full_overlay').fadeIn('fast'); $('#gallery_overlay').fadeIn('fast'); $('.loading_image').fadeIn(); ...

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

$.getJSON("../dopeless_gallery/scripts/loadGallery.php", {resid: galleryId}, function(output) { $('#gallery_overlay').find('.gallery_thumbnails').html(output.content); var imageCount = $('.gallery_thumbnail').length; ulLength = imageCount*114 + (imageCount - 1)*10; loadGallery(imageCount, ulLength);

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

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

<?php require_once '../../config.core.php'; require_once MODX_CORE_PATH.'model/modx/modx.class.php'; $modx = new modX(); $modx->initialize('web'); $modx->getService('error','error.modError'); $resId = $_GET['resid']; $resource = $modx->getObject('modResource',array('id'=>$resId)); $strJSON = $resource->getTVValue('galleryPhotos'); $arrJSON = $modx->fromJSON($strJSON); $output = ''; foreach($arrJSON as $arrJSONDataSet){ if(!empty($arrJSONDataSet['image'])){ $output .= $modx->getChunk('renderGalleryThumbnails', $arrJSONDataSet); } } echo json_encode(array("content" => $output)); ?>

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

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

<li class='gallery_thumbnail'> <a class='gallery_thumbnail_link' href="../[[+image:phpthumbof=`w=640&h=425&zc=1&q=85`]]" title="[[+title:default=`[[*pagetitle]]`]]"> <img src='[[+image:phpthumbof=`w=110&h=70&zc=1&q=75`]]'> </a>

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

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

function loadGallery(imageCount, ulLength){ imgSrc = $(".gallery_thumbnails li:first-child").find('.gallery_thumbnail_link').attr('href'); var loadImg = new Image(); loadImg.src = imgSrc; loadImg.onload = function() { $('.loading_image').fadeOut(); $(mainImage).attr('src', imgSrc).load(function(){ $(mainImage).fadeIn(); }); } loadThumbs(imageCount, ulLength); }

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

function loadThumbs(imageCount, ulLength){ var enumLi = 1; var perc = 0; var cache = []; $(".gallery_thumbnails li").each(function(){ if(enumLi == 1){ $(this).find('.gallery_thumbnail_link').addClass('active'); } if(enumLi == imageCount){ $(this).addClass('last'); } $(this).find('.gallery_thumbnail_link').attr('id', enumLi); var thumbSrc = $(this).find('.gallery_thumbnail_link').attr('href'); var im = $("<img>").attr("src",thumbSrc).load(function(){ perc = perc + 100/imageCount; var loaderWidth = Math.round(246*perc/100); $('#loading_bar_inside').css({'width':loaderWidth}); if(Math.round(perc) >= 100){ $('#loading_bg').fadeOut(); ulLength = imageCount*114 + (imageCount - 1)*10; $('.gallery_thumbnails').css({'width':ulLength}); $('#carousel').fadeIn(function(){ imgId = parseInt($('.gallery_thumbnail_link[href="'+imgSrc+'"]').attr('id')); if(imgId == 1 && imgId < imageCount){ $('.photo_right').addClass('active'); } if(imgId > 1){ $('.photo_left').addClass('active'); } }); } }); enumLi++; cache.push(im); }); $('.gallery_thumbnail_link:not(.active)').css({'opacity':0.7}); if((ulLength - 610) > 0){ $('.nav_right').addClass('active'); } } 

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