Отображение контента в Shadowbox

Главная > JavaScript> Отображение контента в Shadowbox

Отображение контента в 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. Он указывает на то, что эта ссылка будет обрабатываться скриптом 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>

Результат работы будет такой

Рисунок

Все скачали новую версию php?

В метод достаточно передать следующие параметры:

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(
'http://www.ua-football.com/data/video/other/2008_2009'
+'/ukraine_england_1_0.flv','Украина-Англия 1:0')">Гол</a>
</body>
</html>

В результате

Рисунок

Даже этот мяч не помог сборной Украины попасть на чемпионат мира

Вывод
Библиотека Shadowbox предоставляет богатый выбор инструментов для отображения во всплывающих окнах различного рода контента. Очень хорошо подходит для организации различного рода фото и видео галерей. Также можно использовать для работы с различными страничками во всплывающих окнах.

Популярность: 24%

Интересное из других блогов:

2leep.com

И не забывайте комментировать статью.

Метки: JavaScript, lightbox, shadowbox

JavaScript | web-junior 19 Декабря 2009 года

Добавляйся в группу во вконтакте, чтобы самым первым узнавать все новости сайта

Отзывов: 37 на «Отображение контента в Shadowbox»

« Предыдущие 1 2 3

Автор: Владимир, 20 декабря 2011 в 14:53
использует Firefox 8.0.1 на Windows 7 x64 Edition
Очень помогла статья, но есть один вопрос, Я хочу вывести форму обратной связи при помощи этого плагина в modx revolution, как это сделать? (выводить полностью страницу мне не нужно как показано в описании, нужны просто поля имя тема текст заявки и буттон отправить)

Ответить
- Автор: web-junior, 20 декабря 2011 в 16:14
  использует Firefox 8.0 на GNU/Linux x64
  Так как вы хотите сделать не получится. Shadowbox не умеет отображать простой HTML. Нужно создать отдельную страничку (или html-файл) с полями и кнопками и открывать через плеер iframe как показано выше.
  
  Ответить
Автор: Алина, 30 марта 2012 в 15:21
использует Firefox 11.0 на Windows 7
Здравствуйте!
во первых спасибо за статью.
у меня такая проблема: вставляю в Shadowbox iframe, все работает отлично только когда окно всплывает страница прокручивается на верх, а мне надо чтобы она оставалась на месте как при просмотре фото в Shadowbox.

подскажите что надо поправить?

Ответить
- Автор: web-junior, 16 апреля 2012 в 16:27
  использует Firefox 11.0 на GNU/Linux x64
  Добрый день
  В Shadowbox кажется нет опций и методов для центрирования окна. Можно попробовать с помощью JS (jQuery например) переместить блок с Shadowbox в нужное место.
  
  Ответить
  - Автор: Алина, 17 апреля 2012 в 13:45
    использует Firefox 11.0 на Windows 7
    но когда открывается фото оно не перекручивает страницу вверх, это происходит только при просмотре страницы в ифрейме
    
    Ответить

« Предыдущие 1 2 3

RSS-лента комментариев. Адрес для трекбека

Ваш отзыв

« Написание виджета для WordPress

Долой регулярные выражения или новый способ проверки данных »

web-junior.net

Все для начинающего веб-программиста