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

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

От автора: изображения на сегодняшний момент являются неотъемлемой частью любого хорошего сайта, при этом, как правило, для экономии свободного места и лучшего восприятия страниц вместо исходных изображений на страницах сайта публикуются их миниатюры, то есть копии исходного изображения, но значительно меньшего размера. В этом случае возникает вопрос: каким образом открыть полное, исходное изображение? Поэтому в данном уроке мы с Вами рассмотрим виджет Lightbox библиотеки Formstone, который позволяет открыть исходное изображение в красивом всплывающем окне.

автор

Автор: Виктор Гавриленко

Меня зовут Виктор Гавриленко, по образованию я инженер электромеханик. Еще учась в институте, начал увлекаться компьютерными технологиями и программированием, на протяжении двух лет усиленно занимаюсь разработкой интернет сайтов и веб-программированием. Увлекаюсь написанием небольших скриптов на языке PHP, в связке базами данных MySQL, SQLite, неплохо знаю такие движки как WordPress, Drupal, Joomla.

скачать исходникискачать урок

Введение

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

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

Виджет Lightbox

Итак, тестовая страница для работы с виджетом Lightbox:

Обратите внимание, здесь отображены три миниатюры изображений, увеличенные копии которых будут, в будущем показаны во всплывающих окнах Lightbox. Так же на странице, приведены две ссылки – о них мы поговорим позже. Итак, в соответствии с документацией, подключаем виджет Lightbox и вспомогательные элементы, от которых он зависит:

<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:

<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.

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

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

В этом случае виджет работает для одного изображения. Если же требуется объединить изображения в одну галерею, необходимо к каждой ссылке добавить атрибут data-lightbox-gallery, в котором указать имя будущей галереи:

<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, очень хорошо работает с обычным текстом и с целыми сайтами, которые можно отображать внутри всплывающего окна. Для отображения простого текста во всплывающем окне, необходимо использовать следующую разметку:

<div>
		<a class="lightbox" href="#text">
			Открыть текст
		</a>
	</div>
	<div id="text"  style="display: none;">
		<div>
			<h2>Заголовок!</h2>
			<p>Некий скрытый текст для тестирования.</p>
		</div>
	</div>

Обратите внимание, что ссылке назначен класс lightbox, а значит она также попадет в выборку jQuery. Теперь если кликнуть по ссылке в браузере, мы увидим:

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

<div>
		<a class="lightbox" href="http://webformyself.com/forum">Внешняя ссылка</a>
	</div>

В этом случае на экране мы увидим следубщее:

Виджет Scrollbar

Виджет Scrollbar, используется для стилизации вертикального или горизонтального скролла в html блоках веб-страниц. К примеру, если на странице сайта отображается огромный текст в небольшом по размеру блоке, причем у блока заданы соответствующие правила (width, height, overflow и т. д), значит, будет показана стандартная полоса прокрутки, вид которой, зачастую, не совместим с дизайном сайта. Поэтому давайте рассмотрим, как работать с данным виджетом. Итак, в соответствии с документацией, подключаем необходимые элементы:

<link href="css/scrollbar.css" rel="stylesheet"> 
<script src="js/scrollbar.js"></script>

Далее, при помощи библиотеки jQuery, выбираем блок с текстом и вызываем метод scroll():

jQuery('document').ready(function($) {
		$('.text').scrollbar();
	});

Так же добавим несколько правил CSS:

.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(), который автоматически перемещает скролл на необходимую позицию. Для его использования необходимо добавить следующий код:

$('.text').scrollbar('scroll',200,3000);

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

На этом данный урок завершен. Всего Вам доброго и удачного кодирования!!!

Курс по HTML5: основы

Изучите HTML5 с нуля!

Смотреть курс

Метки: , ,

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree