Бібліотека FormStone. Робота з віджетами Lightbox та Scrollbar

18

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

Бібліотека FormStone. Робота з віджетами Lightbox та ScrollbarБібліотека FormStone. Робота з віджетами Lightbox та Scrollbar

Введення

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

У сьогоднішньому уроці ми будемо використовувати дві тестові сторінки, їх вихідний код я тут приводити не буду, так як він доступний в додаткових матеріалах до уроку. В кожній з них вже підключена бібліотека jQuery і ядро бібліотеки Formstone. Нагадаю, що завантажити та ознайомитися з документацією по даній бібліотеці, можна на офіційному сайті: http://formstone.it:

Бібліотека FormStone. Робота з віджетами Lightbox та Scrollbar

Віджет Lightbox

Отже, тестова сторінка для роботи з віджетом Lightbox:

Бібліотека FormStone. Робота з віджетами Lightbox та Scrollbar

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

Бібліотека FormStone. Робота з віджетами Lightbox та Scrollbar

Розмітка HTML для роботи з зображеннями в віджеті Lightbox:

Бібліотека FormStone. Робота з віджетами Lightbox та Scrollbar
Бібліотека FormStone. Робота з віджетами Lightbox та Scrollbar
Бібліотека FormStone. Робота з віджетами Lightbox та Scrollbar

Зверніть увагу, що кожне зображення – це посилання на вихідне зображення. В якості посилання виступає мініатюра. Далі, за допомогою бібліотеки jQuery, вибираємо всі посилання з класом lightbox та викликаємо головний метод віджета Lightbox.

jQuery(‘document’).ready(function($) {
$(‘.lightbox’).lightbox();
});

Тепер переходимо в браузер, оновлюємо сторінку і клікаєм по одній з мініатюр:

Бібліотека FormStone. Робота з віджетами Lightbox та Scrollbar

У цьому випадку віджет працює для одного зображення. Якщо ж потрібно об’єднати зображення в одну галерею, необхідно до кожної посиланням додати атрибут data lightbox-gallery, в якому вказати ім’я майбутньої галереї:

Бібліотека FormStone. Робота з віджетами Lightbox та Scrollbar
Бібліотека FormStone. Робота з віджетами Lightbox та Scrollbar
Бібліотека FormStone. Робота з віджетами Lightbox та Scrollbar

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

Бібліотека FormStone. Робота з віджетами Lightbox та Scrollbar

Тобто все той же спливаючий блок, але тепер вже присутні елементи управління. Основні налаштування віджета:

mobile – якщо передати true, віджет буде працювати в режимі відображення контенту для мобільних пристроїв;

fixed — якщо передати true, спливаючий блок займе фіксовану позицію на екрані браузера;

infinite — якщо передати true, галерея буде зациклена, наприклад, при перегляді останнього зображення галереї, з’явиться кнопка Перехід до наступного – до першого зображенню;

formatter – тут необхідно описати функцію, яка повинна повернути текст, який відображається під зображенням у спливаючому вікні;

margin – зовнішній відступ спливаючого блоку;

top — позиція спливаючого блоку по вертикалі;

retina — якщо передати true, віджет буде працювати в режимі відображення контенту на екранах високого дозволу retina.

minWidth – мінімальна ширина спливаючого блоку;

minHeight – мінімальна висота спливаючого блоку;

Крім зображень, віджет Lightbox, дуже добре працює зі звичайним текстом і з цілими сайтами, які можна відображати всередині спливаючого вікна. Для відображення простого тексту у спливаючому вікні, необхідно використовувати наступну розмітку:

Відкрити текст

Заголовок!

Якийсь прихований текст для тестування.

Зверніть увагу, що ссылке призначений клас lightbox, а значить вона також потрапить у вибірку jQuery. Тепер якщо клікнути по посиланню в браузері ми побачимо:

Бібліотека FormStone. Робота з віджетами Lightbox та Scrollbar

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

Зовнішня посилання

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

Бібліотека FormStone. Робота з віджетами Lightbox та Scrollbar

Віджет Scrollbar

Віджет Scrollbar, використовується для стилізації вертикального або горизонтального скролла в html блоках веб-сторінок. Наприклад, якщо на сторінці сайту відображається величезний текст у невеликому за розміром блоці, причому у блоку задані відповідні правила (width, height, overflow і т. д), значить, буде показана стандартна смуга прокрутки, вигляд якої, найчастіше, не сумісний з дизайном сайту. Тому давайте розглянемо, як працювати з цим віджетом. Отже, згідно з документацією, підключаємо необхідні елементи:

Бібліотека FormStone. Робота з віджетами Lightbox та Scrollbar

Далі, за допомогою бібліотеки 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;
}

Після оновлення сторінки, на екрані ми побачимо наступне:

Бібліотека FormStone. Робота з віджетами Lightbox та Scrollbar

Основні налаштування віджета:

handleSize – розмір повзунка скролла у точках;

horizontal – якщо передати true, віджет буде працювати з горизонтальним скроллом;

duration – швидкість руху скролла в мілісекундах.

В віджеті Scrollbar, є дуже цікавий метод scroll(), який автоматично переміщує скролл на необхідну позицію. Для його використання необхідно додати наступний код:

$(‘.text’).scrollbar(‘scroll’,200,3000);

При виклику методу scroll(), необхідно передати два параметри: перший – майбутня позиція відколу, другий швидкість переміщення (якщо не передавати, буде взята з налаштувань).

На цьому даний урок завершено. Всього Вам доброго і вдалого кодування!!!