Просмотр изображений 360 градусов на jQuery

Простой интерактивный ресурс, который можно использовать для виртуального просмотра вашего продукта.

 

ДЕМО

ИСХОДНИКИ

 

В дизайне электронной коммерции одной из основных целей является заполнение разрыва между продуктом и пользователем. Это особенно актуально для дорогостоящих товаров. Следовательно, важно интегрировать интерактивные инструменты, чтобы предоставить пользователю возможность «практически испытать» продукт.

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

 

Создание структуры

Структура HTML состоит из двух основных элементов: view.product-viewer для спрайта изображений и изображения предварительного просмотра продукта и обработчика div.cd-product-viewer для ручка просмотра.

<div class="cd-product-viewer-wrapper" data-frame="16" data-friction="0.33">
 <div>
 <figure class="product-viewer">
 <img src="img/product-loading.jpg" alt="Product Preview">
 <div class="product-sprite" data-image="img/product.png"></div>
 </figure> <!-- .product-viewer -->
 
 <div class="cd-product-viewer-handle">
 <span class="fill"></span>
 <span class="handle">Handle</span>
 </div>
 </div> <!-- .cd-product-viewer-handle -->
</div> <!-- .cd-product-viewer-wrapper -->

Атрибут data-frame для div.cd-product-viewer-wrapper указывает количество кадров, из которых состоит нескольких изображения, тогда как тип данных определяет их при перетаскивании изображения (оно должно быть больше нуля) ,

 

Добавление стиля

Элемент <img> отображается только в начале, в то время как изображения по-прежнему загружается и используется, чтобы дать правильные размеры элементу figure.product-viewer.
Что касается div.product-sprite, он имеет абсолютное положение, высоту 100% и ширину 1600% (наш div.product-sprite состоит из 16 кадров) и по умолчанию скрыт. Затем загруженный класс используется для отображения справки div.product после загрузки спрайта изображения:

.cd-product-viewer-wrapper .product-viewer {
  position: relative;
  overflow: hidden;
}
.cd-product-viewer-wrapper img {
  /* this is the image visible before the image sprite is loaded */
  display: block;
  position: relative;
  z-index: 1;
}
.cd-product-viewer-wrapper .product-sprite {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  height: 100%;
  /* our image sprite is composed of 16 frames */
  width: 1600%;
  background: url(../img/product.png) no-repeat center center;
  background-size: 100%;
  opacity: 0;
  transition: opacity 0.3s;
}
.cd-product-viewer-wrapper.loaded .product-sprite {
  /* image sprite has been loaded */
  opacity: 1;
}

Когда пользователь перетаскивает span.handle или изображение продукта, мы меняем значение div.product-sprite translateX, чтобы показать другой кадр изображения (используя JavaScript).

Эффект загрузки рукоятки достигается путем изменения значения scaleX элемента span.fill (с использованием JavaScript); После того, как изображение спрайта было загружено, span.fill скрыт и отображается span.handle:

.cd-product-viewer-handle {
  position: relative;
  z-index: 2;
  width: 60%;
  max-width: 300px;
  height: 4px;
  background: #4d4d4d;
}
.cd-product-viewer-handle .fill {
  /* this is used to create the loading fill effect */
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: #b54240;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s;
}
.loaded .cd-product-viewer-handle .fill {
  /* image sprite has been loaded */
  opacity: 0;
}
.cd-product-viewer-handle .handle {
  position: absolute;
  z-index: 2;
  display: inline-block;
  height: 44px;
  width: 44px;
  left: 0;
  top: -20px;
  background: #b54240 url(../img/cd-arrows.svg) no-repeat center center;
  border-radius: 50%;
  transform: translateX(-50%) scale(0);
}
.loaded .cd-product-viewer-handle .handle {
  /* image sprite has been loaded */
  transform: translateX(-50%) scale(1);
  animation: cd-bounce 0.3s 0.3s;
  animation-fill-mode: both;
}
@keyframes cd-bounce {
  0% {
    transform: translateX(-50%) scale(0);
  }
  60% {
    transform: translateX(-50%) scale(1.1);
  }
  100% {
    transform: translateX(-50%) scale(1);
  }
}

 

Обработка событий

Чтобы реализовать средство просмотра продукта, мы создали объект productViewer и использовали метод loadFrames, чтобы проверить, загружен ли блок изображения:

var productViewer = function(element) {
	this.element = element;
	this.handleContainer = this.element.find('.cd-product-viewer-handle');
	this.handleFill = this.handleContainer.children('.fill');
	//...
	this.frames = this.element.data('frame');
	//increase this value to increase the friction while dragging on the image - it has to be bigger than zero
	this.friction = this.element.data('friction');
	this.visibleFrame = 0;
	this.loaded = false;
	//...
	this.loadFrames();
} 
 
productViewer.prototype.loadFrames = function() {
	var self = this,
		imageUrl = this.slideShow.data('image');
	//you need this to check if the image sprite has been loaded
	$('').attr('src', imageUrl).load(function() {
		self.loaded = true;
	});
 
	this.loading('0.5'); //triggers loading animation
}
 
var productToursWrapper = $('.cd-product-viewer-wrapper');
productToursWrapper.each(function(){
	new productViewer($(this));
});

После загрузки комплекта изображений мы присоединяем обработчик событий для событий mousedown / mousemove / mouseup к соответствующим элементам:

if( self.loaded ){
	//sprite image has been loaded
	self.element.addClass('loaded');
	self.dragImage();
	self.dragHandle();
	//..
} else {
	//...
}

Чтобы этот эффект работал на сенсорных устройствах, мы использовали события vmousedown / vmousemove / vmouseup, предоставляемые jQuery mobile framework.

 

Вот и всё!

---