I am often fascinated by interactive and immersive media (I will share a separate post on this later), you know the ones that you can drag and see from different angles, spinning, zooming, highlighting a part etc. I have wondered how to implement one, until recently, I figured out that there are no open source libraries or readily available codes to do so. That made me into trying it in the first place. And I am amazed how simple it is to implement something like this. You would be shocked to know that some companies are making these features available to the external world at a premium rate and others are paying out millions for them.
So, we are going to try out a simple interactive feature of an image (rather a set of images, as you will find out soon) today. We can drag it and view from different angles.
Disclaimer: I am not a UI developer/designer or expert in any sense. In fact, I am trying my hands on UI for the first time!!
What we Need?
Many of you may have guessed it correctly, it is actually a set of images taken from different angles. You can quickly verify that from the network tab in your browser. You will see all those images are downloaded (at once or eventually).
I have included a link to my github profile in the last section of this article. Feel free to clone/fork/tweak and play around with it. You will get the set of images as well.
Of course, we will have an HTML file as a placeholder for our javascript, css, images etc. So, let’s start with the HTML.
<!DOCTYPE html>
<html>
<head>
<title>Spin 360</title>
</head>
<!-- 360 deg view of product -->
<body>
<div >
<link href="css/spin.css" rel="stylesheet" type="text/css" />
<div id="holder">
<img src="images/lady/lady-1.jpg" class="show" />
<img src="images/lady/lady-2.jpg" class="hide" />
<img src="images/lady/lady-3.jpg" class="hide" />
<img src="images/lady/lady-4.jpg" class="hide" />
<img src="images/lady/lady-5.jpg" class="hide" />
<img src="lady/lady-5.jpg" class="hide" />
<img src="images/lady/lady-6.jpg" class="hide" />
<img src="images/lady/lady-7.jpg" class="hide" />
<img src="images/lady/lady-8.jpg" class="hide" />
<img src="images/lady/lady-9.jpg" class="hide" />
<img src="images/lady/lady-10.jpg" class="hide" />
<img src="images/lady/lady-11.jpg" class="hide" />
<img src="images/lady/lady-12.jpg" class="hide" />
<img src="images/lady/lady-13.jpg" class="hide" />
<img src="images/lady/lady-14.jpg" class="hide" />
<img src="images/lady/lady-15.jpg" class="hide" />
<img src="images/lady/lady-16.jpg" class="hide" />
<img src="images/lady/lady-17.jpg" class="hide" />
<img src="images/lady/lady-18.jpg" class="hide" />
<img src="images/lady/lady-19.jpg" class="hide" />
<img src="images/lady/lady-20.jpg" class="hide" />
<img src="images/lady/lady-21.jpg" class="hide" />
<img src="images/lady/lady-21.jpg" class="hide" />
<img src="images/lady/lady-22.jpg" class="hide" />
<img src="images/lady/lady-23.jpg" class="hide" />
<img src="images/lady/lady-24.jpg" class="hide" />
<img src="images/lady/lady-25.jpg" class="hide" />
<img src="images/lady/lady-26.jpg" class="hide" />
<img src="images/lady/lady-27.jpg" class="hide" />
<img src="images/lady/lady-28.jpg" class="hide" />
<img src="images/lady/lady-29.jpg" class="hide" />
<img src="images/lady/lady-30.jpg" class="hide" />
<img src="images/lady/lady-31.jpg" class="hide" />
<img src="images/lady/lady-32.jpg" class="hide" />
<img src="images/lady/lady-33.jpg" class="hide" />
</div>
</div>
</body>
</html>So, you see we have a div with all the images listed in an ordered manner. By default, we make the first image visible (Refer to the spin.css file in the repository).
***Keeping the images in an ordered manner is the single most important part.
Now, we want to rotate the image clockwise/anticlockwise based on the the drag. So here is the plain and simple strategy.
- When there is a drag from right to left, we are going to move the image from left to right. So we will hide the current visible image and make the next image visible.
- On the other hand, when there is a drag from left to right, we are going to move the image from left to right. So we will hide the current visible image and make the previous image visible.
Let’s take a look at the javascript for doing so.
var xMove;
var obj = document.getElementById('holder');
//to stop the image to be dragged by mouse down and move
obj.addEventListener('dragstart', function(event) {
event.preventDefault();
});
//add a mouse down event to calculate the x cordinate
//also add a mousemove event listener to document to
//change the images
obj.addEventListener('mousedown', function(event) {
var evt = event;
xMove = evt.clientX;
document.addEventListener('mousemove', change);
});
//remove the event listener from document so that
//it wont fire after mouseup
document.addEventListener('mouseup', function() {
document.removeEventListener('mousemove', change);
});
//logic to change the images
function change(event) {
var linkArr = document.querySelectorAll('#holder IMG');
var currentIdx = 0;
for (var i = 0; i < linkArr.length; i++) {
if (linkArr[i].className.indexOf('show') > -1) {
currentIdx = i;
}
}
if (event.clientX - xMove > 10) {
xMove = event.clientX;
if (0 === currentIdx) {
linkArr[currentIdx].className = 'hide';
linkArr[linkArr.length - 1].className = 'show';
} else {
linkArr[currentIdx].className = 'hide';
linkArr[currentIdx - 1].className = 'show';
}
} else if (event.clientX - xMove < -10) {
xMove = event.clientX;
if (linkArr.length - 1 === currentIdx) {
linkArr[currentIdx].className = 'hide';
linkArr[0].className = 'show';
} else {
linkArr[currentIdx].className = 'hide';
linkArr[currentIdx + 1].className = 'show';
}
}
}- We load the div with the id “holder”, as that contains all the images
- By default, an image can be dragged from HTML and that is going to interfere with our interest. So, we are disabling dragging of the image or the div. You can try out the feature by removing this part of the code
- Now, the actual logic comes to play, where we are assigning an event listener that says when we click on the image, we track the x coordinate of the mouse pointer, and then delegate to the change function
- In the change function, we create an array linkArr, with id holder and img tag. That will list all the images in the array
- Next, we calculate the difference in x co-ordinate between the point where the drag started and the current x co-ordinate
- We have taken a small offset of 10 pixels to ensure a drag event takes place
- If the difference value is positive, that means that it is a left to right drag, otherwise a negative value implies it is a right to left drag. So we change the visibility of the images accordingly.
Voila, and we have a perfect interactive image that moves as we drag! Hope this helps.
Reference
- Download the source code from Github here
- Apache License
Wisdombox 