От автора: изображения на сегодняшний момент являются неотъемлемой частью любого хорошего сайта, при этом, как правило, для экономии свободного места и лучшего восприятия страниц вместо исходных изображений на страницах сайта публикуются их миниатюры, то есть копии исходного изображения, но значительно меньшего размера. В этом случае возникает вопрос: каким образом открыть полное, исходное изображение? Поэтому в данном уроке мы с Вами рассмотрим виджет Lightbox библиотеки Formstone, который позволяет открыть исходное изображение в красивом всплывающем окне.
Введение
В данном уроке мы с Вами рассмотрим два виджета библиотеки Formstone: Lightbox и Scrollbar. Первый позволяет создавать галереи изображений и отображать на экране изображения во всплывающем окне. Второй, используется для стилизации полосы скролла в блоках веб-страниц, если конечно таковы имеются.
В сегодняшнем уроке мы будем использовать две тестовые страницы, их исходный код я здесь приводить не буду, так как он доступен в дополнительных материалах к уроку. В каждой из них уже подключена библиотека jQuery и ядро библиотеки Formstone. Напомню, что скачать и ознакомиться с документацией по данной библиотеке, можно на официальном сайте: //formstone.it:
Виджет Lightbox
Итак, тестовая страница для работы с виджетом Lightbox:
Обратите внимание, здесь отображены три миниатюры изображений, увеличенные копии которых будут, в будущем показаны во всплывающих окнах Lightbox. Так же на странице, приведены две ссылки – о них мы поговорим позже. Итак, в соответствии с документацией, подключаем виджет Lightbox и вспомогательные элементы, от которых он зависит:
|
1 2 3 4 |
<link href="css/lightbox.css" rel="stylesheet"> <script src="js/touch.js"></script> <script src="js/transition.js"></script> <script src="js/lightbox.js"></script> |
Разметка HTML для работы с изображениями в виджете Lightbox:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div class="gallery"> <a class="lightbox" href="images/1.jpg" title="Произвольный текст"> <img src="images/th/1_th.jpg" alt=""> </a> <a class="lightbox" href="images/2.jpg" title="Произвольный текст"> <img src="images/th/2_th.jpg" alt=""> </a> <a class="lightbox" href="images/3.jpg" title="Произвольный текст"> <img src="images/th/3_th.jpg" alt=""> </a> </div> |
Обратите внимание, что каждое изображение – это ссылка на исходное изображение. В качестве ссылки выступает миниатюра. Далее, при помощи библиотеки jQuery, выбираем все ссылки с классом lightbox и вызываем главный метод виджета Lightbox.
|
1 2 3 |
jQuery('document').ready(function($) { $('.lightbox').lightbox(); }); |
Теперь переходим в браузер, обновляем страницу и кликаем по одной из миниатюр:
В этом случае виджет работает для одного изображения. Если же требуется объединить изображения в одну галерею, необходимо к каждой ссылке добавить атрибут data-lightbox-gallery, в котором указать имя будущей галереи:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div class="gallery"> <a class="lightbox" data-lightbox-gallery="gallery" href="images/1.jpg" title="Произвольный текст"> <img src="images/th/1_th.jpg" alt=""> </a> <a class="lightbox" data-lightbox-gallery="gallery" href="images/2.jpg" title="Произвольный текст"> <img src="images/th/2_th.jpg" alt=""> </a> <a class="lightbox" data-lightbox-gallery="gallery" href="images/3.jpg" title="Произвольный текст"> <img src="images/th/3_th.jpg" alt=""> </a> </div> |
При этом на экране мы увидим следующее:
То есть все тот же всплывающий блок, но теперь уже присутствуют элементы управления. Основные настройки виджета:
mobile – если передать true, виджет будет работать в режиме отображения контента для мобильных устройств;
fixed — если передать true, всплывающий блок займет фиксированную позицию на экране браузера;
infinite — если передать true, галерея будет зациклена, к примеру, при просмотре последнего изображения галереи, будет отображена кнопка Переход к следующему – к первому изображению;
formatter – здесь необходимо описать функцию, которая должна вернуть текст, который отображается под изображением во всплывающем окне;
margin – внешний отступ всплывающего блока;
top — позиция всплывающего блока по вертикали;
retina — если передать true, виджет будет работать в режиме отображения контента на экранах высокого разрешения retina.
minWidth – минимальная ширина всплывающего блока;
minHeight – минимальная высота всплывающего блока;
Помимо изображений, виджет Lightbox, очень хорошо работает с обычным текстом и с целыми сайтами, которые можно отображать внутри всплывающего окна. Для отображения простого текста во всплывающем окне, необходимо использовать следующую разметку:
|
1 2 3 4 5 6 7 8 9 10 11 |
<div> <a class="lightbox" href="#text"> Открыть текст </a> </div> <div id="text" style="display: none;"> <div> <h2>Заголовок!</h2> <p>Некий скрытый текст для тестирования.</p> </div> </div> |
Обратите внимание, что ссылке назначен класс lightbox, а значит она также попадет в выборку jQuery. Теперь если кликнуть по ссылке в браузере, мы увидим:
Соответственно, для открытия произвольного сайта во всплывающем окне, необходимо использовать следующую разметку:
|
1 2 3 |
<div> <a class="lightbox" href="//webformyself.com/forum">Внешняя ссылка</a> </div> |
В этом случае на экране мы увидим следубщее:
Виджет Scrollbar
Виджет Scrollbar, используется для стилизации вертикального или горизонтального скролла в html блоках веб-страниц. К примеру, если на странице сайта отображается огромный текст в небольшом по размеру блоке, причем у блока заданы соответствующие правила (width, height, overflow и т. д), значит, будет показана стандартная полоса прокрутки, вид которой, зачастую, не совместим с дизайном сайта. Поэтому давайте рассмотрим, как работать с данным виджетом. Итак, в соответствии с документацией, подключаем необходимые элементы:
|
1 2 |
<link href="css/scrollbar.css" rel="stylesheet"> <script src="js/scrollbar.js"></script> |
Далее, при помощи библиотеки jQuery, выбираем блок с текстом и вызываем метод scroll():
|
1 2 3 |
jQuery('document').ready(function($) { $('.text').scrollbar(); }); |
Так же добавим несколько правил CSS:
|
1 2 3 4 5 6 7 8 9 10 |
.text { border: 1px solid #eee; height: 200px; overflow: auto; margin: 20px 0 0; padding: 10px 20px 10px 20px; } .text.fs-scrollbar { padding: 0; } |
После обновления страницы, на экране мы увидим следующее:
Основные настройки виджета:
handleSize – размер ползунка скролла в пискселях;
horizontal – если передать true, виджет будет работать с горизонтальным скроллом;
duration – скорость движения скролла в миллисекундах.
В виджете Scrollbar, есть очень интересный метод scroll(), который автоматически перемещает скролл на необходимую позицию. Для его использования необходимо добавить следующий код:
|
1 |
$('.text').scrollbar('scroll',200,3000); |
При вызове метода scroll(), необходимо передать два параметра: первый – будущая позиция скола, второй скорость перемещения (если не передавать, будет взята с настроек).
На этом данный урок завершен. Всего Вам доброго и удачного кодирования!!!
