Всплывающие окна с использованием javascript

Январь 14, 2010

Автор: dexis

2 Комментария(ев)

lightBoxМногие видели на просторах сети красивые галереи изображений, в которых картинки отображаются в симпатичных всплывающих окошках, при этом остальное содержимое сайта затемняется полупрозрачным фоном, а пользователю предоставляется удобный интерфейс для перемещения по галерее.

Почему-то у некоторых складывается впечатление, что сделать нечто подобное на своем сайте без хорошего знания javascript или flash не возможно. Но это не совсем так. Существует огромное количество готовых решений, одно из которых (lightBox)  будет рассмотрено в данной статье.


lightBox

Данный скрип является плагином для широко известной javascript-библиотеки JQuery. Предназначен только для отображения картинок (т.е. никакое другое содержимое, например форму входа или страничку, отобразить во всплывающем окне не получится).

Однако, он отлично справляется с поставленной задачей. Пример его работы можно увидеть на сайте разработчика http://leandrovieira.com/projects/jquery/lightbox/. Там же можно ознакомиться с инструкций по использованию данного скрипта.

Для тех, у кого тяжело с иностранными языками, приведу краткое описание процесса подключения плагина:

Шаг 1: загрузка файлов

Качаем архив со всеми необходимыми файлами с сайта разработчика — lightBox

Шаг 2: подключение необходимых скриптов

Как я уже говорил, скрипту для работы необходима библиотека JQuery. Нужная версия библиотеки уже находится в архиве, поэтому достаточно распаковать файлы и вставить в секцию <head> … </head> вашей странички всего две строчки кода:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.4.js"></script>

Так же необходимо подключить файл с таблицами стилей:

<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.4.css" />

Шаг 3: активация скрипта

Для активации скрипта не нужно сколько-нибудь значительно изменять код вашей сранички. Достаточно просто ссылки на изображение, например:

<a href="img1.jpg"><img src="thumb_img1.jpg" alt="" /></a>

или указать для ссылки параметр rel:

<a href="img1.jpg" rel = "lightbox"><img src="thumb_img1.jpg" alt="" /></a>

или заключить набор ссылок в блок, с некоторым id:

<div id = "gallery">
<a href="img1.jpg"><img src="thumb_img1.jpg" alt="" /></a>
<a href="img1.jpg"><img src="thumb_img1.jpg" alt="" /></a>
<a href="img1.jpg"><img src="thumb_img1.jpg" alt="" /></a>
</div>

или же задать ссылкам некоторый класс:

<a href="img1.jpg" class = "gallery"><img src="thumb_img1.jpg" alt="" /></a>

После этого необходимо указать lightBox’у, какие изображения он должен использовать. Для этого вставляем внизу страницы следующий скрипт (выбрав только нужную нам строку):

<script type="text/javascript">
$(function() {
	// применить скрипт ко всем ссылкам на странице
        $('a').lightBox();
        // или только к тем, у которых в параметре rel
        // содержится строка "lightbox"
	$('a[@rel*=lightbox]').lightBox();
	// или к ссылкам, заключенным в блок #gallery
	$('#gallery a').lightBox();
	// или к ссылкам, имеющим класс gallery
	$('a.gallery').lightBox();
});
</script>

Вот и все!

Единственная трудность, с которой здесь можно столкнуться — перепутать пути к подключаемым файлам, или ошибиться с селектором (классом или id), но чтобы этого избежать, нужно просто быть внимательным.

Дополнительные параметры

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

  • overlayBgColor — цвет затеняющего прямоугольника, по умолчанию — черный (#000)
  • overlayOpacity — прозрачность затеняющего прямоугольника, по умолчанию 0.8
  • imageLoading — анимированная картинка загрузки, по умолчанию images/lightbox-ico-loading.gif
  • imageBtnClose — изобржние кнопки «Закрыть (Close)», по умолчанию images/lightbox-btn-close.gif
  • imageBtnPrev —  изображение кнопки «Предыдущая (Previous)», по умолчанию  images/lightbox-btn-prev.gif is default.
  • imageBtnNext — изоюражение кнопки «Следующая (Next)» , по умолчанию button. images/lightbox-btn-next.gif is default.
  • containerBorderSize — ширина граничы контейнера с изображением, по умолчанию  10
  • containerResizeSpeed — скорость анимации раскрытия картинки, по умолчанию 400
  • txtImage — текст  «Image» в подписи изображения
  • txtOf — текст «of» в подписи изображения
  • keyToClose — горячая клавиша для закрытия изображения, по умолчанию клавиша c
  • keyToPrev — горячая клавиша переключения на предыдущее изображение, по умолчанию p
  • keyToNext — горячая клавиша переключения на следующее изображение, по умолчанию n

Использовать эти параметры можно например так:

<script type="text/javascript">
$(function() {
   $('a[@rel*=lightbox]').lightBox({
	overlayBgColor: '#FFF',
	overlayOpacity: 0.6,
	imageLoading: 'http://example.com/images/loading.gif',
	imageBtnClose: 'http://example.com/images/close.gif',
	imageBtnPrev: 'http://example.com/images/prev.gif',
	imageBtnNext: 'http://example.com/images/next.gif',
	containerResizeSpeed: 350,
	txtImage: Изображение',
	txtOf: 'из'
   });
});
</script>

Веб-разработка


Комментарии к "Всплывающие окна с использованием javascript"

Игорь написал:
10.12.2010

спасибо большое!

Но есть одна проблема, когда открываю галерею сайта в браузере с харда, тоесть не веб-страничку, то всё замечательно работает. А когда открываю эту же галерею, но уже с интернета, то лайтбокс работает, но почему-то не отображаются кнопки «НЕКСТ», «ПРЕВ», «КЛОУЗ». В чём дело не пойму

dexis написал:
11.04.2011

Скорее всего неверно указан путь к файлам с изображениями кнопок. Могу посоветовать проверить наличие этих файлов на сервере и указать пути к ним с помощью параметров

imageLoading: ‘http://example.com/images/loading.gif’,
imageBtnClose: ‘http://example.com/images/close.gif’,
imageBtnPrev: ‘http://example.com/images/prev.gif’,
imageBtnNext: ‘http://example.com/images/next.gif’,

Оставить комментарий

Имя : 
Почта : 
Сайт : 
Комментарий: