PhotoMechanics - Оборудование для 3D фото - Добавление 3D фото на веб-сайт. Часть 3. Интеграция через FTP + iFrame

Добавление 3D фото на веб-сайт. Часть 3. Интеграция через FTP + iFrame

Для сайтов, имеющих панель администрирования и редактирования контента.

Как правило, это сайты, созданные на основе различных CMS (Joomla, 1C-bitrix, Drupal, Wordpress, NetCat и др.)

  1. Создайте на сервере отдельный каталог для хранения 3D фотографий.
  2. Сохраните фотографию в формате HTML+JavaScript или HTML+SWF на диск вашего компьютера.
  3. Скопируйте содержимое папки с сохраненной 3D фотографией на сервер (рис. 4). Для копирования в большинстве случаев Вам понадобится FTP-доступ к сайту, а также любая программа – FTP-клиент (например, FileZilla).

    Загрузка 3D фотографии на сайт по FTP

    Рис.4. Копирование 3D фотографии на сервер по FTP.

    При сохранении нескольких 3D фотографий их все можно складывать в одну папку на сервере. Файлы и каталоги с одинаковыми именами (как, например, каталог photo3d-HTML-files), идентичны для различных 3D фотографий и могут быть без проблем перезаписаны при копировании.
  4. Откройте фотографию, скопированную на сервер, в браузере (рис. 5). В нашем случае (рис. 4,5) папка “photomechanics.ru/public_HTML” соответствует корневой директории сайта http://photomechanics.ru.
    Соответственно, файл
    /photomechanics.ru/public_HTML/public/ test_photo/img3d_000052.HTML
    соответствует адресу
    http://photomechanics.ru/public/ test_photo/img3d_000052.HTML
  5. Перейдите в режим редактирования той страницы, на которую Вы хотите добавить 3D фотографию (рис. 6).

    Добавить 3D фото CMS Joomla

    Рис. 6. Редактирование статьи на сайте – клавиша добавления медиа-контента.

  6. Как правило, панель редактирования контента страницы содержит встроенный HTML-редактор, в котором Вы можете редактировать текст страницы, а также при необходимости увидеть HTML-код.
    Примеры для данной инструкции были подготовлены в CMS Joomla. Эта CMS имеет встроенный редактор Tiny MCE, который является одним из самых популярных встраиваемых HTML-редакторов и на сегодняшний день поставляется в составе большинства CMS.
    Итак, в HTML-редакторе Вы находите клавишу вставки медиа-контента. Далее выбираете тип медиа-контента iframe и указываете адрес страницы (без http и домена сайта). В нашем случае этот адрес
    public/test_photo/img3d_000052.HTML”. Размер iframe ставьте немного больше оригинальной фотографии, чтобы избежать появления полос прокрутки. В примере использован 3D-ролик шириной 535px и iframe шириной 550px.

     редактирование 3D фото в айфрейм

    Рис.7. Добавление iframe через встроенный HTML-редактор панели администрирования.

  7. В некоторых случаях необходимо вначале разрешить добавление iframe на страницу в настройках сайта и разрешить использование тэга <iframe> в настройках сайта или HTML-редактора.
  8. Завершите добавление медиа-контента. После этого откройте редактор HTML-кода (рис. 8) и добавьте к коду Вашего iframe следующие параметры: style=”border: 0px;” для того, чтобы убрать рамку вокруг iframe.

     

     редактирование html iFrame с 3D фото

    Рис.8. Редактирование HTML-кода страницы с iframe.

  9. Сохраните HTML-страницу
  10. Откройте страницу сайта с 3D фотографией и убедитесь, что все работает правильно.

Для статических HTML-сайтов

  1. Выпроните шаги 1-4, описанные для сайтов, созданных на основе CMS (см. выше).
  2. Откройте нужную HTML-страницу и добавьте на нее код

    <iframe style="border: 0px currentColor;" src="/public/test_photo/img3d_000052.HTML" width="550" height="440"></iframe>

    где width и height – ширина и высота iFrame. Размер iFrame должен быть немного больше, чем ширина и высота вашей 3D фотографии (чтобы избежать появления полос прокрутки). Scr- это пусть к HTML-файлу с 3D фотографией.

  3. Проверьте результат, открыв страницу сайта со встроенной 3D фотографией в браузере (рис. 8)

просмотр 3D фото на сайте

Рис.9. Просмотр 3D фотографии, добавленной через iFrame, на сайте

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

 
  Google+