Це ж треба було примудритися стільки назнімати, що зроблені вами фотографії навіть у тещі під ліжком лежать. Дружина сказала, щоб удома більше жодного знімка не було? Ох-хо-хох! Тоді пора всі свої роботи переносити у віртуальний простір. А для цього вам знадобиться фотогалерея для сайту:

Фотогалерея для сайту

Дуже часто фотогалерею можна сплутати з фотоальбомом. Основною ознакою галереї є «виставлення на показ» відразу всіх фотографій. А в альбомі знімки відображаються по одному.

Але такий поділ є суто умовним і часто в інтернеті можна зустріти зразки, які просто не піддаються ніякій класифікації. Тому розглянемо приклад реалізації класичної фотогалереї на html. Але для початку розберемося, чому використання галереї краще для сайту, ніж фотоальбом:

  • Можливість продемонструвати всі зображення (фото) відразу – іноді користувачам лінь натискати кнопки для гортання. А в класичній фотогалереї всі об’єкти відразу доступні для перегляду;
  • Простота реалізації – стандартний зразок можна легко створити за допомогою html;
  • Відкритість – фотогалерея (порівняно з альбомом) володіє більшою «відкритістю», що на підсвідомому рівні дозволяє викликати довіру зі сторони користувачів.

У той же час галерея володіє і недоліками. Основний з них – це громіздкість. З-за «масивних» розмірів вона займає багато місця на сторінці сайту. Тому її дуже важко вписати в загальний дизайн. Крім цього фотогалерея має вузьким «спектром дії», тому що її використання виправдовується лише в повних версіях ресурсів. А реалізація її «класичної» схеми для мобільних пристроїв вельми утруднена.

Приклад класичної фотогалереї

Проста фотогалерея сайту являє собою набір посилань, до кожної з яких з допомогою тега Фотогалерея для свого сайту – всі способи реалізації «прикручена» прев’юшки основного зображення. Клацання по посиланню переносить користувача на іншу веб-сторінку, де «виставлена» повновага фотографія. Під нею знаходиться ще одна гіперпосилання, що ведуть на основну сторінку:

Фотогалерея для свого сайту – всі способи реалізації

Звичайно, даний приклад того, як зробити фотогалерею на сайті, виглядає дещо «незграбним». Але відкриття основного зображення в окремому вікні позбавляє від багатьох складних прийомів і дозволяє відобразити фотографію «в повний зріст».
Код головної сторінки:

Фотогалерея

Фотогалерея для свого сайту – всі способи реалізації
Фотогалерея для свого сайту – всі способи реалізації
Фотогалерея для свого сайту – всі способи реалізації
Фотогалерея для свого сайту – всі способи реалізації
Фотогалерея для свого сайту – всі способи реалізації

Код дочірньої веб-сторінки:

Фотогалерея для свого сайту – всі способи реалізації

Тому

Фотогалерея на CSS

Попередній приклад хоч і простий в реалізації, але дуже важкий. І більше схожий на «кістяк» простого сайту. Тому, щоб не використовувати в реалізації фотогалереї кілька взаємопов’язаних веб-документів, для обробки події (натискання на превью картинки) можна скористатися можливостями Javascript. Але поки ми утримаємося від програмування, і в наступному прикладі реалізуємо фотографію на основі CSS:

Фотогалерея для свого сайту – всі способи реалізації

Натискання на превьюшку фотографії призведе до збільшення масштабу. Крім цього фотогалерея «вміє» підлаштовуватися під розміри вікна браузера, пропорційно змінюючи довжину і ширину превью (зменшуючи або збільшуючи). І все це лише за допомогою CSS і легкої html структури:

Фотогалерея для свого сайту – всі способи реалізації

Html — код прикладу, як створити фотогалерею на сайті:

Фотогалерея для свого сайту – всі способи реалізації
Фотогалерея для свого сайту – всі способи реалізації
Фотогалерея для свого сайту – всі способи реалізації
Фотогалерея для свого сайту – всі способи реалізації

CSS фотогалереї:

#gall {
position: relative;
padding-top: 50%;
-moz-user-select: none; user-select: none;
}
#gall img {
position: absolute;
top: 25%;
left: 12.5%;
max-width: 24.5%;
max-height: 49.5%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
cursor: zoom-in;
transition: .2s;
}
#gall img:nth-child(4n-2) {left: 37.5%;}
#gall img:nth-child(4n-1) {left: 62.5%;}
#gall img:nth-child(4n) {left: 87.5%;}
#gall img:nth-child(n+5) {top: 75%;}
#gall img:focus {
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
max-width: 100%;
max-height: 100%;
outline: none;
pointer-events: none;
}
#gall img:focus ~ div {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #fff;
cursor: zoom-out;
}

Фотогалерея на основі Jquery

Крім «непрограммных» зразків на сайті можна використовувати фотогалереї, написані на Jquery. Самостійне створення галереї на основі цієї бібліотеки потребує спеціальних знань і навичок. Легше знайти вже готовий варіант в інтернеті і встановити його на свій сайт.

Ми радимо Galleria. Вона володіє широким набором параметрів. І коректно відображається на більшості мобільних пристроїв, що працюють під управлінням популярних операційних систем:

Фотогалерея для свого сайту – всі способи реалізації

Скрипт фотогалереї сайту являє собою архів, з якого потрібно отримати програмні файли і розмістити у себе на сайті.

Розглянемо покроково приклад підключення Galleria до звичайного html сайту:

  • Підключаємо бібліотеку Jquery у себе на веб-сторінці – для цього вставляємо всередині тега рядок:

Для перевірки підключення бібліотеки в тіло сторінки помістимо перевірочний скрипт:

$(«body»).text(«jQuery works»);

Якщо підключення здійснене коректно, то при запуску веб-сторінки в браузері буде відображений відповідний текст:

Фотогалерея для свого сайту – всі способи реалізації

  • Установка Galleria – на даному етапі слід завантажити архів з фотогалереєю для сайту і розпакувати його в директорію, де знаходяться наш html файл. Для підключення плагіна розміщуємо наступний код під рядком, за допомогою якої ми в попередньому кроці включили підтримку Jquery:

А для перевірки працездатності плагіна замість попереднього налагоджувального коду помістимо цей:

if (Galleria) { $(«body»).text(‘Galleria works’) }

Якщо галерея підключена правильно, то в браузері з’явиться напис «Galleria works»:

Фотогалерея для свого сайту – всі способи реалізації

  • Встановлюємо параметри галереї і додаємо в неї зображення – спочатку з допомогою класу CSS встановимо довжину, ширину і колір галереї. Для цього пропишемо значення відповідних стильових властивостей.

Приклад:

.galleria{ width: 700px; height: 400px; background: #000 }

Потім додаємо зображення для показу:

Фотогалерея для свого сайту – всі способи реалізації
Фотогалерея для свого сайту – всі способи реалізації
Фотогалерея для свого сайту – всі способи реалізації

  • Активуємо плагін та встановлюємо тему фотогалереї сайту – щоб зробити це, відразу під шаром зображень розміщуємо наступні рядки коду:

Galleria.loadTheme(‘galleria/themes/classic/galleria.classic.min.js’);
Galleria.run(‘.galleria’);

У прикладі ми встановлюємо класичну тему. На сайті плагіна доступні для скачування та інші теми оформлення, але всі вони платні:

Фотогалерея для свого сайту – всі способи реалізації

Наведемо весь код приклад сторінки з підключеним плагіном:

Документ без назви
.galleria{ width: 700px; height: 400px; background: #000 }
Фотогалерея для свого сайту – всі способи реалізації
Фотогалерея для свого сайту – всі способи реалізації
Фотогалерея для свого сайту – всі способи реалізації
Galleria.loadTheme(‘galleria/themes/classic/galleria.classic.min.js’);
Galleria.run(‘.galleria’);

Інші варіанти

Для сайтів, що працюють на основі популярних php-движків, в інтернеті є безліч спеціалізованих плагінів (розширень). Наприклад, щоб створити фотогалерею у себе на блозі, який працює під управлінням WordPress, можна використовувати плагін NextGen Gallery. Він є одним з найбільш популярних розширень для розгортання фотогалереї на базі WordPress:

Фотогалерея для свого сайту – всі способи реалізації

Також для створення красивої галереї можна скористатися спеціалізованими онлайн-ресурсами. Одним з них є Cincopa. Сервіс дозволяє зібрати фотогалерею власними руками, підібравши її дизайн на свій смак і колір:

Фотогалерея для свого сайту – всі способи реалізації

Ось тепер (на радість дружині) можна сміливо зібрати в купу всі свої фото шедеври, винести їх з будинку і розвісити на стінах» новій фотогалереї. А головне, не забудьте про ті фото, які лежать у тещі під диваном!