|
Вставка в HTML (swfkrpano.js) для версии 1.0.8.12
Существуют несколько способов вставить просмотрщик krpano в HTML страницу, но использование скрипта swfkrpano.js является наиболее функциональным методом.
Скрипт делает все автоматически, учитывая особенности различных Интернет-браузеров. Использование этого скрипта является самым легким и простым методом вставки просмоторщика krpano в HTML.
Скрипт основан на SWFObject 1.5 , а также на скрипте "swfkrpanomousewheel.js" от krpano. Оба скрипта могут использоваться отдельно, но без дополнительной функциональности krpano.
Функция скрипта swfkrpano.js:
• Автоматическая проверка, разрешен ли Javascript в браузере ⇒ Если Javascript запреще выдает предупреждение.
• Автоматическая проверка, установлен ли Flash, а также версии устанвленого Flash плеера.
• Автоматическая проверка, является ли устройство iPhone, iPad или iPod Touch. Если да, то происходит загрузка альтернативной версии просмотрщик krpano, которая предназначена для этих устройств.
• Скрипт позволяет использовать колесико мыши для зумирования в системе Mac OS X.
• Скрипт изменяет поведение прокручивания колесика мыши внутри просмотрщика в HTML - происходит зумирование внутри просмотрщик, а сама HTML страница не прокручивается.
• Скрипт изменяет поведение мыши, когда используется Flash плеер с параметром wmode = transparent / opaque (детально - скрипт позволяет использования колесика мыши и фиксирует отпускание мыши за пределами панорамы).
• Скрипт позволяет использование Полноэкранного режима (Fullscreen Mode) в Flash плеере автоматически.
• Легкость и простота использования http://foto-ex.ru.
• Скрипт обеспечивает дополнительные функции помощника (передаваемые параметры).
Используемый синтаксис:
Прежде всего, добавьте строку загрузки скипта в Вашу HTML страницу:
<script src="/swfkrpano.js"></script>
В версии krpano 1.0.8.12 существуют три базовых функции вставки:
1. Функция createPanoViewer:
<script>
var viewer = createPanoViewer({swf:"krpano.swf",target:"panocontent"});
viewer.addVariable("xml", "pano.xml");
viewer.embed();
</script>
2. Функция embedpano:
<script>
embedpano({swf:"krpano.swf",xml:"pano.xml",target:"panocontent"});
</script>
3. Функция createswf (от предыдущих версий):
<script>
var viewer = createswf("krpano.swf");
viewer.addVariable("xml", "pano.xml");
viewer.embed("panocontent");
</script>
http://foto-ex.ru
Обратите внимание: panocontent - это ID объекта HTML, в который будет вставлен просмотрщик krpano:
<div id="panocontent">...alternative content...</div>
Описание функций:
var viewer = createPanoViewer(parametersobject);
viewer.embed();
or:
embedPanoViewer(parametersobject);
or simply:
embedpano(parametersobject);
Функция createPanoViewer создает объект панорамы для вставки. После создания, Вы можете установить дополнительные параметры объекта. Для окончательной вставки объекта используется функция embed .
Функции embedPanoViewer and embedpano являются идентичными. Обе эти функции и создают и вставляют просмотрщик в HTML.
Параметр parametersobject - это объект Javascript, который имеет следующие атрибуты:
• swf (optional)
Имя и путь к файлу swf (относительно файла html). По умолчанию "krpano.swf".
• xml (optional)
Имя и путь к файлу xml (относительно файла html). По умолчанию совпадает с именем файла swf (="krpano.xml" если файл swf не указан).
• target
ID объекта HTML, в который должен быть встроен просмотрщик. Может быть переустановлен в функции embed().
• id (optional)
ID объекта просмотрщика в HTML DOM.
По умолчанию ID = "krpanoSWFObject".
• width (optional)
Ширина объекта просмотрщика. Может быть указана в точках или в процентах.
Значение по умолчанию - "100%".
• height (optional)
Высота объекта просмотрщика. Может быть указана в точках или в процентах.
Значение по умолчанию - "100%".
var viewer = createswf(swffile, id, width, height, bgcolor);
or:
var viewer = createkrpanoSWFviewer(swffile, id, width, height, bgcolor);
or: (for the krpanoJS HTML5/iPhone/iPad viewer only)
var viewer = createkrpanoJSviewer(id, width, height);
Функции createswf и createkrpanoSWFviewer являются одинаковыми (отличие только в название). Эти функции создают объект для встраивания. Функции автоматически используют скрипт krpanoJS, если необходимо (для iPhone/iPad). В отличие от этих двух функция, функция createkrpanoJSviewer всегда использует скрипт krpanoJS.
Параметры:
• swffile
Имя и путь к файлу swf (относительно к файлу html).
• id (optional)
ID объекта Flash в HTML DOM.
Значение по умолчанию ID - "krpanoSWFObject".
• width (optional)
Ширина объекта Flash. Может принимать абсолютное значение в точках или относительное в процентах.
По умолчанию = "100%".
• height (optional)
Высота объекта Flash. Может принимать абсолютное значение в точках или относительное в процентах..
По умолчанию = "100%".
• bgcolor (optional)
Цвет фона в объекте Flash.
По умолчанию = "#000000" (=Черный).
viewer.addVariable(variable, value);
• устанавливает переменные krpano
• устанавливает параметры запуска krpano (например переменные "xml" или "path"...)
• ... устанавливает любые другие переменные.
Переменные, установленные этой функцией, будут установлены после загрузки xml файла. Эти переменные будут перекрывать значения, указанные в файле xml.
viewer.addParam(parameter, value);
• устанавливает параметры Flash плеера
• Параметры, которые есть смысл устанавливать, - это allowFullscreen, allowScriptAccess и wmode. allowFullscreen автоматически устанавливается в значение true скриптом swfkrpano.js.
viewer.passQueryParameters();
• Автоматически передаетвсе параметры запроса из html в swf файл.
viewer.useHTML5(setting);
• Определяет когда нужно использовать просмотрщик krpanoJS HTML5. http://foto-ex.ru
• Используется только совместно с функцией createPanoViewer!
• Установки:
o "auto" (по умолчанию)
использовать HTML5 автоматически (в данный момент только для iPhone/iPod/iPad)
o "always"
использовать HTML5 всегда (будут возникать ошибки, HTML5 не поддерживается!)
o "whenpossible"
использовать HTML5 всегда когда возможно (в данные момент только для Desktop Safari 5 и для iPhone/iPod/iPad)
viewer.isHTML5possible();
Проверяет поддерживает ли интернет-браузер HTML5 3D CSS.
В данный момент только Safari 5 и Chrome 9 поддерживают HTML5 3D CSS.
var ret = viewer.isDevice(devices);
• Проверяет является ли используемое устройство одним из списка.
• Используется только совместно с функцией createPanoViewer!
• Устройства:
o "iPhone"
o "iPod"
o "iPad"
o "Android"
Несколько устройств могут быть проверены за раз, используя символ '|'. Например,
if( viewer.isDevice("iPhone|iPod|Android") )
viewer.embed(id);
• Окончательно встраивает объект krpano Flash в данный html объект (по id).
Examples:
1. Наиболее простое использование:
<script> embedpano({target:"panocontent"}); </script>
В этом примере будут использованы значения по умолчанию: "krpano.swf" как имя файла krpano Flash просмотрщика, "krpano.xml" как имя файла для файла xml, "krpanoSWFObject" как ID объекта Flash, 100% для ширины и высоты. Необходимо передать только один параметр target - ID объекта html, в который будет вставлен просмотрщик.
2. Простое использование, но с большим количеством настроек:
<script>
embedpano({swf:"pano.swf",xml:"pano.xml",target:"panodiv",id:"pano1"});
</script>
В этом примере указываются файлы swf и xml, а также id объекта html, в который будет вставлен просмотрщик.
3. Наиболее простое использование функции createPanoViewer:
<script>
var viewer = createPanoViewer();
viewer.embed("panodiv");
</script>
4. Использование функции createPanoViewer:
<script>
var viewer = createPanoViewer({swf:"krpano.swf",target:"panodiv"});
viewer.useHTML5("whenpossible");
if( viewer.isDevice("iPhone|iPod|Android") )
viewer.addVariable("xml", "krpano_mobile.xml");
else
viewer.addVariable("xml", "krpano.xml");
viewer.embed();
</script>
5. Использование только просмотрщика HTML5 krpanoJS:
<script>
var viewer = createPanoViewer();
if ( viewer.isHTML5possible() )
{
viewer.useHTML5("always");
viewer.addVariable("xml", "pano.xml");
viewer.embed("panodiv");
}
else
{
// show error message:
// browser is not HTML5/CSS 3D transforms capable.
}
</script>
6. Наиболее простое использование функции createswf:
<script>
var swf = createswf("krpano.swf");
swf.embed("krpanoDIV");
</script>
Если файл xml не указан, будет загружен .xml файл с таким же именем как файла .swf.
Например, если имя файла swf - krpano.swf, будет загружен файл krpano.xml.
7. Использование функции createswf с указанным xml файлом:
<script>
var swf = createswf("krpano.swf");
swf.addVariable("xml", "pano.xml");
swf.embed("krpanoDIV");
</script>
В этом примере будет использован файл pano.xml.
8. Использование createswf: установка ID, ширины, высоты
<script>
var swf = createswf("krpano.swf","krpanoSWFObject","640","480");
swf.addVariable("xml", "pano.xml");
swf.embed("krpanoDIV");
</script>
В дополнение к предыдущему примеру, здесь также устанавливается размер (640x480) объекта Flash.
Перевод с сайта krpano.com
|
