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

...

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

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

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

Скопируйте файлы проигрывателя на сервер

  1. Cохраните 3D фотографию в формате HTMLv4.
  2. Скопируйте файлы проигрывателя на сервер (по (S)FTP или другим способом). Эти файлы нужно скопировать только один раз, в дальнейшем Вам потребуется копировать на сервер лишь папки с фотографиями. Нужно скопировать все файлы кроме файлов самого 3D фото (директории с 3d фото, превью и соответствующей html страницы).

Подключите скрипты проигрывателя в заголовки страниц

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

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

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

Скопируйте данный фрагмент кода:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
 
    <link rel="stylesheet" href="style.css">
    <script src="vue.min.js"></script>
    <script src="photomechanics.js?v3"></script>
    <style>
        .items {
            display: flex;
            max-width: calc(100% - 20px);
        }

        .item > div {
            border: 1px solid #ccc;
        }

        .item {
            margin: 10px;
        }

        img {
            max-width: 100%;
        }
    </style>

Вставьте скопированный код подключения скриптов в заголовок страницы (между тэгами <head> и </head>). Вместо имен скриптов (vue.min.js и photomechanics.js?v3) нужно подставить пути до них. Например, если они в корневой директории сайта, то менять ничего не надо, а если на внешнем сервере - то нужно прописать полный путь до них.

Вставка 3D фото на страницу

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

В другом окне/вкладке текстового редактора откройте HTML файл 3D фотографии, переданной на сервер. Он будет содержать код, аналогичный приведенному:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
 
<div class="items">
    <div class="item">
        <img src="img3d_54.jpg"
             data-photomechanics='({
 helperText: "Click to view 3D photo",
 helperTimeout:1,
 menuBar: false,
 startImmediately: true,
 autoPlay: false,
 speed: 5,
 reverse: false,
 frames: 72,
 yframes: 1,
 zoomLevels: [20,100]})'/>
        <script>
            pm = new Photomechanics({
            });
        </script>
    </div>
</div>

Скопируйте его и вставьте в HTML код вашей страницы. Измените путь к расположению файлов фотографии: например, в нашем случае мы изменяем строку

<img src="img3d_54.jpg"

на

<img src="photo-test/img3d_54.jpg"

Сохраните изменения, затем откройте страницу в браузере и проверьте результат.

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

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

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

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

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

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

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