Содержание
Ставим кнопки социальных сетей в 3D тур.
Кнопки социальных сетей.
Сейчас практически на каждом сайте можно увидеть кнопки социальных сетей "поделиться". Это дополнительное средство привлечения целевой аудитории.
Не покидая страницу сайта вы можете поделиться информацией в соц. сетях и 3D тур не является исключением. Я хочу показать вариант
установки кнопок в виртуальный тур.
На просторах интернета можно найти ресурсы, предоставляющие кнопоки соц. сетей. Как правило это конструкторы, с помощью которых формируется блок кнопок
с выбором дизайна, генерится код, который нужно разместить внутри HTML страницы.
Подготовка кнопок.
Для примера буду пользоваться конструктором от "pluso" В нем не сложно разобраться, все изменения сразу отображаются в окне просмотра. Ниже расположено окно, в котором выводится код для вставки на сайт, Он состоит из двух частей - скрипт и блок с кнопками. Копируем весь код в буфер обмена для последующей вставки.
Правим код в файле tour.html.
Виртуальный тур - это блок, заключенный в теге "div" и занимает 100% экрана. Кнопки социальных сетей - это тоже блок "div" и смысл в том, что-бы блок кнопок разместить
на переднем плане, а виртуальный тур на заднем. Для этого воспользуемся кодом позиционирования "z-index".
Откройте файл tour.html и внутрь существующего тега "style" добавьте как прописано в таблице ниже.
<style>
.
.
#pano {
position: absolute;
}
#social {
position: relative;
}
#pano { z-index: 1; }
#social { z-index: 2; }
</style>
|
Этот код присваивает панораме (id="pano") индекс 1, кнопкам соц сетей (id="social") - индекс 2, но id кнопок пропишем позже.
Теперь вставляем раннее скопированный код кнопок внутрь тега "body" в файле tour.html
Блок кнопок заключен в тег "div" , пропишем внутри него id="social" и стиль, в котором укажем расположение на экране, у меня это выглядит так:
style="float:right;margin-top:10px; margin-bottom:3px; margin-right:10px;"
В итоге получаем примерно такой код, как ниже в таблице:
<body>
.
.
.
<script type="text/javascript">(function()
.
.
.
</script>
<div id="social" class="pluso" data-background="transparent" data-options="medium,round,line,horizontal,counter,theme=07"
data-services="vkontakte,facebook,twitter,odnoklassniki"
style="float:right;margin-top:10px; margin-bottom:3px; margin-right:10px;">
</div>
</body>
|
Запускаем тур и смотрим на результат.