Від автора: У цьому уроці я хотів би представити Вашій увазі бібліотеку highslide.js, володіє величезним функціоналом по роботі з зображеннями і даними Вашого сайту. Використовуючи методи даної бібліотеки, можна не тільки відобразити зображення веб-сторінок у вигляді слайд-шоу і галерей зображень, але і вивести текстові дані у вигляді відкриваються модальних вікон.
Установка бібліотеки
Для скачування і установки даної бібліотеки, давайте перейдемо на офіційний сайт http://highslide.com/ і гукнемо по посиланню Download:
Перейшовши за посиланням Tutorial, Ви потрапляєте на сторінку документації даної бібліотеки, де описані всі основні методи і властивості.
Особливо хотів би звернути Вашу увагу на посилання API reference – це довідник методів бібліотеки. Після завантаження Ви отримаєте архів. В архіві Ви знайдете приклади використання даної бібліотеки, але нас цікавить папка highslide, саме в ній і розташована однойменна бібліотека. При цьому, бібліотеку можна використовувати в різних режимах і для кожного режиму необхідний певний файл:
Режим відображення зображення – при цьому на сторінці відображається мініатюра зображення, а при натисканні на неї відкривається повне зображення. Для даного режиму необхідний файл highslide.js.
Режим галереї зображень – коли кілька зображень групуються в одну галерею. Для даного режиму необхідний файл highslide-with-gallery.js.
Режим відображення даних HTML — коли використовуючи відкриваються вікна, відображається довільне вміст. Для цього необхідний файл highslide-with-html.js.
Відповідно у даному уроці ми коротко розглянемо кожен з цих режимів. Тому в якості прикладу я буду використовувати три тестові сторінки – по одній на кожен режим. А значить в кожну з них необхідно підключити один з файлів описаних вище. Крім цього необхідно підключити файл стилів highslide.css і скопіювати папку з графікою graphics. Надалі ми будемо вказувати шлях до неї, працюючи з бібліотекою.
Відображення зображень
Нагадаю, що для даного режиму ми підключаємо файл highslide.js і відповідно файл стилів highslide.css. вихідний код тестової сторінки:
Файл script.js, який так само підключається – це порожній файл, у якому ми будемо вести кодування на мові JavaScript. Зверніть увагу – якою повинна бути розмітка для роботи бібліотеки. Тобто, відображаємо мініатюру (зображення невеликого розміру) в якості посилання на повне зображення (зображення великого розміру). У посиланні необхідно обов’язково вказати атрибут onclick=»return hs.expand(this)». Звичайно використання атрибуту onclick – це суттєвий мінус, але що поробиш. До кожного зображення можна додати нижню підпис, у вигляді блоку div, з класом «highslide-caption», а так само заголовок (текстову шапку), у вигляді блоку блоку div, з класом «highslide-heading».
Далі у файлі script.js вкажемо шлях до папки з графікою:
hs.graphicsDir = ‘css/graphics/’;
Тепер подивимося, що вийшло в браузері:
Тобто, як Ви бачите, все успішно працює. Тепер у файлі scrit.js додамо ще два рядки:
hs.wrapperClassName = ‘wide-border’;
hs.outlineType = ’rounded-white’;
Перша – задає клас для блоку показу повного зображення, друга задає клас зовнішнього контейнера блоку показу повного зображення. Таким чином, ми додаємо білу широку рамку і скругляем кути в блоці показу повного зображення:
Наступні рядки додають кнопку закрити у верхній правий кут блоку перегляду повного зображення:
hs.registerOverlay({
html:’
‘,
position:’top right’
});
Так само хотів би відзначити, що в фалі стилів highslide.css, біля класів, які можна використовувати в методах бібліотеки, наведено коментарі та приклади використання їх.
Відображення галереї зображень.
HTML-розмітка галереї зображень, повністю аналогічна розмітці описаної вище, за винятком того, що всі зображення обертаються тегом div, з класом «highslide-gallery»:
У файлі 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, елементи керування будуть відображатися при наведенні миші.
При цьому на екрані ми побачимо наступне:
Дану галерею можна поліпшити, а саме додати мініатюри в блок перегляду повного зображення, а також розташувати даний блок по центру і змінити анімаційний ефект зміни зображень:
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»
}
});
Пояснення коду:
hs.wrapperClassName = «controls-in-heading» – цей клас зменшує блок елементів управління, що б він містився в шапці зображення;
hs.align = ‘center’ – має блок повного зображення по центру;
hs.transitions = [‘expand’,’crossfade’] – вибір анімації;
thumbstrip: — властивість, яка визначає параметри шару з мініатюрами блоку перегляду повного зображення: position – позиція мініатюр, mode – режим відображення, в нашому випадку горизонтальний (є ще vertical).
Відображення тексту
І останній приклад, який ми сьогодні розглянемо – це відображення звичайного тексту у вигляді відкриває віконця. Отже, нам буде потрібно HTML-розмітка наступного виду:
Заголовок
Довільний текст
А у файлі script.js залишаємо тільки рядок:
hs.graphicsDir = ‘css/graphics/’;
Після цього відкриваємо браузер і перевіряємо:
Ось таким чином, можна відображати довільні дані.
Як Ви бачите функціонал бібліотеки, досить великий і ми в даному уроці розглянули лише малу його частину. Тому якщо Вас зацікавила дана бібліотека, продовжуйте знайомство з нею самостійно.
Всього Вам доброго і вдалого кодування!!!
