Від автора: зображення на сьогоднішній момент є невід’ємною частиною будь-якого хорошого сайту, при цьому, як правило, для економії вільного місця і кращого сприйняття сторінок замість вихідних зображень на сторінках сайту публікуються їх мініатюри, тобто копії вихідного зображення, але значно меншого розміру. У цьому випадку виникає питання: яким чином відкрити повне, початкове зображення? Тому в даному уроці ми з Вами розглянемо віджет Lightbox бібліотеки Formstone, який дозволяє відкрити вихідне зображення в красивому спливаючому вікні.
Введення
У даному уроці ми з Вами розглянемо два віджета бібліотеки Formstone: Lightbox та Scrollbar. Перший дозволяє створювати галереї зображень і відображати на екрані зображення у спливаючому вікні. Другий, використовується для стилізації смуги скролла в блоках веб-сторінок, якщо звичайно такі є.
У сьогоднішньому уроці ми будемо використовувати дві тестові сторінки, їх вихідний код я тут приводити не буду, так як він доступний в додаткових матеріалах до уроку. В кожній з них вже підключена бібліотека jQuery і ядро бібліотеки Formstone. Нагадаю, що завантажити та ознайомитися з документацією по даній бібліотеці, можна на офіційному сайті: http://formstone.it:
Віджет Lightbox
Отже, тестова сторінка для роботи з віджетом Lightbox:
Зверніть увагу, тут відображені три мініатюри зображень, збільшені копії яких, у майбутньому показано у спливаючих вікнах Lightbox. Так само на сторінці, наведено два посилання – про них ми поговоримо пізніше. Отже, згідно з документацією, підключаємо віджет Lightbox та допоміжні елементи, від яких він залежить:
Розмітка HTML для роботи з зображеннями в віджеті Lightbox:
Зверніть увагу, що кожне зображення – це посилання на вихідне зображення. В якості посилання виступає мініатюра. Далі, за допомогою бібліотеки jQuery, вибираємо всі посилання з класом lightbox та викликаємо головний метод віджета Lightbox.
jQuery(‘document’).ready(function($) {
$(‘.lightbox’).lightbox();
});
Тепер переходимо в браузер, оновлюємо сторінку і клікаєм по одній з мініатюр:
У цьому випадку віджет працює для одного зображення. Якщо ж потрібно об’єднати зображення в одну галерею, необхідно до кожної посиланням додати атрибут data lightbox-gallery, в якому вказати ім’я майбутньої галереї:
При цьому на екрані ми побачимо наступне:
Тобто все той же спливаючий блок, але тепер вже присутні елементи управління. Основні налаштування віджета:
mobile – якщо передати true, віджет буде працювати в режимі відображення контенту для мобільних пристроїв;
fixed — якщо передати true, спливаючий блок займе фіксовану позицію на екрані браузера;
infinite — якщо передати true, галерея буде зациклена, наприклад, при перегляді останнього зображення галереї, з’явиться кнопка Перехід до наступного – до першого зображенню;
formatter – тут необхідно описати функцію, яка повинна повернути текст, який відображається під зображенням у спливаючому вікні;
margin – зовнішній відступ спливаючого блоку;
top — позиція спливаючого блоку по вертикалі;
retina — якщо передати true, віджет буде працювати в режимі відображення контенту на екранах високого дозволу retina.
minWidth – мінімальна ширина спливаючого блоку;
minHeight – мінімальна висота спливаючого блоку;
Крім зображень, віджет Lightbox, дуже добре працює зі звичайним текстом і з цілими сайтами, які можна відображати всередині спливаючого вікна. Для відображення простого тексту у спливаючому вікні, необхідно використовувати наступну розмітку:
Заголовок!
Якийсь прихований текст для тестування.
Зверніть увагу, що ссылке призначений клас lightbox, а значить вона також потрапить у вибірку jQuery. Тепер якщо клікнути по посиланню в браузері ми побачимо:
Відповідно, для відкриття довільного сайту у спливаючому вікні, необхідно використовувати наступну розмітку:
В цьому випадку на екрані ми побачимо наступне:
Віджет Scrollbar
Віджет Scrollbar, використовується для стилізації вертикального або горизонтального скролла в html блоках веб-сторінок. Наприклад, якщо на сторінці сайту відображається величезний текст у невеликому за розміром блоці, причому у блоку задані відповідні правила (width, height, overflow і т. д), значить, буде показана стандартна смуга прокрутки, вигляд якої, найчастіше, не сумісний з дизайном сайту. Тому давайте розглянемо, як працювати з цим віджетом. Отже, згідно з документацією, підключаємо необхідні елементи:
Далі, за допомогою бібліотеки jQuery, вибираємо блок з текстом і викликаємо метод scroll():
jQuery(‘document’).ready(function($) {
$(‘.text’).scrollbar();
});
Так само додамо кілька правил CSS:
.text {
border: 1px solid #eee;
height: 200px;
overflow: auto;
margin: 0 0 20px;
padding: 10px 20px 10px 20px;
}
.text.fs-scrollbar {
padding: 0;
}
Після оновлення сторінки, на екрані ми побачимо наступне:
Основні налаштування віджета:
handleSize – розмір повзунка скролла у точках;
horizontal – якщо передати true, віджет буде працювати з горизонтальним скроллом;
duration – швидкість руху скролла в мілісекундах.
В віджеті Scrollbar, є дуже цікавий метод scroll(), який автоматично переміщує скролл на необхідну позицію. Для його використання необхідно додати наступний код:
$(‘.text’).scrollbar(‘scroll’,200,3000);
При виклику методу scroll(), необхідно передати два параметри: перший – майбутня позиція відколу, другий швидкість переміщення (якщо не передавати, буде взята з налаштувань).
На цьому даний урок завершено. Всього Вам доброго і вдалого кодування!!!
