DSX wanted a feature on their website to help inspire their customers to buy and choose their fabric, but they wanted something different than an image gallery. Smack Bang Designs showed me one of their competitors website and I was confident that I can replicate what the competitors has done.

The user clicks on a fabric to open a simulator.

Each image (the surfer, the lady etc.) Is an image mask that overlays the fabric creating the illusion that the model is wearing that fabric. The user can also zoom in and out of the fabric to see the detail.

I provided the direction for the development team, told them how to do it, structure it and what tools to use. As well as fine turned somethings at the end.

	function updateZoom(){
		var bkgdImage = featureImageCnt.getAttribute('data-backgroundimage');

 		if ( featureImage.getAttribute('src').search('blank') > 0 ) {
			featureImageCnt.style.backgroundSize = minImageSize + parseInt(zoomSlider.value)*2 +'%';
			setEdges(featureImageCnt, parseInt(featureImageCnt.style.backgroundPositionX), parseInt(featureImageCnt.style.backgroundPositionY));
		
		} else {
 			featureImageCnt.setAttribute('style', 'background-size: '+(zoomSlider.value) +'%; '+bkgdImage);
		}
	}
	
	zoomSlider.addEventListener('input', updateZoom);

	zoomIn.addEventListener('click', function(){
		zoomSlider.stepUp();
		updateZoom();
	});
	zoomOut.addEventListener('click', function(){
		zoomSlider.stepDown();
		updateZoom();
	});

There were some challenges along the way which was understanding how the client wanted to update the website, and how to design the simulator so it’ll look realistic, but in the end I along with Smack Bang Designs was able to offer the client a simple and effective solution.