Technical   Поиск   Войти  
АнглийскийРусскийУкраинский
KRPANO: Вставка в HTML

KRPANO: Вставка в HTML



Внимание! Сайт Страна360 не владеет какими-либо правами на просмотрщик krpano. Эта страница является только переведенной копией. Оригинальный источник - сайт http://www.krpano.com. На этом сайте Вы можете получить более детальную, полную, свежую информацию о просмотрщике krpano. О всех вопросах, связанных с обновлениями, покупкой, техническими консультациями, смотрите сайт http://www.krpano.com.

Вставка в HTML (swfkrpano.js) для версии 1.0.8.12

Существуют несколько способов вставить просмотрщик krpano в HTML страницу, но использование скрипта swfkrpano.js является наиболее функциональным методом.
... о других методах вставки в HTML Вы можете прочитать здесь

Скрипт делает все автоматически, учитывая особенности различных Интернет-браузеров. Использование этого скрипта является самым легким и простым методом вставки просмотрщика 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 плеере автоматически.
  • Легкость и простота использования.
  • Скрипт обеспечивает дополнительные функции помощника (передаваемые параметры).

... взгляните здесь на Тест использования колесика мыши

Используемый синтаксис:

Прежде всего, добавьте строку загрузки скипта в Вашу 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>


Обратите внимание: 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.
  • Используется только совместно с функцией createPanoViewer!
  • Установки:
    • "auto" (по умолчанию)
      использовать HTML5 автоматически (в данный момент только для iPhone/iPod/iPad)
    • "always"
      использовать HTML5 всегда (будут возникать ошибки, HTML5 не поддерживается!)
    • "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!
  • Устройства:
    • "iPhone"
    • "iPod"
    • "iPad"
    • "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.

Invalid database type GeoIP City Edition, Rev 1, expected GeoIP Country Edition