Недавно наткнулся на интересный 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/

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

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

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

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”.

Настройки трогать не будем, оставим по умолчанию и так все будет отлично работать! Но если кому охотно полазить, то настроек хватает – нажимите на кнопку “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 (цифра 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/

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

Далее просто заходите в нужную папочку и у вас начинает показываться панорама, а в адресной строке браузера показана ссылка до нее с расширением 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”.