Swipebox фотогалерия за мобилната версия на сайта

Начало Уеб дизайн и оптимизация на сайтове Фотолаборатория Радиотехника Полезни програми Изработка на сайтове

Създаване на фото галерия в сайта

Swipebox - фотогалерия за мобилната версия на сайта. Инсталиране и настройка

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

Инсталиране на фотогалерия Swipebox

За да инсталирате фотогалериятаSwipebox, първо създайте нова папка на сайта, като я наименувате, както може би се досещате,swipebox. За по-лесно тази папка трябва да бъде поставена в същата директория като страницата на фотогалерията. След това изтеглете архива и го разархивирайте в създадената папка. В него ще имаме три скрипта (*.js ), спомагателни картинки (папкаimg ) и CSS файл (*.css ). След това вмъкнете следните редове в заглавието на страницата с бъдещата фотогалерия в тага., указвайки пътищата до новите ни файлове и скрипта за инициализация на плъгина.

Ако е необходимо да направите надписи за изображения, тогава ги поставяме в заглавието на връзките. На фигурата е показан пример за проста фотогалерия от три изображения:

Поради това е желателно голямото изображение да има разделителна способност, например поне 1000 вертикални пиксела за стандартен екранFull HD - 1920x1080. В нашия пример това е картината "Subbotnik".

Настройване на галерия със снимки на Swipebox

Някои параметри на прозореца на галерията, например цвят на фона и неговата прозрачност, цвят на надписа и др., се задават вswipebox.css CSS файла. Помощни снимки (напред, назад,зареждане, изход) се намират в папкаimg и те също могат да бъдат променяни по ваша преценка.