Как разместить 3D фото на сайт, пошаговая инструкция

Как говорилось в предыдущей статье «Что такое 3D фото и где его использовать?» – 3D фото с обзором 360 градусов представляет собой серию фотографий объединенных в один обзор, который с помощью специальной программы (проигрывателя) превращается в движущееся изображение.

 

Обычно,  после  выполнения 3D съемки, все полученные файлы передаются своему вебмастеру, который легко разместит 3D фото на сайт. Но, если вы владеете навыками работы в системе управления сайтом, то можете легко сделать это сами.

 

Для размещения фото на 360 градусов на сайт необходимо сделать всего 2 шага:

 

Шаг 1. Загрузка контента на хостинг

 

Если говорить о предметных 3D фото 360º, созданных в нашей студии с использованием автоматизированной системы, то после 3D съемки вы получите архив с папками, например

 

Рис.1.

 

Каждый такая папка имеет внутреннюю структуру из папок и файл с именем «HTML5Viewer.html». Это ключевой файл, который используется для создания ссылки на 3D фото. Имя ключевого файла в других случаях может отличаться, но расширение файла всегда будет «html».

 

Рис.2.

 

Весь набор папок нужно разместить на Вашем хостинге, для этого заходим в свой кабинет на хостинге и через менеджер файлов загружаем архив, после чего извлекаем (распаковываем) содержимое архива.

 

На нашем хостинге это выглядит так.

 

Рис.3.

 

Примечание. В папке Imagas расположены фото с изображением изделий, которые используются для демонстрации 3D фото.

 

 

Шаг 2. Размещение 3D фото 360º на страницу сайта

 

В зависимости от желаемого результата существует два основных способа интеграции 3D фото 360 градусов на сайт:

 

  1. Создание ссылки для демонстрации 3Д фото в новой вкладке
  2. Демонстрация 3Д фото в маленьком окне на странице сайта

 

Второй способ используется в случае, если вы хотите что бы демонстрация  фото 360 градусов запускалась автоматически при переходе на страницу сайта, где расположено это фото.

 

Во всех других случаях используется первый вариант, так как в этом случае интеграция 3Д фото не влияет на скорость работы сайта.

 

Первый способ интеграции 3Д фото имеет несколько вариантов. Рассмотрим эти  варианты создания ссылки для запуска фото 360 градусов в новой вкладке на примере системы управления сайтом в WordPress.

 

Вариант 1. Привязка ссылки к тексту (смотрите пример по ссылке).

 

 

Вариант 2. Привязка ссылки к фотографии (смотрите пример по ссылке, левая колонка).

 

 

Рис.4.

 

 

Рис.5.

 

 

 

Вариант 3. Привязка ссылки к фото в формате Gif (смотрите пример по ссылке, правая колонка).

 

Все то же самое, как в варианте 2, но вместо фотографии используем фото в формате гиф.  В этом случае на странице сайта посетитель увидит вращающееся фото, кликнув на которое произойдет запуск 3Д-фото в новой вкладке. Как создать фото в формате Gif анимации смотрите по ссылке.

 

Второй способ вставки 3D фото 360º более сложный, так как требует написания специального кода. В этом случае на веб-странице, где Вы хотите разместить фото 360º, нужно написать небольшой фрагмент кода:

<iframe src=”http://site.kiev.ua/wp-content/uploads/tour/ Название_товара/ HTML5Viewer.html” scrolling=”no” height=”480” width=”640” style=”border: 1px solid #fff”></iframe>

где,

«/tour// Название товара» – путь к ключевому файлу «HTML5Viewer.html»

«height=»480» width=»640»— рекомендуемый размер окна просмотра

Этот код нужно вставить в раздел ТЕКСТ Кнопка «текст» которая с правой стороны.

 

Рис.6.

 

Мы чуть подправим наш код что бы он стал по центру, добавим название и поставим в нужное место :

<table>

<tbody>

<tr align=»center»>

<td align=»center»><center><span style=»color: #ffffff; font-family: Georgia, ‘Times New Roman’, ‘Bitstream Charter’, Times, serif; font-size: small;»>Название_товара</span></center><span style=»color: #333333; font-family: Georgia, ‘Times New Roman’, ‘Bitstream Charter’, Times, serif; font-size: small;»><span style=»line-height: 19px;»><br /> <iframe src=» http://site.kiev.ua/wp-content/uploads/ Название_товара/ HTML5Viewer.html» scrolling=»no» height=»480″ width=»640″ style=»border: 1px solid #fff»></iframe></span></span></td>

</tr>

</tbody>

</table>

 

Сохраняем документ и смотрим результат на сайте.  Если вы сделали все правильно, то после обновления страницы будет вращаться предметное 3D фото.

 

Рис.7.

 

Теперь вы знаете, как разместить 3D фото 360 градусов на сайте и даже можете это сделать самостоятельно. В принципе вы можете сделать самостоятельно и фото 360 градусов, наша студия для этого готова предоставить в аренду необходимое оборудование, но если у вас потребность в большом количестве 3D фото, то лучше это поручить нашим специалистам.

 

Также полезные статьи:

Оставить заявку

Ваш телефон *

Ваш e-mail *

Ваше ім'я

Ваш телефон *

Ваш e-mail *

Коментар

Social Share Buttons and Icons powered by Ultimatelysocial