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

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

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

Для реализации нашей задумки нам не требуется особой версии 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.5483870967742 1 1 1 1 1 (Оценок: 279)
4.5483870967742 279
Опубликовано: 07-07-2016

Соседние материалы

< Назад Вперёд >

Комментарии  

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

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