Home > Photo, Software, Stereo > Стерео слайдшоу на HTML5

Стерео слайдшоу на HTML5

This post is also available in: Русский

Какое-то время я для показа стереопар тут в блоге использовал Flash based Stereo Viewer. Однако у него был ряд ограничений, самые неприятные из которых: он считает, что исходные картинки Параллельные стереопары и он не работает в iOS. Было решено сделать просмотрщик стерео картинок для веб страничек без этих ограничений.

Получился: HTML5 Stereo Viewer, его официальная страничка. Рабочий пример смотрите ниже.

Пара скриншотов:

HTML5 Stereo Viewer screenshot HTML5 Stereo Viewer screenshot

(Текущий код (2011.06.29) не работает в Internet Explorer и Opera Mini, и их поддержка пока сомнительна)

А так это выглядит на iPhone:

HTML5 Stereo Viewer screenshot HTML5 Stereo Viewer screenshot HTML5 Stereo Viewer screenshot HTML5 Stereo Viewer screenshot HTML5 Stereo Viewer screenshot

А так на iPad:

HTML5 Stereo Viewer screenshot HTML5 Stereo Viewer screenshot

Исходником является всего один Javascript файл. Его последнюю версию и тестовую страничку с тестовыми картинками можно загрузить отсюда:

https://github.com/urix/HTML5-Stereo-Viewer
git@github.com:urix/HTML5-Stereo-Viewer.git

Опишу тут вкратце, как оно работает. Всё что нужно, это поместить подобный код на вашу страничку:

<script type="application/x-javascript" src="stereoh5.js"> </script>
<input type="button"
   value="Run Stereo Viewer"
   onclick="stereoViewerOpen(5, false, 1, true, 'alt', 'stereoRL');" />

<img src="s-a.jpg" class="anaglyph" alt="anaglyph source, Toys" />
<img src="s-f.jpg" class="flat" alt="flat source, Toys" />
<img src="s-lr.jpg" class="stereoLR" alt="Left-Right stereo pair source, Toys" />
<img src="s-rl.jpg" class="stereoRL" alt="Right-Left stereo pair source, Toys" />
<img src="s-rl5.jpg" class="stereo" alt="Right-Left stereo pair source source, Moscow, Russia" />
<img src="s-f2.jpg" class="some_other_class" alt="image not for slideshow" />
<img src="s-f3.jpg" alt="image not for slideshow" />

Тут есть некоторые обязательные требования: Картинки должны находится на том-же сайте, что и страничка, на которой они показываются. За это ограничение лучи поноса посылаются разработчикам спецификации HTML5.

Картинки для слайдшоу берутся скриптом прямо с текущей вэб странички. Чтобы выделить картинки, которые должны быть в слайдшоу, им нужно назначить определённый class, его значение зависит от типа картинки:

anaglyph – готовый анаглиф, будет демонстрироваться без изменений
flat – плоская картинка с одним ракурсом, будет демонстрироваться без изменений
stereoLR – картинка содержит стерео пару, то есть два вида – для левого и правого глаз. Левая часть для левого глаза
stereoRL – картинка содержит стерео пару, то есть два вида – для левого и правого глаз. Левая часть для правого глаза
stereo – тип картинки определяется последним параметром в функции stereoViewerOpen

Параметры функции stereoViewerOpen позволяют задать начальное состояние слайдшоу:
Mode – начальные режим [стерео] (0..8). По умолчанию: 5. Юзер может изменить этот параметр нажав соответствующую цифру на клавиатуре или в Настройках
Swap – поменять левую и правую картинки местами (true, false). Рекомендуемое значение: false. Попробуйте не использовать этот параметр, так как он может ввести пользователя в заблуждение – устанавливайте корректные значения для class. Юзер может изменить этот параметр в Настройках
BGColor – цвет фона (0,1,2) Чёрный, Серый или Белый соответственно. Юзер может изменить этот параметр в Настройках
Caption – показывать подписи (true, false). Юзер может изменить этот параметр в Настройках
CaptionSrc – источник для подписи картинок (“alt”, “title”). Юзер не может изменить этот параметр. Выберите заранее “alt” или “title” в тэге img и поместите туда описания для каждой картинки
Type – тип тех картинок, для которых class=”stereo” (“anaglyph”, “flat”, “stereoLR”, “stereoRL”, “”). Пустая строка означает “stereoRL”


Рабочий пример: Нажмите кнопку ниже, чтобы запустить слайдшоу:

Навигация достаточно простая: Стрелочками на клавиатуре или кликать мышкой в правой или левой частях странички. Чтобы вызвать панельку с Настройками нужно кликнуть посередине. Нажмите Esc, чтобы закрыть слайдшоу.

Картинки для этой демонстрации:

anaglyph source, Toys flat source, Toys Left-Right stereo pair source, Toys Right-Left stereo pair source, Toys Right-Left stereo pair source source, St. Basil's Cathedral, Moscow, Russia Right-Left stereo pair source source, St. Basil's Cathedral, Moscow, Russia Right-Left stereo pair source source, Yauza river, Moscow, Russia Right-Left stereo pair source source, Moscow, Russia Right-Left stereo pair source source, forrest at Arkhangelsk region, Russia Right-Left stereo pair source source, at concert image not for slideshow image not for slideshow

В текущей версии могут наблюдаться незначительные глюки в Mobile Safari, если вы такой заметили – перезапустите слайдшоу предварительно максимально уменьшив страничку, то есть, чтобы не было горизонтального скрола.

Зафоловьте @html5stereo в твиттере для отслеживания новых версий.

SSL