Фотогалерея Swipebox для мобільної версії сайту

Головна Веб-дизайн та оптимізація сайтів Фотолабораторія Радіотехніка Корисні програми Розробка сайтів

Створення фотогалереї на сайті

Swipebox – фотогалерея для мобільної версії сайту. Встановлення та налаштування

В даний час (2016) доступна версія Swipebox v1.4.4, на прикладі якої і розглянемо установку плагіна на сайт. Результат роботи з розгортання одиночного зображення за допомогоюSwipebox показаний на малюнку праворуч.

Встановлення фотогалереї Swipebox

Для встановлення фотогалереїSwipebox спочатку створимо на сайті нову папку, назвавши її, як не важко здогадатися,swipebox. Цю папку бажано для простоти розмістити у тому ж каталозі, що й сторінка з фотогалереєю. Потім завантажуємо архів і розпаковуємо його у створену папку. У нас вийде три скрипти (*.js ), допоміжні картинки (папкаimg ) і файл CSS (*.css ). Далі вставимо в заголовок сторінки з майбутньою фотогалереєю всередину тега. наступні рядки, що вказують шляхи до нових файлів, і скрипт ініціалізації плагіна.

Якщо потрібно зробити написи до зображень, то розміщуємо їх у title посилань. Приклад простої фотогалереї з трьох зображень показаний на малюнку:

Тому бажано, щоб велике зображення мало запас дозволу, наприклад, не менше 1000 пікселів по вертикалі для стандартного екрануFull HD - 1920х1080. У нашому прикладі, це картинка "Суботник".

Налаштування фотогалереї Swipebox

Деякі параметри вікна галереї, наприклад, колір фону та його прозорість, колір напису та ін., задаються в CSS-файліswipebox.css. Допоміжні картинки (вперед, назад,завантаження, вихід) розташовані в папціimg, і їх також можна міняти на ваш розсуд.