Highslide — проста і красива галерея для сайту

17

Від автора: У цьому уроці я хотів би представити Вашій увазі бібліотеку highslide.js, володіє величезним функціоналом по роботі з зображеннями і даними Вашого сайту. Використовуючи методи даної бібліотеки, можна не тільки відобразити зображення веб-сторінок у вигляді слайд-шоу і галерей зображень, але і вивести текстові дані у вигляді відкриваються модальних вікон.

Highslide — проста і красива галерея для сайтуHighslide — проста і красива галерея для сайту

Установка бібліотеки

Для скачування і установки даної бібліотеки, давайте перейдемо на офіційний сайт http://highslide.com/ і гукнемо по посиланню Download:

Highslide — проста і красива галерея для сайту

Перейшовши за посиланням Tutorial, Ви потрапляєте на сторінку документації даної бібліотеки, де описані всі основні методи і властивості.

Highslide — проста і красива галерея для сайту

Особливо хотів би звернути Вашу увагу на посилання API reference – це довідник методів бібліотеки. Після завантаження Ви отримаєте архів. В архіві Ви знайдете приклади використання даної бібліотеки, але нас цікавить папка highslide, саме в ній і розташована однойменна бібліотека. При цьому, бібліотеку можна використовувати в різних режимах і для кожного режиму необхідний певний файл:

Режим відображення зображення – при цьому на сторінці відображається мініатюра зображення, а при натисканні на неї відкривається повне зображення. Для даного режиму необхідний файл highslide.js.

Режим галереї зображень – коли кілька зображень групуються в одну галерею. Для даного режиму необхідний файл highslide-with-gallery.js.

Режим відображення даних HTML — коли використовуючи відкриваються вікна, відображається довільне вміст. Для цього необхідний файл highslide-with-html.js.

Відповідно у даному уроці ми коротко розглянемо кожен з цих режимів. Тому в якості прикладу я буду використовувати три тестові сторінки – по одній на кожен режим. А значить в кожну з них необхідно підключити один з файлів описаних вище. Крім цього необхідно підключити файл стилів highslide.css і скопіювати папку з графікою graphics. Надалі ми будемо вказувати шлях до неї, працюючи з бібліотекою.

Відображення зображень

Нагадаю, що для даного режиму ми підключаємо файл highslide.js і відповідно файл стилів highslide.css. вихідний код тестової сторінки:

Highslide — проста і красива галерея для сайту

Заголовок 1
Хедер 1

Highslide — проста і красива галерея для сайту

Заголовок 2
Хедер 2

Highslide — проста і красива галерея для сайту

Заголовок 3
Хедер 3

Highslide — проста і красива галерея для сайту

Заголовок 4
Хедер 4

Файл script.js, який так само підключається – це порожній файл, у якому ми будемо вести кодування на мові JavaScript. Зверніть увагу – якою повинна бути розмітка для роботи бібліотеки. Тобто, відображаємо мініатюру (зображення невеликого розміру) в якості посилання на повне зображення (зображення великого розміру). У посиланні необхідно обов’язково вказати атрибут onclick=»return hs.expand(this)». Звичайно використання атрибуту onclick – це суттєвий мінус, але що поробиш. До кожного зображення можна додати нижню підпис, у вигляді блоку div, з класом «highslide-caption», а так само заголовок (текстову шапку), у вигляді блоку блоку div, з класом «highslide-heading».

Далі у файлі script.js вкажемо шлях до папки з графікою:

hs.graphicsDir = ‘css/graphics/’;

Тепер подивимося, що вийшло в браузері:

Highslide — проста і красива галерея для сайту

Тобто, як Ви бачите, все успішно працює. Тепер у файлі scrit.js додамо ще два рядки:

hs.wrapperClassName = ‘wide-border’;
hs.outlineType = ’rounded-white’;

Перша – задає клас для блоку показу повного зображення, друга задає клас зовнішнього контейнера блоку показу повного зображення. Таким чином, ми додаємо білу широку рамку і скругляем кути в блоці показу повного зображення:

Highslide — проста і красива галерея для сайту

Наступні рядки додають кнопку закрити у верхній правий кут блоку перегляду повного зображення:

hs.registerOverlay({
html:’

‘,
position:’top right’
});

Highslide — проста і красива галерея для сайту

Так само хотів би відзначити, що в фалі стилів highslide.css, біля класів, які можна використовувати в методах бібліотеки, наведено коментарі та приклади використання їх.

Відображення галереї зображень.

HTML-розмітка галереї зображень, повністю аналогічна розмітці описаної вище, за винятком того, що всі зображення обертаються тегом div, з класом «highslide-gallery»:

Highslide — проста і красива галерея для сайту

Заголовок 1
Хедер 1

Highslide — проста і красива галерея для сайту

Заголовок 2
Хедер 2

Highslide — проста і красива галерея для сайту

Заголовок 3
Хедер 3

Highslide — проста і красива галерея для сайту

Заголовок 4
Хедер 4

У файлі script.js необхідно видалити або закоментувати попередній код і замінити новим:

hs.graphicsDir = ‘css/graphics/’;
hs.addSlideshow({
interval:1000,
repeat:true,
useControls:true,
overlayOptions:{
opacity:0.75,
position:’bottom center’,
hideOnMouseOut:true,
}
});

Зараз ми вже звертаємось до методу addSlideshow(), який додає слайдшоу до групи зображень. Параметри методу:

interval – інтервал в мілісекундах, між показами зображень;

repeat – якщо true – циклічний показ всіх зображень галереї;

useControls – якщо true — будуть показані елементи управління галереєю;

overlayOptions – параметри шару з елементами управління: opacity – прозорість, position – позиція, hideOnMouseOut – якщо true, елементи керування будуть відображатися при наведенні миші.

При цьому на екрані ми побачимо наступне:

Highslide — проста і красива галерея для сайту

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

hs.graphicsDir = ‘css/graphics/’;
hs.wrapperClassName = «controls-in-heading»;
hs.outlineType = ’rounded-white’;
hs.align = ‘center’;
hs.transitions = [‘expand’,’crossfade’];
hs.addSlideshow({
interval:1000,
repeat:true,
useControls:true,
overlayOptions:{
opacity:0.75,
position:’top right’,
hideOnMouseOut:false,
},
thumbstrip: {
position:’bottom center’,
mode:»horizontal»
}
});

Highslide — проста і красива галерея для сайту

Пояснення коду:

hs.wrapperClassName = «controls-in-heading» – цей клас зменшує блок елементів управління, що б він містився в шапці зображення;

hs.align = ‘center’ – має блок повного зображення по центру;

hs.transitions = [‘expand’,’crossfade’] – вибір анімації;

thumbstrip: — властивість, яка визначає параметри шару з мініатюрами блоку перегляду повного зображення: position – позиція мініатюр, mode – режим відображення, в нашому випадку горизонтальний (є ще vertical).

Відображення тексту

І останній приклад, який ми сьогодні розглянемо – це відображення звичайного тексту у вигляді відкриває віконця. Отже, нам буде потрібно HTML-розмітка наступного виду:

Відкрити віконце

Заголовок

Довільний текст

А у файлі script.js залишаємо тільки рядок:

hs.graphicsDir = ‘css/graphics/’;

Після цього відкриваємо браузер і перевіряємо:

Highslide — проста і красива галерея для сайту

Ось таким чином, можна відображати довільні дані.

Як Ви бачите функціонал бібліотеки, досить великий і ми в даному уроці розглянули лише малу його частину. Тому якщо Вас зацікавила дана бібліотека, продовжуйте знайомство з нею самостійно.

Всього Вам доброго і вдалого кодування!!!