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

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


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

2leep.com

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

Метки: , ,

categories JavaScript | 19 Декабря 2009 года

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

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

1 2 3

  1. Автор: Regent, 14 января 2010 в 20:07

    использует Firefox 3.5.7 Firefox 3.5.7 на Windows XP Windows XP

    Почаще пиши о JavaScript!)

    Ответить

    • Автор: web-junior, 14 января 2010 в 20:12

      использует Firefox 3.5.6 Firefox 3.5.6 на Windows XP Windows XP

      Уж как получится ) Я как-то больше знаю PHP, C и Java, чем JavaScript.
      Но по мере работы с различными интересными технологиями, буду стараться писать о них.
      И о JavaScript в первую очередь!

      Ответить

  2. Автор: Костян, 23 января 2010 в 21:26

    использует Opera 10.10 Opera 10.10 на Windows XP Windows XP

    Мда, пишешь вроде норм интересно :)

    как раз собираю библиотеки для разработки…

    Ответить

  3. Автор: McFly, 2 февраля 2010 в 21:53

    использует Firefox 3.5.7 Firefox 3.5.7 на Windows Vista Windows Vista

    Я бы написал про другие шадовбоксы и лайтбоксы, их так то много и увсех свои плюсы и минусы.

    Ответить

    • Автор: web-junior, 2 февраля 2010 в 23:07

      использует Firefox 3.5.7 Firefox 3.5.7 на Windows XP Windows XP

      Я стараюсь писать о том, с чем имел дело. В основном из-за того, что нет времени на детальное рассмотрение всех других лайтбоксов, которыми сейчас кишит Интернет.
      По мере ознакомления с другими лайтбоксами обязатально буду описывать примеры работы и с ними.

      Ответить

  4. Автор: Валерий, 2 марта 2010 в 11:25

    использует Firefox 3.5.8 Firefox 3.5.8 на Windows XP Windows XP

    Есть вопрос по теме “Группа рисунков” – у меня все красиво показівает, но можно ли как-то сделать вверху или внизу preview каждого рисунка? Вдруг кто-то не захочет перелистывать все фото? А так будут маленькие фотки и можно будет переходить на конкретную. Я просматривал и на сайте разработчика и сам пробовал видоизменить, но не удалось. Может есть какие-то мысли как можно будет так сделать? Заранее спасибо.

    Ответить

    • Автор: web-junior, 2 марта 2010 в 14:39

      использует Firefox 3.6 Firefox 3.6 на Windows XP Windows XP

      Добрый день!
      К сожалению, в текущем официальном релизе shadowbox отображения превьюшек нет. Единственное, что предлагает официальный релиз – это опцию
      counterType:’skip’
      При установке этой опции вместо “5 из 6″ (см. скрин) будет отображаться номера рисунков “1 2 3 4 5 6″

      К счастью, не мы одни столкнулись с такой проблемой. Вот здесь один человек изменил shadowbox.
      С помощью этой модификации можно отобразить превьюшки внизу.
      Качаем отсюда архив и распаковываем его в папку с shadowbox, заменяя все файлы.
      Далее подключаем как обычно css- и js-файлы. При инициализации добавляем опцию counterType:”thumbskip”
      …

      Shadowbox.init({
      players: ['img'],
      counterType:”thumbskip”,
      counterLimit:10
      });

      …

      После чего мод берет для превьюшек рисунки, которые расположены в теге img. А большие рисунки берутся из тега a. Мод судя по всему не изменяет размер превьюшек, поэтому их лучше заранее изменить до размеров 50Х50

      Рекомендуется использовать Shadowbox 3-й версии. У меня по-крайней мере на 3-й работало нормально.

      Ответить

      • Автор: Валерий, 6 марта 2010 в 00:12

        использует Firefox 3.5.8 Firefox 3.5.8 на Windows XP Windows XP

        Спасибо большое. Это мне как раз и надо было :) .

        Ответить

  5. Автор: Ден, 2 марта 2010 в 22:34

    использует Opera 10.10 Opera 10.10 на Windows XP Windows XP

    Доброго времени суток у меня такая непонятка случилась… при отображении картинки над ней и слева от неё черные полосы примерно 5рх (версия скрипта 3, проверил сss бокса полностью идентична (имена файлов не в счет), но на сайте бокса все четко по картинке, как надо… Хотелось бы совета что сие может быть и как убрать. Подскажите в скриптах не силен, если дело в них…

    Ответить

    • Автор: web-junior, 3 марта 2010 в 13:25

      использует Firefox 3.6 Firefox 3.6 на Windows XP Windows XP

      Точно сказать не могу.
      Это может происходить из-за версии браузера (поддерживаемые версии можно просмотреть здесь), также глюки могут быть от доктайпа (см. тамже)

      Ответить

  6. Автор: Ден, 3 марта 2010 в 18:46

    использует Opera 10.10 Opera 10.10 на Windows XP Windows XP

    да нет не-то…. эти варианты проблематики проверил по умолчанию… ладно будем ставить опыты. спасибо.

    Ответить

    • Автор: web-junior, 3 марта 2010 в 18:53

      использует Firefox 3.6 Firefox 3.6 на Windows XP Windows XP

      Если получится исправить, расскажите пожалуйста и нам о способах исправления таких глюков.

      Ответить

  7. Автор: Kvarcus, 9 апреля 2010 в 05:44

    использует Firefox 3.6.3 Firefox 3.6.3 на Windows 7 Windows 7

    Спасибо за статью.
    Вот только криво работает в Opera и совсем не хочет работать в IE8 в более ранних версиях даже не смотрел.Лис и хром все отображают правильно.

    Ответить

    • Автор: web-junior, 12 апреля 2010 в 10:38

      использует Firefox 3.5.8 Firefox 3.5.8 на Windows XP Windows XP

      Разработчики заявляют, что их скрипт работает в следующих браузерах (см. подробнее здесь):
      – Internet Explorer 6+
      – Firefox 1.5+
      – Safari 2+
      – Chrome 1
      – Opera 9+
      Правда на той-же странице предупреждают о Quirks mode.
      Если вы нашли серьёзную багу в работе shadowbox, то можете сообщить об этом разработчику.

      Ответить

  8. Автор: Андрей, 13 мая 2010 в 13:27

    использует Firefox 3.6.3 Firefox 3.6.3 на Windows Vista Windows Vista

    Здравствуйте!!
    спасибо за познавательную статью…
    хотел спросить: как выводить плагин shadowbox для wordpress на страницах wordpress??
    заранее спасибо!

    Ответить

    • Автор: web-junior, 14 мая 2010 в 10:34

      использует Firefox 3.5.8 Firefox 3.5.8 на Windows XP Windows XP

      Добрый день!
      Для интеграции shadowbox в wordpress лучше всего использовать плагины Shadowbox или Shadowbox JS. В зависимости от нужд можно использовать другие подобные плагины.

      Ответить
1 2 3

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

Ваш отзыв

Вы можете использовать следующие теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">

Нажимая на кнопку "Добавить" вы принимаете правила комментирования