Skip to content

ferrybrouwer/360-product-viewer

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Product Viewer

A simple 360 degrees product viewer

preview

Usage

Html:

<!-- product viewer container -->
<div id="pv"></div>

<!-- load product viewer lib -->
<script src="product-viewer.js"></script>

<!-- create instance -->
<script>
	const pv = new ProductViewer({
		element: 		document.getElementById('pv'),
		imagePath: 		'images',
		filePrefix: 	'img',
		fileExtension: '.jpg',
		numberOfImages: 36
	})
</script>

Build

To build the distributed files execute the following command:

yarn && yarn run build

This create a dist directory.

Development

For development you can execute the following command:

yarn && yarn run watch

This will spinup a dev server on 0.0.0.0:8080.

Properties

Property name Datatype Property description
element HTMLElement The container to draw the product viewer
imagePath String The relative path of the images
filePrefix String The prefix of the file name, for example img
fileExtension String The extension of the file including the dot, for example .jpg
numberOfImages Number The number of images inside imagePath
invertMovement Bool Invert the movement while grabbing (default is false)

Loading images

The library tries to load images from imagePath. The images to load are of the following format ${imagePath}${filePrefix}${index}${fileExtension}, where ${index} is the index + 1 number leftpadded with 1 '0'

Example

const pv = new ProductViewer({
	...
	imagePath: 		'images',
	filePrefix: 	'img',
	fileExtension: '.jpg',
	numberOfImages: 4
})

Then the library tries to load to following files:

  • images/img01.jpg
  • images/img02.jpg
  • images/img03.jpg
  • images/img04.jpg

Events

Loaded event

The event loaded is dispatched when all images are loaded. This comes in handy for displaying loaders, for example:

<div class="pv-loader"></div>
<div id="pv"></div>

<style>
	.pv-loader {
		background: url('some-loader.gif') no-repeat center center white;
		opacity: 0;
		transition: opacity .4s ease-out;
		pointer-events: none;
	}
	.pv-loader--js-visible {
		opacity: 1;
	}
</style>

<script>
	// create instance
	const pv = new ProductViewer({
		....
	})

	// show loader
	const loader = document.querySelector('.pv-loader')
	loader.classList.add('pv-loader--js-visible')

	// hide loader when images are loaded
	pv.once('loaded', () => loader.classList.remove('pv-loader--js-visible')
</script>

Release event

The event release is dispatched when user stops dragging the product. For example to show information when user stops dragging the product when products show the front:

pv.on('release', ({index, image}) => {
	if (index > 10 && index < 20) {
		// show some tooltip...
	}
})
Property name Property type Property description
index Number Current image index
image String Current image relative path

Press event

The event press is dispatched when user starts dragging the product. For example to stop some other cpu intensive animation on the site:

pv.on('press', () => {
	// pause some high cpu intensive operations...
})

Index event

When the index changes the event index is being dispatched. This can be useful when you want to take action on index updates while dragging, for example show tooltip while dragging:

pv.on('index', ({index, image}) => {
	// show some tooltip...
})
Property name Property type Property description
index Number Current image index
image String Current image relative path

Delta event

To get the offset on the x axis while dragging, you can listen to this event by using the delta event. For example when you want to take action when user rotate the product for 180 degrees in one drag action:

pv.on('delta', ({x, numberOfImages, offsetIndex}) => {
	if (offsetIndex > numberOfImages / 2) {
		// do some action...
	}
})

The callback returns an object which include the following properties:

Property name Property type Property description
x Number The delta on x position = the difference between x position when user pressed and moved
numberOfImages Number The total number of images
offsetIndex Number The number of indexes shift from when user pressed

Methods

animate 360 degrees

To give it a spin of 360 degrees, you can invoke the method animate360, for example:

pv.animate360(2000)

You can set the duration of the animation with the first parameter. This should be in milliseconds. Default the duration is 1000.

The second parameter is the easing, for example:

pv.animate360(2000, pv.easings.EASE_OUT)

The following ease are available:

  • EASE_OUT
  • EASE_IN
  • EASE
  • EASE_IN_OUT
  • EASE_LINEAR

About

Simple 360 product viewer

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published