Плагин 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, указала путь http://nordicedge.ru/panorama/tour.html . Открывается черный экран и выдаёт ошибку лицензии (панорама с водяными знаками по логике должна показываться).
    Не подскажете, как установить в данном случае свою панораму.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *