PhotoMechanics - Оборудование для 3D фото - Добавление 3D фото на веб-сайт. Размещение проигрывателя на страницах сайта

Добавление 3D фото на веб-сайт. Размещение проигрывателя на страницах сайта

Для данного способа интеграции могут потребоваться базовые знания о структуре HTML-страниц и скриптах JavaScript. Также необходимо иметь достаточное представление о структуре сайта и возможностях его настройки.

Установка JavaScript-проигрывателя на сайт, имеющий возможность редактирования шаблонов страниц

Как правило, сайты, основанные на каких-либо CMS, позволяют редактировать шаблоны страниц. Мы рассмотрим это на примере сайта компании Фотомеханика (www.photomechanics.ru), сделанном на Joomla. Для других CMS эта процедура выполняется аналогично.

  1. Cохраните 3D фотографию в формате HTML+JavaScript.
  2. Скопируйте каталог photo3d-HTML-files на сервер по FTP. Вам необходимо будет скопировать этот каталог всего один раз. Он содержит файлы JavaScript-проигрывателя. В дальнейшем Вам потребуется копировать на сервер лишь папки с фотографиями.
  3. Откройте HTML-страницу, созданную при сохранении фотографии и скопируйте код подключения скриптов и CSS файлов

 

Рис. 9. Копирование кода подключения скриптов и CSS-файлов

  1. Зайдите на сайте в раздел редактирования шаблона страниц.

Например, для сайтов на Joomla необходимо зайти в пункт меню Extensions->Template Manager, затем в графе Template нажать на имя нужного шаблона, затем нажать Edit main page template.

Для сайтов, построенных на основе других CMS, редактирование шаблонов осуществляется по-другому. За дополнительной информацией обращайтесь в документацию к Вашей CMS, либо к разработчикам Вашего сайта.

 

Рис. 10. Добавление JavaScript и CSS-файлов в шаблон страниц сайта.

 

Рис. 11. Копирование файлов предпросмотра и каталога с 3D-изображением на сервер

  1. Вставьте скопированный код подключения скриптов (рис. 10) в заголовок страницы (между тэгами <head> и </head>). При этом Вам необходимо прописать путь к нужным файлам от корневой директории сайта. Например, если Вы копировали каталог photo3d-HTML-files в корневую директорию, то необходимо добавить символ ‘/’ в начало каждого пути к файлу.

Если Вы закачали папку photo3d-HTML-files не в корневую директорию сайта, то Вам необходимо прописать соответствующий путь в файле phm.js.

  1. Сохраните шаблон и откройте любую страницу сайта, использующую данный шаблон. Нажмите правой клавишей мыши на пустое место. В появившемся всплывающем меню нажмите “Просмотр HTML-кода страницы” (точное название пункта меню зависит от версии браузера). Если в HTML-коде страницы в заголовке появились нужные файлы, значит все сделано правильно.
  2. Создайте на сервере каталог, в котором Вы будете хранить ваши 3D фотографии.
  3. Скопируйте в этот каталог файлы предпросмотра, а также каталог с 3D фотографией  (рис. 11).
  4. Из HTML-файла, сохраненного программой на компьютере, скопируйте код 3D фотографии (рис. 12). Он должен выглядеть приблизительно так:

<img id='image' class="photo3d-preview-image {maxZoom:250, frames:36}" src='img3d_000087.jpg' border='0' width='450' height='300' />

 

Рис. 12. Копирование HTML-кода 3D фотографии.

  1. Добавьте этот код на выбранную страницу в том месте, где необходимо поместить 3D фотографию. Как правило, это делается при помощи встроенного HTML-редактора в панели редактирования содержимого сайта (см. рис. 8 и раздел «Интеграция через FTP+iframe»).

Поменяйте путь в параметре src. Он должен указывать на файл предпросмотра, который Вы закачали на сервер вместе с папкой, содержащей файлы 3D фото.

Иногда HTML-редакторы не пропускают или искажают изменения, сделанные в HTML-коде. Как правило это можно обойти соответствующими настройками сайта и самого редактора (разрешение необходимых тэгов, отключение пост-обработки и пред-обработки HTML-кода редактором).

Если Вы не можете самостоятельно настроить редактор, то обратитесь к документации Вашей CMS. Возможно, Вам потребуется помощь программиста.

  1. Сохраните изменения, затем откройте страницу в браузере и проверьте результат. Если 3D фотография не отображается, либо отображается некорректно, то смотрите раздел «Решение проблем при интеграции 3D фото с интернет-сайтом».

Установка JavaScript-проигрывателя на сайт, НЕ имеющий возможность редактирования шаблонов страниц, а также на статический HTML-сайт.

Сведения, представленные в данном разделе, во многом опираются на данные предыдущего параграфа. Поэтому, если Вы не ознакомились с предыдущим параграфом, мы рекомендуем Вам сделать это.

В случае, если Ваш сайт не поддерживает возможность редактирования шаблонов страниц, но при этом он не является статическим HTML-сайтом, то Вам необходимо найти место в коде, в котором формируется заголовок страниц. Как правило это единое место для всех страниц сайта. Необходимо добавить в заголовок тэги подключения JavaScript и CSS-файлов проигрывателя (см. предыдущий раздел).

Для проверки результата откройте в браузере страницу сайта и просмотрите ее HTML-код. В заголовке страницы должны появиться ссылки на соответствующие файлы.

Если у Вас статический HTML-сайт, то Вам потребуется добавлять скрипты в заголовок каждой страницы, содержащий 3D фотографию.

В нужном месте HTML-кода страницы через встроенный редактор сайта либо через обычный текстовый редактор (для статических сайтов) вставьте HTML-код 3D фотографии (см. предыдущий раздел).

Для просмотра результата откройте страницу сайта в браузере. Если 3D фотография отображается некорректно, то перейдите в раздел «Решение проблем при интеграции 3D фото с интернет-сайтом.

 

Рис. 13. Закачка 3D фотографии на сайт из программы Photo3D Studio

 Установка flash-проигрывателя (формат HTML+SWF).

Flash-проигрыватель устанавливается аналогично javasctipt-проигрывателю. Отличие заключается лишь в подключаемых файлах и HTML-коде 3D фотографии. Иногда по умолчанию использование flash-проигрывателя на сайте запрещено настройками. В этом случае обращайтесь к документации для вашей CMS либо к разработчикам сайта.

В некоторых случаях представляется возможным подключить flash-проигрыватель как медиа-контент через встроенный HTML-редактор на сайте. Подробную информацию также смотрите в вашей CMS.

3D фотосъемка | 3D фотография | 3D фото | Трехмерная фотография | предметная фотосъемка | аксессуары для 3D | поворотный стол | стол для 3d съемки | поворотный стол для 3D-фото | фото 360 градусов | фото 360 | предметная фотосъемка для интернет магазина | примеры трехмерных фото

 
  Google+