3D rotator using jQuery



In this article I would like to show you a 3D rotator you can make with jQuery. It will listen for mouse events to rotate a teapot much like a 3D turntable render video.

Have a look at the demo below. The source code is easily available from the demo.

So let’s go over the code! We will skip the HTML and CSS since it’s pretty self-explanatory. All the CSS is for is for positioning and making the images invisible at first, with an additional loader being shown that you can easily replace with any ol’ loader like the one in this percentage loader bar article.

We use the imagesLoaded plugin in order to wait for all the images to load, also being explained in the previously mentioned article.

So let’s look at the JavaScript!

Let’s take one step back though, and think about what we need to get started making this 360 degree rotator with jQuery.

First, We will check if our images are loaded, then we will include a variable to see if we have started dragging our mouse and initialize a variable to save the coordinates of your initial mousedown event. We will need an array of all images and also to declare the next and previous image in line so that we can easily switch between them.

We also need to set a sensitivity which we will use later to determine if we switch out the images, and if we will use the current one or the next one.

// Sensitivity, feel free to change this. Lower is more sensitive.
var threshold = 20;

// General variables
var loaded = false;
var mouseDown = false;
var initX = 0;
var currentX = 0;
var offset = 0;

// Image info
var images;
var currentImage;
var nextImage;
var prevImage;

Now, after our images have been loaded, we will fade in the first image and initialize the image variables.

$('#rotator').imagesLoaded(function() {
		$('#spinner').fadeOut(500, function() {
			// Initialize the image variables.
			images = $('#rotator').find('img');
			currentImage = images.first();
			nextImage = currentImage.next('img');
			// The previous image of the first image is the last image.
			prevImage = images.last();

			// Fade in the current image.
			currentImage.fadeIn(500);

			// Our rotator has been loaded.
			loaded = true;
		});

	});

And when you click down on the image, we will prevent the default action (which is dragging the image, like if you would drag it to your desktop to save it). We will then initialize the coordinates of the initial position of the mouse so that we can later use the updated coordinates in the mousemove event and update the images accordingly.



$(this).on('mousedown', function(e) {
	e.preventDefault();
	if (loaded) {
		mouseDown = true;
		initX = e.clientX;
	}
});

And while we are at it, let’s re-initialize some variables on the mouseup event so that we can move on to the more interesting code

$(this).on('mouseup', function() {
	// Re-initialize some variables
	mouseDown = false;
	currentX = 0;
});

Now, when we drag our mouse, we have one of two things that could happen.

We could drag over the threshold to the left, or over the threshold to the right.

If we drag to the left, and we are at our first image, the last image in the collection becomes the one stored in the prevImage variable. We will then hide the old one, show the new one, and update the variables. We also will set the new initX variable to the current position.

In order to know if we moved to the left or right, we need to calculate an offset. This is simply the current position minus the starting position.

currentX = e.clientX;

// negative if you move to the left,
// positive if you move to the right.
offset = currentX - initX;

Now let's look at how we can use this offset and the threshold value.

Notice the minus sign (-) before the threshold variable.

// Show the previous image if threshold is crossed.
if (offset < -threshold) {
	prevImage.show();
	currentImage.hide();

	nextImage = currentImage;
	currentImage = prevImage;
	prevImage = prevImage.prev('img');

	if (!prevImage.length) {
		prevImage = images.last();
	}

	initX = currentX;
}

Now we can do the same thing in reverse for dragging to the right side!

// Show the next image if sensitivity is crossed.
if (offset > threshold) {
	nextImage.show();
	currentImage.hide();

	prevImage = currentImage;
	currentImage = nextImage;
	nextImage = nextImage.next('img');

	if (!nextImage.length) {
		nextImage = images.first();
	}

	initX = currentX;
}

All this now should be put in the mousemove event, and only execute if the mouseDown variable is set to true.

Below you will find the full code for the mousemove event.

	$(this).on('mousemove', function(e) {
		if (mouseDown) {
			currentX = e.clientX;

			// negative if you move to the left,
			// positive if you move to the right.
			offset = currentX - initX;

			// Show the previous image if threshold is crossed.
			if (offset < -threshold) {
				prevImage.show();
				currentImage.hide();

				nextImage = currentImage;
				currentImage = prevImage;
				prevImage = prevImage.prev('img');

				if (!prevImage.length) {
					prevImage = images.last();
				}

				initX = currentX;
			}

			// Show the next image if threshold is crossed.
			if (offset > threshold) {
				nextImage.show();
				currentImage.hide();

				prevImage = currentImage;
				currentImage = nextImage;
				nextImage = nextImage.next('img');

				if (!nextImage.length) {
					nextImage = images.first();
				}

				initX = currentX;
			}
		}
	});

That’s it!

I hope you liked this article. Feel free to leave a comment or share this article on your favorite social media if you like or use this code.

Share the knowledge!
Share on Facebook0Tweet about this on Twitter0Share on Google+31Share on StumbleUpon26Share on Reddit2Share on LinkedIn4Share on TumblrBuffer this pageDigg this

Comments

You may also like...

Stay updated
Subscribe!