novosibpano@yandex.ru  

Ставим кнопки социальных сетей в 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>
	

Запускаем тур и смотрим на результат.


Результат

YouTube