Как говорилось в предыдущей статье «Что такое 3D фото и где его использовать?» – 3D фото с обзором 360 градусов представляет собой серию фотографий объединенных в один обзор, который с помощью специальной программы (проигрывателя) превращается в движущееся изображение.
Обычно, после выполнения 3D съемки, все полученные файлы передаются своему вебмастеру, который легко разместит 3D фото на сайт. Но, если вы владеете навыками работы в системе управления сайтом, то можете легко сделать это сами.
Для размещения фото на 360 градусов на сайт необходимо сделать всего 2 шага:
Если говорить о предметных 3D фото 360º, созданных в нашей студии с использованием автоматизированной системы, то после 3D съемки вы получите архив с папками, например
Рис.1.
Каждый такая папка имеет внутреннюю структуру из папок и файл с именем «HTML5Viewer.html». Это ключевой файл, который используется для создания ссылки на 3D фото. Имя ключевого файла в других случаях может отличаться, но расширение файла всегда будет «html».
Рис.2.
Весь набор папок нужно разместить на Вашем хостинге, для этого заходим в свой кабинет на хостинге и через менеджер файлов загружаем архив, после чего извлекаем (распаковываем) содержимое архива.
На нашем хостинге это выглядит так.
Рис.3.
Примечание. В папке Imagas расположены фото с изображением изделий, которые используются для демонстрации 3D фото.
В зависимости от желаемого результата существует два основных способа интеграции 3D фото 360 градусов на сайт:
Второй способ используется в случае, если вы хотите что бы демонстрация фото 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 фото, то лучше это поручить нашим специалистам.
