Установка галерей изображений в Modx Revo вызывает наибольшее затруднение у начинающих пользователей Modx. Например, часто не получается дубиться работоспособности в некоторых новейших браузерах, особенно на мобильных устройствах работы галереи плагина Galery на основе jQuery, напримре галерей lightbox или colorbox. Поэтому далее будет разобран пример установки галереи. В низу статьи есть видео с YuoTube.
Между тем, при правильной установке плагина jQuery colorbox(галерея на jQuery) вполне возможно установить работоспособную галерею.
Что необходимо для установки галереи?
Видео с YouTube о том как вставить галерею в ModX Revo:
Чанки
Чанки "GalleryAlbumTpl"
Первый отвечает за вывод разделов всех альбовомов:
| 1. | <!-- |
| 2. | <h1>[[+album_name]]</h1> |
| 3. | <p>[[+album_description]]</p> |
| 4. | --> |
| 5. | [[+thumbnails]] |
| 6. | |
Так как мне не нужно, чтоб альбомы и их названия выводились, я просто их закомментировал в чанке "GalleryAlbumTpl".
Чанки "GalAlbumRowTpl"
Второй чанк отвечает за вывод и отображение отдельных альбомов:
| 1. | <div class="albumPreview"> |
| 2. | <h3><a href="[[~[[*id]]? &[[+albumRequestVar]]=`[[+id]]`]]">[[+name]]</a></h3> |
| 3. | <div class="thumb"> |
| 4. | <a href="[[~[[*id]]? &[[+albumRequestVar]]=`[[+id]]`]]"><img src="[[+image]]" alt="[[+name]]"/></a> |
| 5. | </div> |
| 6. | <div class="desc"> |
| 7. | <p>[[+description]]</p> |
| 8. | <a href="[[~[[*id]]? &[[+albumRequestVar]]=`[[+id]]`]]" class="view">View gallery</a> |
| 9. | </div> |
| 10. | </div> |
| 11. | |
| 12. | |
Чанки "GalItemThumb"
Третий чанк отвечает за вывод отдельного изображения из определенного альбома:
| 1. | <div class="[[+cls]]"> |
| 2. | <a href="[[+image]]" rel="colorbox" title="[[+description]]"> |
| 3. | <img class="[[+imgCls]]" src="[[+thumbnail]]" alt="[[+name]]" /> |
| 4. | </a> |
| 5. | [[+name]] |
| 6. | </div> |
Страница вывода предыдущих чанков
Шаблон вывода сниппетов галереи (для примера обычная стринца HTML):
| 1. | <!doctype html> |
| 2. | |
| 3. | <head> |
| 4. | <meta charset="utf-8"> |
| 5. | |
| 6. | <base href="[[++site_url]]" /> |
| 7. | |
| 8. | <title>[[++site_name]] - [[*pagetitle]]</title> |
| 9. | |
| 10. | <link rel="stylesheet" href="assets/templates/demo/colorbox/example1/colorbox.css" /> |
| 11. | |
| 12. | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> |
| 13. | <script src="assets/templates/demo/jquery.lazyload.mini.js"></script> |
| 14. | <script src="assets/templates/demo/colorbox/colorbox/jquery.colorbox-min.js"></script> |
| 15. | |
| 16. | <script> |
| 17. | $(document).ready(function () { |
| 18. | $("img").lazyload({effect : "fadeIn"}); |
| 19. | $("a[rel='colorbox']").colorbox(); |
| 20. | }); |
| 21. | </script> |
| 22. | |
| 23. | <style type="text/css"> |
| 24. | |
| 25. | body{ |
| 26. | font-family: Arial; |
| 27. | font-size: 16px; |
| 28. | } |
| 29. | |
| 30. | #Content{ |
| 31. | width: 600px; |
| 32. | } |
| 33. | |
| 34. | .gal-item{ |
| 35. | float: left; |
| 36. | margin: 10px; |
| 37. | text-align: center; |
| 38. | } |
| 39. | |
| 40. | .gal-item a{ |
| 41. | display: block; |
| 42. | } |
| 43. | |
| 44. | .gal-item img{ |
| 45. | border: solid 4px #CCC; |
| 46. | } |
| 47. | |
| 48. | .gal-item img:hover{ |
| 49. | border: solid 4px #666; |
| 50. | } |
| 51. | |
| 52. | </style> |
| 53. | |
| 54. | </head> |
| 55. | |
| 56. | <body> |
| 57. | |
| 58. | <div id="Content"> |
| 59. | |
| 60. | <h1>[[*pagetitle]]</h1> |
| 61. | |
| 62. | [[*content]] |
| 63. | |
| 64. | [[!GalleryAlbums? &toPlaceholder=`GalleryAlbums` &limit=`0` &albumCoverSort=`rank` &prominentOnly=`0` &rowTpl=`DemoGalAlbumRowTpl` &thumbWidth=`195` &thumbHeight=`140`]] |
| 65. | |
| 66. | [[!Gallery? &album=`[[*galery_name]]` &checkForRequestTagVar=`1` &toPlaceholder=`Gallery` &useCss=`0` &containerTpl=`GalleryAlbumTpl` &thumbWidth=`140` &thumbHeight=`100` &thumbTpl=`GalItemThumb` &imageWidth=`800` &imageHeight=`800`]] |
| 67. | |
| 68. | |
| 69. | [[+Gallery]] |
| 70. | |
| 71. | </div> |
| 72. | |
| 73. | </body> |
| 74. | </html> |
| 75. | |
Итог нашей с Вами работы будет выглядеть примерно следующим образом:
MODX Revolution Photo Gallery
Demo Album 1
Demo Album 1 - Description
Дата: 6 месяцев назад - 2011.11.12
Просмотров: 3481
Комментариев: 9
3.1
Александр
Поле не сложно создать! Но учту для будущих статей!