Не многие готовы потратить своё личное время на создание красивых элементов на сайте. Подавляющее большинство предпочитает устанавливать специальные расширения, после чего занимаются их настройкой через панель управления. Это действительно удобно и быстро, но при использовании огромного количества расширений увеличиваются запросы к базе данных, а так же появляется задержка при открытии страниц (т.к. многие расширения в своём арсенале используют скрипты и они подгружаются вместе со страницей). О плюсах и минусах можно спорить долго, но мы сегодня постараемся обойтись своими силами. Я предлагаю создать отдельную страницу под галерею, она очень проста и интуитивно понятна. Абсолютно любой веб-мастер сможет из неё сделать не только галерею изображений, но и интерактивный путеводитель по сайту. Скажем, для дизайнера интерьера это отличное портфолио, а для магазина мебели это каталог товаров (изображения могут быть ссылками на разделы сайта).

Создание отдельной страницы с галереей

Для реализации нашей задумки нам не требуется особой версии Joomla, шаблон тоже неважно какой используется. Все файлы загрузим в корень сайта и сошлёмся на них через основное меню. Давайте по порядку…

1. Подготавливаем изображения

Для работы необходимо найти 10 изображений в формате jpg. Так как в скрипте будут прописаны стороны одинакового размера, ищём квадратные картинки, разрешение не имеет значение. Лично я использовал 10 штук 1024х1024px. Вы можете взять и широкоформатные, но тогда для лучшего отображения придётся менять значения в скрипте (смотрите пункт 3).

Создаём на рабочем столе папку CATALOG, а внутри неё ещё одну images. Переименовываем наши изображения и кидаем в images:

img 02

На этом всё, с изображениями мы закончили.

2. Создаём HTML страницу

В папке CATALOG создаём файл index.html. Если кто не знает как, для этого есть текстовый редактор NotePad++.

img 03

После открываем полученный файл в этом же редакторе и вставляем туда этот код:

HTML код:
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Gallery</title>
  5.  
  6. <style type="text/css">
  7. body {
  8. margin: 0; padding: 0;
  9. background: #e8ebec;
  10. }
  11. #images {
  12. white-space: nowrap;
  13. overflow: hidden;
  14. font-size: 0;
  15. line-height: 0;
  16. }
  17. #images span img {
  18. margin: 0;
  19. font-size: 15px;
  20. width: inherit;
  21. position: absolute;
  22. height: inherit;
  23. width: 100%;
  24. height: 100%;
  25. }
  26. #images span {
  27. display: inline-block;
  28. position: relative;
  29. }
  30. a img {
  31. border: 0;
  32. }
  33. #images span img:hover {
  34. box-shadow: 0px 0px 40px rgba(0,0,0,1);
  35. }
  36. #bars {
  37. background: #000;
  38. width: 100%;
  39. color: #fff;
  40. font-weight: bold;
  41. position: relative;
  42. padding: 30px 0 30px 0 ;
  43. z-index: 10000;
  44. box-shadow: 0px 0px 40px rgba(0,0,0,1);
  45. font-size: 56px;
  46. text-align: center;
  47. font-family: 'Myriad Pro', Helvetica, Arial, sans-serif;
  48. }
  49. #bars a {
  50. opacity: 1 !important;
  51. color: #fff;
  52. font-family: 'Myriad Pro', Helvetica, Arial, sans-serif;
  53. font-size: 20px;
  54. text-decoration: none;
  55. font-weight: bold;
  56. }
  57. </style>
  58. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  59. <script type="text/javascript" src="script.js"></script>
  60. </head>
  61. <body>
  62. <br><br>
  63. <div style="text-align: center;"><a href="ссылка на главную">Home</a></div>
  64. <br><br>
  65. <div id="images">
  66. <span id="i1"><a href="#"><img src="images/image-1.jpg" /></a></span>
  67. <span id="i2"><a href="#"><img src="images/image-2.jpg" /></a></span>
  68. <span id="i3"><a href="#"><img src="images/image-3.jpg" /></a></span>
  69. <span id="i4"><a href="#"><img src="images/image-4.jpg" /></a></span>
  70. <span id="i5"><a href="#"><img src="images/image-5.jpg" /></a></span>
  71. <span id="i6"><a href="#"><img src="images/image-6.jpg" /></a></span>
  72. <span id="i7"><a href="#"><img src="images/image-7.jpg" /></a></span>
  73. <span id="i8"><a href="#"><img src="images/image-8.jpg" /></a></span>
  74. <span id="i9"><a href="#"><img src="images/image-9.jpg" /></a></span>
  75. <span id="i10"><a href="#"><img src="images/image-10.jpg" /></a></span>
  76. <span id="i7"><a href="#"><img src="images/image-7.jpg" /></a></span>
  77. <span id="i9"><a href="#"><img src="images/image-9.jpg" /></a></span>
  78. <span id="i5"><a href="#"><img src="images/image-5.jpg" /></a></span>
  79. <span id="i6"><a href="#"><img src="images/image-6.jpg" /></a></span>
  80. <span id="i10"><a href="#"><img src="images/image-10.jpg" /></a></span>
  81. <span id="i8"><a href="#"><img src="images/image-8.jpg" /></a></span>
  82. </div>
  83. </body>
  84. </html>

Я не стал создавать отдельный файл для стилей и написал всё внутри. Тем, кто планирует серьёзно изменить внешний вид, советую вывести стили в отдельный файл и редактировать всё там. Просмотрите код и обратите внимание на 63 строчку, там нужно написать ссылку на главную страницу вашего сайта. Каждая картинка обёрнута следующим образом <a href=”#”>image</a>, вместо значков # можете установить ссылки на материалы. Теперь сохраните изменения.

3. Создаём скрипт для галереи

Создаём файл с именем script.js и размещаем его там же где и index.html.

img 04

Вставляем в него это и сохраняем:

Apache configuration код:
  1. $(document).ready(function() {
  2. var imageWidth = 220; // Ширина картинки
  3. var imageHeight = 220; // Высота картинки
  4. $('#images span').css({'width' : imageWidth, 'height' : imageHeight});
  5. function imageNumber() {
  6. $('.appended').remove();
  7. $('#images span').removeClass();
  8. $('.wrapper').each(function() {
  9. var wrapperContent = $(this).html();
  10. $(this).replaceWith(wrapperContent);
  11. });
  12. var windowWidth = $(window).width();
  13. var numberOfImages = ($("#images span").length);
  14. var imagesPerRow = Math.ceil(windowWidth / imageWidth);
  15. if(numberOfImages % imagesPerRow != 0) {
  16. var numberOnRow = Math.round((1 - (numberOfImages/imagesPerRow % 1)) * imagesPerRow);
  17. var number = 0;
  18. while(number <= numberOnRow) {
  19. $('#i'+number).clone(true).appendTo($('#images')).attr('class', 'appended');
  20. ++number;
  21. }
  22. var nuAppended = $('.appended').length;
  23. var nextA = parseFloat(numberOfImages)+1;
  24. while(nuAppended > 0) {
  25. $('.appended').each(function() {
  26. $(this).attr('id', 'i'+nextA);
  27. ++nextA;
  28. --nuAppended;
  29. });
  30. }
  31. }
  32. var slices = $("#images span");
  33. for(var i = 0; i < slices .length; i+=imagesPerRow) {
  34. slices .slice(i, i+imagesPerRow).wrapAll("<div class='wrapper'></div>");
  35. }
  36. }
  37. function hovering() {
  38. $('#images .wrapper span img').hover(function() {
  39. $(this).css({
  40. 'width' : '150%',
  41. 'height' : '150%',
  42. 'z-index' : '7000'
  43. });
  44. }, function() {
  45. $(this).css({
  46. 'height' : '100%',
  47. 'width' : '100%',
  48. 'box-shadow' : 'inset 0px 0px 20px rgba(0,0,0,0.8)',
  49. 'z-index' : '2000'
  50. });
  51. });
  52. $('#images .wrapper:not(:first, :last) span:not(:first-child) img').hover(function() {
  53. $(this).css({
  54. 'right' : '-25%',
  55. 'bottom' : '-25%'
  56. });
  57. }, function() {
  58. $(this).css({
  59. 'z-index' : '2000',
  60. 'right' : '0',
  61. 'bottom' : '0'
  62. });
  63. });
  64. $('#images .wrapper:first span:not(:first) img').hover(function() {
  65. $(this).css({
  66. 'right' : '-25%',
  67. 'top' : '0'
  68. });
  69. }, function() {
  70. $(this).css({
  71. 'z-index' : '2000',
  72. 'right' : '0',
  73. 'bottom' : '0'
  74. });
  75. });
  76. $('#images .wrapper:first span:first-child img').hover(function() {
  77. $(this).css({
  78. 'left' : '0',
  79. 'top' : '0'
  80. });
  81. }, function() {
  82. $(this).css({
  83. 'left' : '0',
  84. 'top' : '0'
  85. });
  86. });
  87. $('#images .wrapper:not(:first, :last) span:first-child img').hover(function() {
  88. $(this).css({
  89. 'left' : '0',
  90. 'top' : '-25%'
  91. });
  92. }, function() {
  93. $(this).css({
  94. 'left' : '0',
  95. 'top' : '0'
  96. });
  97. });
  98. $('#images .wrapper:last span img:not(:first)').hover(function() {
  99. $(this).css({
  100. 'left' : '-25%',
  101. 'top' : '-50%'
  102. });
  103. }, function() {
  104. $(this).css({
  105. 'left' : '0',
  106. 'top' : '0',
  107. });
  108. });
  109. $('#images .wrapper:last span:first img').hover(function() {
  110. $(this).css({
  111. 'left' : '0',
  112. 'top' : '-50%'
  113. });
  114. }, function() {
  115. $(this).css({
  116. 'left' : '0',
  117. 'top' : '0'
  118. });
  119. });
  120. }
  121. imageNumber();
  122. hovering();
  123. $(window).resize(function() {
  124. imageNumber();
  125. hovering();
  126. });
  127. });

Вторая и третья строчка - это размер изображения. В данный момент установлены значения 220, то есть квадрат. Если планируете использовать вертикальные или горизонтальные картинки, то это значение придётся подбирать самостоятельно. Важно понять, если строка с изображениями закончилась (до правого края монитора остаётся пустота), то скрипт автоматически заполняет оставшееся место картинками из первого ряда.

4. Загружаем на сервер

Работу с кодом мы закончили, теперь надо поместить нашу папку на сервер. Используя FileZilla FTP Client, помещаем папку CATALOG в корень, это там где разархивировали саму Joomla.

img 05

Файл index.html лежащий в CATALOG уже доступен по прямой ссылке. Если ввести в браузере http://вашсайт.ru/CATALOG/index.html, то увидите готовую галерею (CATALOG обязательно большими буквами пишем).

5. Создаём пункт меню

Остаётся только добавить пункт меню для того чтобы посетители сайта смогли перейти в нашу галерею. В панели управления нажимаем «Создать пункт меню».

img 06

Заполняем заголовок, тип пункта меню ставим «Системные ссылки - Внешний URL», а в поле ссылка  пишем полный путь http://вашсайт.ru/CATALOG/index.html. После сохранения проверяем на сайте всю проделанную работу.

img 07

Переходим в галерею, нажав по пункту меню «CATALOG» и возвращаемся при помощи ссылки «Home» в верхней части. В качестве примера вот ДЕМО.

Заключение

Это всего лишь пример простой галереи созданной без помощи расширений, однако люди с воображение смогут сделать на основе него гораздо больше. Галерея выравнивается по ширине экрана и автоматически подставляет картинки, если не хватает в ряде. Каждое изображение может быть ссылкой на материал, а при наведении курсора они выдвигаются на передний план. Все файлы будут грузиться из корня сайта в обход движка, а это значит, что не стоит беспокоиться о конфликте скриптов. Пользователь будет переходить между созданной нами галереей и сайтом на Joomla, друг от друга они не зависят.


 
4.5451263537906 1 1 1 1 1 (Оценок: 277)
4.5451263537906 277
Опубликовано: 07-07-2016

Комментарии  

Kuzma
+2 #1 Kuzma 30.08.2016 10:47
Спасибо, давно хотела найти подходящий способ создания своей страницы портфолио, все было много вопросов, казалось это очень трудно, а тут все понятно и по полочкам, обязательно попробую, основываясь на статью.

Вы не зарегистрированы, чтобы оставлять комментарии.