Фальсификации выборов президента: как это делается Не смотря на огромное количество нарушений ...
АЛЫЕ ПАРУСА В ПЕТЕРБУРГЕ - (0)«Алые паруса» — один из самых известных праздников в Северной столице, ...
Владимир Румянцев.Ангелы и коты - (0)Владимир Румянцев.Ангелы и коты. Владимир Румянцев родился в 1957 году, рисовать начал в ...
фото Санкт-Петербурга - (0)Санкт-Петербург Санкт-Петербург невероятно красивый город, думаю даже коренным "питерцам" будет и...
Ближневосточная проблема - простое объяснение за пять минут - (0)Ближневосточная проблема - простое объяснение за пять минут простое объяснение ближневосточ...
(и еще 45 записям на сайте сопоставлена такая метка)
Другие метки пользователя ↓
css drupal modx photoshop shadowbox авто анализ сайта аренда теплохода бyддизм бухгалтерский учет выпускной вечер грузовик женщины запчасти интернет магазин искусство квадроциклы клод моне коммерческий транспорт ламрим - чистое золото любовь маяковский молитва мотоциклы новый год отдых пляж поддержка сайта позитив позитиф праздник продвижение сайта реклама сайт санкт-петербург свадьба секреты секс снегоход создание сайта создание сайтов статистика сайта стихи театр туризм финляндия фото хемингуэй христианство черногория
Просмотр фотографий во всплыващем окне Shadowbox |
Дневник |
На данный момент существует около десятка популярных скриптов для отображения контента во всплывающих окнах. Удобный скрипт для отображения фотографий во всплыващем окне 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 ссылки написать [имя_группы].
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>
В метод достаточно передать следующие параметры:
Видео
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 предоставляет богатый выбор инструментов для отображения во всплывающих окнах различного рода контента. Очень хорошо подходит для организации различного рода фото и видео галерей. Также можно использовать для работы с различными страничками во всплывающих окнах.
Метки: shadowbox |
| Страницы: | [1] |
