На данный момент существует около десятка популярных скриптов для отображения контента во всплывающих окнах. Удобный скрипт для отображения фотографий во всплыващем окне Shadowbox. пример работы Shadowbox можно посмотреть на сайте: Малотоннажный грузовик
Скачать Shadowbox можно на официальном сайте. На страничке загрузки можно выбрать уровень компрессии, формат архива и создать свою сборку. Я выбрал то, что стояло по умолчанию: build, full package и zip. Распаковываем и получаем папку shadowbox-build-3.0rc1.
Настройка
Для корректной работы тестовых примеров в каждом случае нужно подключить файлы shadowbox-build-3.0rc1/shadowbox.js и shadowbox-build-3.0rc1/shadowbox.css. Для этого в теге <head> достаточно написать.
<link rel="stylesheet" type="text/css" href="shadowbox-build-3.0rc1/shadowbox.css"> <script type="text/javascript" src=" shadowbox-build-3.0rc1/shadowbox.js"></script>
Для инициализации нужно вызвать метод Shadowbox.init до использования Shadowbox, т.е. в том же теге <head>.
<script> Shadowbox.init({ language: 'ru', players: ['img','iframe', 'qt','wmp'], }); </script>
В метод init можно не передавать никакие опции. Их достаточно много и полное описание можно найти на страничке опций официального сайта. В данном случае language устанавливает язык, а players указывает список загружаемых плееров.
От слов к делу
Самый простой тестовый пример – это отображение во всплывающем окне рисунок. Вот небольшой код, который отобразит рисунок при нажатии на ссылку Image.
test_image.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Title</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <link rel="stylesheet" type="text/css" href="shadowbox-build-3.0rc1/shadowbox.css"> <script type="text/javascript" src=" shadowbox-build-3.0rc1/shadowbox.js"></script> <script type="text/javascript"> Shadowbox.init({ language: 'ru', players: ['img'], }); </script> </head> <body> <a href="11.jpg" rel="shadowbox;height=390;width=650" title="Какой-то рисунок">Image</a> </body> </html>
Как видно из кода все параметры указываются в ссылке в атрибуте rel.
- shadowbox – этот параметр должен стоять первым в атрибуте rel. Он указывает на то, что эта ссылка будет обрабатываться скриптом Shadowbox. Также можно использовать слово lightbox;
- height – высота всплывающего окна;
- width – ширина всплывающего окна;
- options – в формате JSON можно указать значение любых опций.
Группа рисунков
Для того, чтобы связать в группу все рисунки галереи, достаточно после shadowbox в атрибуте rel ссылки написать [имя_группы].
test_group.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Title</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <link rel="stylesheet" type="text/css" href="shadowbox-build-3.0rc1/shadowbox.css"> <script type="text/javascript" src=" shadowbox-build-3.0rc1/shadowbox.js"></script> <script type="text/javascript"> Shadowbox.init({ language: 'ru', players: ['img'], }); </script> </head> <body> Группа рисунков<br> <a href="images/3.jpg" rel="shadowbox[group1];width=500; height=400"><img src="images/3.jpg" width="150" height="150"></a> <a href="images/3d_138.jpg" rel="shadowbox[group1];width=500; height=400"><img src="images/3d_138.jpg" width="150" height="150"></a> <a href="images/4.jpg" rel="shadowbox[group1];width=500; height=400"><img src="images/4.jpg" width="150" height="150"></a> <a href="images/5.jpg" rel="shadowbox[group1];width=500; height=400"><img src="images/5.jpg" width="150" height="150"></a> <a href="images/0006_2.jpg" rel="shadowbox[group1];width=500; height=400"><img src="images/0006_2.jpg" width="150" height="150"></a> <a href="images/7.jpg" rel="shadowbox[group1];width=500; height=400"><img src="images/7.jpg" width="150" height="150"></a> </body> </html>
Теперь shadowbox будет перелистывать все фотографии в галерее.
Фрейм
Во всплывающем окне Shadowbox также можно открыть другую страницу с помощью плеера iframe. Попробуем в этот раз открыть программно. Для программного открытия всплывающего окна нужно вызвать метод Shadowbox.open и передать ему параметры для открытия окна в формате JSON. Пример все разъяснит.
test_iframe.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Title</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <link rel="stylesheet" type="text/css" href="shadowbox-build-3.0rc1/shadowbox.css"> <script type="text/javascript" src=" shadowbox-build-3.0rc1/shadowbox.js"></script> <script type="text/javascript"> Shadowbox.init({ language: 'ru', players: ['img','iframe'], }); </script> <script type="text/javascript"> function showBox(){ Shadowbox.open({content: 'http://php.net/', player: 'iframe', title: 'PHP Group', width: '800', height: '400'}); } </script> </head> <body> <a href="#" onclick="showBox()">Iframe</a> </body> </html>
В метод достаточно передать следующие параметры:
- content – URL-адрес странички, которую нужно открыть;
- player – наименование плеера, который будет отображать страничку. В данном случае это iframe;
- title – наименование, которое будет отображаться в левом верхнем углу окна;
- width – ширина окна в пикселах;
- height – высота окна в пикселах.
Видео
Shadowbox может проигрывать видео. Для корректного воспроизведения видео нужен Windows Media Player. В этом случае в Shadowbox нужно инициализировать плеер wmp.
test_video.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Title</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <link rel="stylesheet" type="text/css" href="shadowbox-build-3.0rc1/shadowbox.css"> <script type="text/javascript" src=" shadowbox-build-3.0rc1/shadowbox.js"></script> <script type="text/javascript"> Shadowbox.init({ language: 'ru', players: ['wmp'], }); </script> </head> <body> <a href="Video.wmv" rel="shadowbox;player=wmp;width=500px; height=250px">Малотоннажный грузовик </a> </body> </html>
При нажатии на ссылку будем смотреть видео.
FLV-плеер
У Shadowbox нет плеера, который отображает видео в формате FLV. Поэтому используется сторонний плеер. На официальном сайте рекомендуют использовать JW FLV player, который можно скачать отсюда.
Архив нужно распаковать в папку shadowbox-build-3.0rc1/libraries. Должна образоваться папка mediaplayer-viral. Ее нужно переименовать в mediaplayer. После чего заходим в папку shadowbox-build-3.0rc1/libraries/mediaplayer и находим файл player-viral.swf. Его нужно переименовать в player.swf. После этих манипуляций в Shadowbox будет доступен плеер FLV, с помощью которого можно проигрывать видео в формате flv.
test_flv.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Title</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <link rel="stylesheet" type="text/css" href="shadowbox-build-3.0rc1/shadowbox.css"> <script src="shadowbox-build-3.0rc1/shadowbox.js"></script> <script type="text/javascript"> Shadowbox.init({ language: 'ru', players: ['img','flv'], }); </script> <script type="text/javascript"> function openflv(fileUrl, title){ Shadowbox.open({content: fileUrl, title: title,player:'flv', width: '500', height: '400'}); } </script> </head> <body> <a href="#" onclick="openflv( 'file=http://www.tataspb.ru/data/flash/ТАТА_613_01.flv','грузовик ТАТА-613')">грузовик ТАТА-613</a> </body> </html> пример работы Shadowbox можно посмотреть на сайте: Малотоннажный грузовик ТАТА-613
Вывод
Библиотека Shadowbox предоставляет богатый выбор инструментов для отображения во всплывающих окнах различного рода контента. Очень хорошо подходит для организации различного рода фото и видео галерей. Также можно использовать для работы с различными страничками во всплывающих окнах.