Плагин PanoPress – 360 панорама

Недавно наткнулся на интересный wordpress плагин – PanoPress, который позволяет вставить на сайт 360 ° панорамы и виртуальные туры, использующие флэш и HTML5.

Скачать исходники для статьи можно ниже

Демо-примеры:

Галереи 360 панорам и виртуальных туров:

http://gardengnomesoftware.com/pano2vr_example.php

http://flashificator.com/gallery.htm

http://www.ptgui.com/gallery/

http://krpano.com/examples/

Рекомендуемые примеры панорам и туров:

Пример 360 ° панорамы можно посмотреть по следующей ссылке:

http://www.panopress.org/examples/pano2vr-examples/

360 панорамы на ваш сайт

Виртуальный тур (то есть можно переходить по стрелкам внутрь комнаты, здания и т.п.):

http://www.tilmanbremer.de/panorama/schlossbruchsal/

виртуальный тур с panopress

Виртуальный тур по винограднику (рекомендую посмотреть):

http://krpano.com/tours/weingut/

Вот еще тур с картой:

http://www.panopress.org/examples/panotour-pro-examples/

Вставляем панорамы и туры на свой сайт!

Для того, чтобы 360 ° панорамы и виртуальные туры вставились на ваш сайт, необходимо произвести следующие действия:

1. Установить плагин PanoPress.

2. Найти панораму в интернете (ниже напишу источники, которые я нашел).

3. Вставить шоткод с указанием ссылки до панорамы в интернете, можно также скачать панораму к себе на сайт.

Установка плагина PanoPress

Данный плагин есть на сайте wordpress.org:

Последнее обновление: 2012-10-16

Скачиваний: 3513 – скромненько.

Официальный сайт плагина:  http://www.panopress.org

Автор: By Omer Calev & Sam Rohn

Установка стандартная заходим в панель управления сайтом, в левом меню выбираем пункт “Плагины” и его подпункт “Добавить новый”, в строке поиска вводим PanoPress, устанавливаем и активируем.

После чего в левом меню панели управления в пункте “Настройки” (Settings) у нас появится новый подпункт “PanoPress”.

360 панорамы и туры с помощью плагина panopress

Настройки трогать не будем, оставим по умолчанию и так все будет отлично работать! Но если кому охотно полазить, то настроек хватает – нажимите на кнопку “Show advanced options” (см. скриншот выше).

Поиск панорамы в интернете

Панорам в интернете достаточно много.

Нам же нужно добыть ссылку на панораму, которую мы сможем использовать с помощью плагина PanoPress для показа на своем сайте, а вот это уже немного сложнее.

Способ 1.

Ссылку можно взять непосредственно из адресной строки браузера, когда панорама работает, она в основном заканчивается на расширение html, xml или swf (иногда еще mov), например:

http://www.360cities.net/gigapixel/strahov-library.html

http://www.panopress.org/wp-content/panorama/omer/tarbut-rechov/tarbut-rechov.swf

Сайты с галереями панорам, которые можно добыть данным способом:

http://www.360cities.net

http://www.ptgui.com/gallery/

Способ 2.

Также добыть ссылку на панорму можно через расширения браузера Firefox – Firebug (то есть мы ищем ссылку на панораму непосредственно в html коде сайта, думаю это можно делать и в ручную без данного расширения, но с ним намного удобнее и быстрее):

ссылка для панорамы с помощью firebug

То есть активизируете Firebug (цифра 1 на скриншоте выше), выбираете инструмент (цифра 2 на скриншоте), нажимаете мышкой на панораму (панорама должна быть активна, а не показываться ее пред загрузочная статичная картинка) (цифра 3 на скриншоте), далее смотрите ссылку до нее (цифра 4 на скриншоте).

Сайты с галереями панорам, которые можно добыть данным способом – почти все сайты (KRPano, Panotour Pro, Pano2VR,  Flashificator & FPP, PTGui,SaladoPlayer):

http://www.panopress.org/examples/

Способ 3.

Залезть непосредственно в папку, где хранятся панорамы.

Для примера возьмем сайт

http://tilmanbremer.de

На нем все панорамы лежат в папке

http://tilmanbremer.de/panorama/

Забейте вышеуказанный адрес в адресную строку браузера и увидите следующее:

360 панорама для сайта

Далее просто заходите в нужную папочку и у вас начинает показываться панорама, а в адресной строке браузера показана ссылка до нее с расширением html, если данного расширения нет, то просто нужно дописать index.html, как я это узнал?

Просто,  в одной из статей сайта я нашел ссылку на панорму, вот она:

http://www.tilmanbremer.de/panorama/ehrenwert2012/index.html

И все сразу стало понятно,что в каждой из папок по адресу  – http://tilmanbremer.de/panorama/ есть файлик index.html, то есть ссылки до панорам следующие:

www.tilmanbremer.de/panorama/ehrenwert2012/index.html

http://www.tilmanbremer.de/panorama/fluentlysience/flash/index.html

и т.д.

Вставляем панораму себе на сайт с помощью шорткода

Шорткод можно записать следующим образом:

1. Указав только путь до панорамы: [pano file=”http://tilmanbremer.de/panorama/howto/testpano/index.html”]

2. Указав путь до панорамы и ее размеры width – ширина, height – высота.
[pano file=”http://tilmanbremer.de/panorama/howto/testpano/index.html” width=”900″ height=”500″]

или можно так:
[pano f=”http://tilmanbremer.de/panorama/howto/testpano/index.html” w=”900″ h=”500″]

3. Также можно еще указать preview  – путь до файла предпросмотра (возможные форматы изображения предпросмотра JPG, PNG, GIF).
[pano file=”http://tilmanbremer.de/panorama/howto/testpano/index.html” preview=”my-pano/my-pano.jpg” width=”900″ height=”500″]

Примеры шорткодов панорам с разных сайтов: [pano file=”http://tilmanbremer.de/panorama/howto/testpano/index.html” height=”300″ width=”450″] [pano file=”http://www.tilmanbremer.de/panorama/ehrenwert2012/index.html” preview=”http://www.tilmanbremer.de/wp/wp-content/uploads/2012/10/katschhof1.jpg” width=”600″ height=”370″] [pano file=”http://tilmanbremer.de/panorama/ schlossbruchsal/index.html” height=”300″ width=”450″] [pano file=”http://www.360cities.net/gigapixel/strahov-library.html” height=”300″ width=”450″] [pano file=”http://www.panopress.org/wp-content/panorama/omer/tarbut-rechov/tarbut-rechov.swf” preview=”my-preview.jpg”]

Вставляем панораму себе на сайт с помощью кнопки в “Редакторе записей, страничек”.

После установки плагина PanoPress у вас в Редакторе записей, страничек появится новая кнопочка:

кнопка для вставки панорамы в редакторе записей

После нажатия на которую выплывет следующее окошко:

вставка панорамы с помощью кнопки в редакторе странички, записи

В строки File – указываете путь до панорамы, можете также указать ширину (width), высоту (height), изображения предпросмотра (preview).

И нажимаете на кнопку “Insert”.

 

Введите свой email адрес для того, чтобы подписаться на мой блог:


knopkisoc

Плагин PanoPress – 360 панорама: 2 комментария

  1. Елена

    Здравствуйте, Константин! Как поставить на сайт панораму с других сайтов – понятно. А у меня есть своя панорама, созданная с помощью KrPano. Сайт на WordPress.Все файлы вложила в папку panorama, закачала эту папку в папку wp-content. Установила плагин PanoPress. А вот дальше не могу найти путь, чтобы панорама показывалась.
    Пробовала ещё один вариант: папку panorama закачала в корневую папку WP, указала путь “nordicedge.ru/panorama/tour.html” . Открывается черный экран и выдаёт ошибку лицензии (панорама с водяными знаками по логике должна показываться).
    Не подскажете, как установить в данном случае свою панораму.

    1. Константин

      Елена, есть отличный форум про панорамы, там нашел несколько топиков по поводу вашей проблемы, почитайте (все на русском):
      1. “panolab.com/index.php?PHPSESSID=6990c48901a3442e6b90e01684c7af43&topic=966.0”
      2. “panolab.com/index.php?PHPSESSID=6990c48901a3442e6b90e01684c7af43&topic=2200.0”

Добавить комментарий для Елена Отменить ответ