Mouse Driven 3D JavaScript Carousel
08 September 2008
Permalink: http://douggreenall.co.uk/site/?p=232Right, well I think I'm slowly starting to get the hang of this whole blogging thing - I keep having ideas for lots of extremely impractical but fun things to do with JavaScript that I'll write up just for the sake of making them work and posting them here. Actually, I'm going to post my (considerably more practical) window manager within the next week or so, but today I'll explain how the carousel that I demonstrated in my second post works. Let's start off with a working example:
Very nice, I'm sure you'll agree. You can spin the carousel in different directions by holding the mouse button down and dragging across it (trying to click and drag it directly can cause problems, especially in Firefox where the browser may try to drag one of the images and hence won't fire the mousemove event - if you click adjacent to the carousel itself and then move the mouse across, you shouldn't have any problems... or you could do what I do and just use Opera) - its rotation speed is determined by how quickly you move the mouse and once moving, it will slowly decelerate to a complete halt. Alternatively, you can click it while it's moving and it will stop immediately. Additionally, when it is stopped each item acts as a hyperlink which you can use to... well you know what hyperlinks do.
So how does it work? Well what we're essentially doing is rotating a single vector for each carousel item around a common axis and using the components of those vectors to position and scale the elements that represent the items (in this case, images). Now there's actually a number of ways we can achieve this effect - one approach we could take would be to implement some 3D maths, setting up a rotation matrix to transform each vector around the y-axis and subsequently using the x-component of each transformed vector to position the respective image and the z-component to scale its dimensions (similar to a 3D to 2D projection). To visualise this, let's have a quick look at 3D axes and a projection of the carousel path within the 3D space:
Now although this would work, the approach is actually somewhat naive. If we observe the vector component values through the rotation, it soon becomes apparent that the y-component remains constant and isn't actually being used for transforming the carousel items. It's always good practice in programming to eliminate complexity as much as possible and as 3D matrix transformations require a number of calculations to perform, it would be far better if we could find a way to remove the redundancy of the unused y-component by converting the process to a 2D space. Fortunately, the Cartesian equation of a circle allows us to do just that, by calculating an [x,y] coordinate pair and transforming the carousel items with these values instead - let's have a look at the equation (angles are in radians):
y' = x * sin(angle) + y * cos(angle)
This formula will, given an existing point on the circle boundary, give us the coordinates of that point after it has been rotated around the circle by a particular angle. For example, the centre of the circle is at [0,0] so if we consider a vector at [0,1] (which given a circle radius of 1, lies at the very top or bottom of the circle depending on the orientation of your y-axis), applying this calculation with an angle of PI will invert its position on the edge of the circle - perhaps a diagram will help:
Now imagine we wanted to place n equally spaced items around the circle - to achieve this we need the same angular separation between each consecutive item with respect to the centre of the circle - calculating this separation is simply a case of dividing 2 * PI (the total number of radians within a circle) by n (the number of items) - we'll call this value d. Then, starting at 0 radians (the top of the circle), we calculate each item's [x,y] coordinates using the circle equation and the product of d and i (the item's respective index). This will produce the following (where n == 8):
At this point we need to take a quick look at our coordinate system and the individual frames of reference for elements within it. First of all we should note that for a computer display, our y-axis is inverted - that is, the origin [0,0] is at the top left of the screen and the coordinates increase as we move down and right across the plane. Also, each element within the plane that can contain other elements (divs for example) has its own local coordinate system, with its origin at the top left of the element. This can be seen in the following diagram:
This is important to understand because when we position our items around the circle, we have to introduce an offset to each to reposition the local origins to the centre of the item, like so:
You may have noticed that I reintroduced the z-axis to these diagrams even though we're only working with a 2D space - the reason for this is simple:if we rotate the whole coordinate system around the x-axis, we can create the illusion of 3D depth:
We do this by using the y-component of each vector to change the size and z-index of its respective image, not its position. We should bear in mind of course that this is only an illusion of 3D and as a result, those items nearer the front of the carousel appear to be closer together than those at the back - this is caused by only scaling the items themselves and not the spacing between them, but I consider this to be an acceptable trade-off.
Now before we continue, in my last post I explained how to track the mouse and presented two classes that are used to achieve it:Vector2D and MouseTracker. Both of these classes are used again for the carousel so if they're unfamiliar, it might be worth reading up on them. Also, Vector2D has been augmented with the following additional methods:
this.GetXInt = function() { return Math.round(this._x); };
this.GetYInt = function() { return Math.round(this._y); };
this.GetXPxl = function() { return Math.round(this._x) + 'px'; };
this.GetYPxl = function() { return Math.round(this._y) + 'px'; };
These simply provide us with convenient values for inline styles on DOM elements (Vector2D uses floats, and styles such as left, top, width and height expect integers, potentially followed by a quantifier like px or %).
Okay, so now we have a method for implementing the carousel, it's probably time to examine how we translate this to actual code. We use two classes to do this, one to encapsulate an individual carousel item and one for the carousel itself. Let's first look at the carousel item class:
///-class-/////////////////////////////////////////////////////////////////////
// CarouselItem
///////////////////////////////////////////////////////////////////////////////
function CarouselItem(Parent, HREF, ImageSRC)
{
///-data-//////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////
this._parent = Parent;
this._ID = this._parent._ID + 'Item' + this._parent._items.length;
this._href = HREF;
this._element = null;
this._position = new Vector2D(0, 0);
this._size = this._parent._itemSize.Clone();
this._image = new Image();
this._image.src = ImageSRC;
///-methods-///////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////
this.GetElement = function()
{
if (!this._element)
this._element = wGet(this._ID);
return this._element;
};
this.GetMarkup = function()
{
var screenSize = this.GetScreenSize();
var screenPosition = this.GetScreenPosition();
return '<a href="javascript:' + this._parent._ID + '.ClickItem(\'' + this._href + '\');">\n' +
' <img id="' + this._ID + '" style="position:absolute; ' +
'left:' + screenPosition.GetXPxl() + '; ' +
'top:' + screenPosition.GetYPxl() + '; ' +
'border:none; z-index:' + this.GetZIndex() + ';" ' +
'src="' + this._image.src + '" ' +
'width="' + screenSize.GetXInt() + '" ' +
'height="' + screenSize.GetYInt() + '" ' +
'alt="" title="" /></a>\n';
};
this.GetScreenPosition = function()
{
var returnVal = this._parent._itemPosition.Clone();
var offset = (this._parent._itemSize._x - this._size._x) / 2;
returnVal._x += this._position._x * (returnVal._x + offset) + offset;
returnVal._y += this._position._y * returnVal._y;
return returnVal;
};
this.GetScreenSize = function()
{
this._size = this._parent._itemSize.Clone();
this._size.MulVal((this._position._y + 1.5) / 2.5);
return this._size;
};
this.GetZIndex = function()
{
return Math.round((this._position._y + 2) * 10000);
};
this.Update = function()
{
this._parent.Rotate(this._position);
var screenSize = this.GetScreenSize();
var screenPosition = this.GetScreenPosition();
if (this.GetElement())
{
this._element.style.left = screenPosition.GetXPxl();
this._element.style.top = screenPosition.GetYPxl();
this._element.width = screenSize.GetXInt();
this._element.height = screenSize.GetYInt();
this._element.style.zIndex = this.GetZIndex();
}
};
}
So CarouselItem consists of seven member variables and six methods. The variables are as follows:
this._parent = Parent;
this._ID = this._parent._ID + 'Item' + this._parent._items.length;
this._href = HREF;
this._element = null;
this._position = new Vector2D(0, 0);
this._size = this._parent._itemSize.Clone();
this._image = new Image();
this._image.src = ImageSRC;
"_parent" is the instance of the carousel class which contains the item
"_ID" is the ID of the image that we manipulate on screen
"_href" is what the item links to when clicked
"_element" is the actual DOM image that we manipulate (we store it here so we don't have to traverse the DOM on every animation frame)
"_position" is the position of the item, relative to the circle it traverses (so this is a normalised vector)
"_size" is the actual size of the item on screen (we store this to help with adjusting the display position of the item)
"_image" is stored to force JavaScript to load the item image into the browser dynamically - failing to do this can result in the image not loading properly and we'll end up with empty spaces in the carousel
Now we'll look at each of the methods in turn.
GetElement() recovers the actual element that we're going to manipulate from the DOM and returns it to the caller. We store this object internally to minimise DOM traversals. As you can see, the only time we actually recover the element is when we haven't already got a valid reference to it (the wGet function is shorthand for window.document.getElementById() by the way and is defined in Support.js along with Vector2D). Otherwise, we just return our member variable:
this.GetElement = function()
{
if (!this._element)
this._element = wGet(this._ID);
return this._element;
};
GetMarkup() returns the raw HTML that draws the image - we use this by dumping it straight into the div containing the carousel using its innerHTML property:
this.GetMarkup = function()
{
var screenSize = this.GetScreenSize();
var screenPosition = this.GetScreenPosition();
return '<a href="javascript:' + this._parent._ID + '.ClickItem(\'' + this._href + '\');">\n' +
' <img id="' + this._ID + '" style="position:absolute; ' +
'left:' + screenPosition.GetXPxl() + '; ' +
'top:' + screenPosition.GetYPxl() + '; ' +
'border:none; z-index:' + this.GetZIndex() + ';" ' +
'src="' + this._image.src + '" ' +
'width="' + screenSize.GetXInt() + '" ' +
'height="' + screenSize.GetYInt() + '" ' +
'alt="" title="" /></a>\n';
};
Next up is GetScreenPosition() - this translates our position vector into actual screen coordinates:
this.GetScreenPosition = function()
{
var returnVal = this._parent._itemPosition.Clone();
var offset = (this._parent._itemSize._x - this._size._x) / 2;
returnVal._x += this._position._x * (returnVal._x + offset) + offset;
returnVal._y += this._position._y * returnVal._y;
return returnVal;
};
It's probably worth illustrating what the calculations above are actually doing - first off all we place the item according to the base position defined in the parent carousel class. Then we offset the item according to its position on the circle:
baseScreenX + (circleX * baseScreenX)
Next we shift the item according to the difference between its base size and its current size - we divide the difference by two in order to position the item's local origin at its centre (as described above):
baseScreenX + (circleX * baseScreenX) + ((baseSizeX - thisSizeX) / 2)
Finally we apply another offset to the item so it reaches the boundary of the carousel layer:
baseScreenX + (circleX * baseScreenX) + ((baseSizeX - thisSizeX) / 2) + (circleX * ((baseSizeX - thisSizeX) / 2))
As we use the value ((baseSizeX - thisSizeX) / 2) twice, we precalculate it and store it in a local variable called "offset". After rearranging the equation, we get the following final calculation for the item's onscreen x-coordinate:
position = baseScreenX + (circleX * (baseScreenX + offset)) + offset
The y-coordinate is somewhat simpler to calculate - we simply add to the item's initial screen y-coordinate, its current y-position on the circle multiplied by its initial screen y-position. Doing this gives us a range of screen locations from 0 to 2 * the initial screen y-position:
circleY == -1:10 + (-1 * 10) = 10 - 10 = 0
circleY == 1:10 + (1 * 10) = 10 + 10 = 20
Next we have GetScreenSize() which calculates the size of the item on screen, based on its position:
this.GetScreenSize = function()
{
this._size = this._parent._itemSize.Clone();
this._size.MulVal((this._position._y + 1.5) / 2.5);
return this._size;
};
Remember that our position vector y-component ranges from 1 to -1, depending on where it is on the circle. As we're going to multiply the item's base size by this value and we can't have a size greater than the base or smaller than 0, we need to apply a scalar to the y-component before we perform the multiplication. Here I've added 1.5 and then divided by 2.5 - let's look at what this will do to the extremes of the y range:
y == 1:(1 + 1.5) / 2.5 = 2.5 / 2.5 = 1
As you can see, this will cause an item right at the front of the carousel to be scaled to its base size (so not scaled at all), while an item right at the back will be scaled to 1/5 of its base size. You can change these values arbitrarily as long as the divisor is equal to one plus the offset.
GetZIndex() calculates the z-index of the item - again we scale the y-component before use so as not to have a negative value, but we also multiply it by 10000 before rounding it. We do this to acquire a large integer range of z values from the original floating point value:
this.GetZIndex = function()
{
return Math.round((this._position._y + 2) * 10000);
};
Finally, Update() is called by the parent class on every frame of animation and is responsible for actually moving the item around the carousel. First it rotates the item's position based on the current rotation speed, which is set in the parent carousel class. It then recovers the updated position, size and z-index of the item and applies them to the DOM element:
this.Update = function()
{
this._parent.Rotate(this._position);
var screenSize = this.GetScreenSize();
var screenPosition = this.GetScreenPosition();
if (this.GetElement())
{
this._element.style.left = screenPosition.GetXPxl();
this._element.style.top = screenPosition.GetYPxl();
this._element.width = screenSize.GetXInt();
this._element.height = screenSize.GetYInt();
this._element.style.zIndex = this.GetZIndex();
}
};
Right, so that's the individual items taken care of - now we'll have a look at the carousel itself:
///-class-/////////////////////////////////////////////////////////////////////
// Carousel
///////////////////////////////////////////////////////////////////////////////
function Carousel(ID, LayerID, MouseTracker, CarouselWidth, ItemWidth, ItemHeight)
{
///-data-//////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////
this._ID = ID;
this._layerID = LayerID;
this._interval = '';
this._items = new Array();
this._width = CarouselWidth;
this._itemSize = new Vector2D(ItemWidth, ItemHeight);
this._itemPosition = new Vector2D((this._width - this._itemSize._x) / 2, 10);
this._rotateSpeed = 0;
this._rotateCos = 0;
this._rotateSin = 0;
this._mouseTracker = MouseTracker;
///-methods-///////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////
this.AddItem = function(HREF, ImageSRC)
{
this._items[this._items.length] = new CarouselItem(this, HREF, ImageSRC);
};
this.DrawItems = function()
{
var layer = wGet(this._layerID);
if (layer)
{
layer.style.width = this._width + 'px';
layer.style.height = (this._itemPosition._y * 2 + this._itemSize._y) + 'px';
this.SetRotate((2 * Math.PI) / this._items.length);
var itemPosition = new Vector2D(0, 1);
var markup = '';
for (var count = 0; count < this._items.length; ++count)
{
this._items[count]._element = null;
this._items[count]._position = itemPosition.Clone();
markup += this._items[count].GetMarkup();
this.Rotate(itemPosition);
}
layer.innerHTML = markup;
}
};
this.Animate = function()
{
this.Decelerate();
for (var count = 0; count < this._items.length; ++count)
this._items[count].Update();
if (this._rotateSpeed >= 0 && this._rotateSpeed < 0.1 ||
this._rotateSpeed < 0 && this._rotateSpeed > -0.1)
this.Stop();
};
this.Start = function()
{
if (this._interval == '')
this._interval = setInterval(this._ID + '.Animate()', 10);
};
this.Stop = function()
{
if (this._interval != '')
clearInterval(this._interval);
this._interval = '';
};
this.SetRotate = function(Angle)
{
this._rotateCos = Math.cos(Angle);
this._rotateSin = Math.sin(Angle);
};
this.Rotate = function(Vector)
{
var clone = Vector.Clone();
Vector._x = this._rotateCos * clone._x - this._rotateSin * clone._y;
Vector._y = this._rotateSin * clone._x + this._rotateCos * clone._y;
};
this.Decelerate = function()
{
this._rotateSpeed *= 0.96;
this.SetRotate((this._rotateSpeed * Math.PI) / 500);
};
this.MouseDown = function()
{
this._rotateSpeed = 0;
};
this.Drag = function()
{
if (this._mouseTracker._buttonDown)
{
this._rotateSpeed = -this._mouseTracker._acceleration._x;
this._mouseTracker.Reset();
this.Start();
}
};
this.ClickItem = function(ItemID)
{
if (this._rotateSpeed == 0 && !this._mouseTracker._buttonDown)
alert('You clicked item ' + ItemID);
};
}
We'll start as ever by examining the class member variables:
this._ID = ID;
this._layerID = LayerID;
this._interval = '';
this._items = new Array();
this._width = CarouselWidth;
this._itemSize = new Vector2D(ItemWidth, ItemHeight);
this._itemPosition = new Vector2D((this._width - this._itemSize._x) / 2, 10);
this._rotateSpeed = 0;
this._rotateCos = 0;
this._rotateSin = 0;
this._mouseTracker = MouseTracker;
"_ID" is the name of the variable used to hold our instance of Carousel - we store this so the JavaScript engine can refer to the correct instance during the animation loop
"_layerID" is the ID of the carousel div element, which looks something like the following:
<div id="carouselDiv" class="noSelect" style="position:relative; left:0px; top:0px; width:1px; height:1px;" onmousedown="javascript:carousel.MouseDown(event);" onmousemove="javascript:carousel.Drag();"></div>
"_interval" stores the string name of the animation interval and is returned from the setInterval() JavaScript function
"_items" is an array to hold CarouselItem instances
"_width" is the onscreen width of the carousel
"_itemSize" is a vector to hold the base size of an item (when it is scaled at 1:1)
"_itemPosition" is a vector to hold the base position of the item - the y-component is set to 10 here and determines how far the items at the front of the carousel are from the top of the carousel div, while the x-component is offset to shift the origin to the middle of the item, as described above
"_rotateSpeed" is the speed at which the carousel rotates
"_rotateCos" and "_rotateSin" are the cosine and sine values used in the circle equation - the equation is used for each item individually on every animation frame, so we calculate and store these values whenever the rotation speed changes to reduce the total number of calculations we have to perform
"_mouseTracker" is an instance of our MouseTracker class so we can have the carousel react to the mouse
Let's have a look at Carousel's methods:
AddItem() does what you might expect and adds a new CarouselItem instance to the carousel:
this.AddItem = function(HREF, ImageSRC)
{
this._items[this._items.length] = new CarouselItem(this, HREF, ImageSRC);
};
Likewise, DrawItems() is pretty self-explanatory and draws the items to the screen:
this.DrawItems = function()
{
var layer = wGet(this._layerID);
if (layer)
{
layer.style.width = this._width + 'px';
layer.style.height = (this._itemPosition._y * 2 + this._itemSize._y) + 'px';
this.SetRotate((2 * Math.PI) / this._items.length);
var itemPosition = new Vector2D(0, 1);
var markup = '';
for (var count = 0; count < this._items.length; ++count)
{
this._items[count]._element = null;
this._items[count]._position = itemPosition.Clone();
markup += this._items[count].GetMarkup();
this.Rotate(itemPosition);
}
layer.innerHTML = markup;
}
};
First it checks that the div that holds the carousel exists and if so, gets a reference to it. Then it sets the width and height of the div before looping through the carousel items, uniformly positioning each one and collating the markup into a string. It also resets the internal item element references to null - it does this because when we output the new markup to the div, any previously created element references will become invalid and will need to be recreated - manually setting these to null here will force the item's GetElement() method to create a reference to the new element when we start the animation. Finally, we dump the complete carousel markup to the carousel div using its innerHTML property.
Animate() is the main carousel animation loop - this is called on every frame and starts off by calling Decelerate() to slow the rotation of the carousel. Next it loops through the items, forcing each to update in turn. It then compares the carousel speed to a threshold to determine whether to stop the animation loop:
this.Animate = function()
{
this.Decelerate();
for (var count = 0; count < this._items.length; ++count)
this._items[count].Update();
if (this._rotateSpeed >= 0 && this._rotateSpeed < 0.1 ||
this._rotateSpeed < 0 && this._rotateSpeed > -0.1)
this.Stop();
};
Start() initialises the animation loop. It first tests if the carousel is already moving by checking whether we have a valid interval (the JavaScript function setInterval() executes code passed as a string at a regular interval and returns a string to identify that interval). If not, it creates one to call the Animate() method every 10 milliseconds.
Note how we've used "_ID" here to reference the current Carousel instance as a string - "_ID" must contain the name of the variable which holds our Carousel instance or this code won't execute:
this.Start = function()
{
if (this._interval == '')
this._interval = setInterval(this._ID + '.Animate()', 10);
};
Stop() is quite simple really - if we have an active interval, it stops it being executed using the JavaScript clearInterval() function and then empties the string containing the interval identifier:
this.Stop = function()
{
if (this._interval != '')
clearInterval(this._interval);
this._interval = '';
};
SetRotate() calculates the cosine and sine values of the angle which it is passed - these are used in the circle equation to rotate the carousel items:
this.SetRotate = function(Angle)
{
this._rotateCos = Math.cos(Angle);
this._rotateSin = Math.sin(Angle);
};
Rotate() applies the circle equation to a passed Vector2D instance using the current instance values:
this.Rotate = function(Vector)
{
var clone = Vector.Clone();
Vector._x = this._rotateCos * clone._x - this._rotateSin * clone._y;
Vector._y = this._rotateSin * clone._x + this._rotateCos * clone._y;
};
Decelerate() simply applies a scalar to the speed of the carousel and forces the calculation of the new rotation values:
this.Decelerate = function()
{
this._rotateSpeed *= 0.96;
this.SetRotate((this._rotateSpeed * Math.PI) / 500);
};
MouseDown() stops the carousel by setting its speed to 0:
this.MouseDown = function()
{
this._rotateSpeed = 0;
};
Drag() first checks to see if the mouse button is depressed - if so it sets the rotation speed of the carousel to the acceleration of the mouse, before resetting the mouse tracker and starting the animation:
this.Drag = function()
{
if (this._mouseTracker._buttonDown)
{
this._rotateSpeed = -this._mouseTracker._acceleration._x;
this._mouseTracker.Reset();
this.Start();
}
};
Last but not least, ClickItem() simply responds to an item being clicked - we could redirect the page here to the target URL of the clicked item, but I'm just showing an alert box for illustrative purposes:
this.ClickItem = function(ItemID)
{
if (this._rotateSpeed == 0 && !this._mouseTracker._buttonDown)
alert('You clicked item ' + ItemID);
};
}
Finally, to initialise the carousel we use the following code:
<script language="JavaScript" type="text/JavaScript" src="js/Support.js"></script>
<script language="JavaScript" type="text/JavaScript" src="js/Carousel.js"></script>
<script language="JavaScript" type="text/JavaScript">
var mouseTracker = new MouseTracker();
var carousel = new Carousel('carousel', 'carouselDiv', mouseTracker, 500, 50, 50);
carousel.AddItem('1', 'images/icon1.gif');
carousel.AddItem('2', 'images/icon2.gif');
carousel.AddItem('3', 'images/icon3.gif');
carousel.AddItem('4', 'images/icon4.gif');
window.onload = function()
{
carousel.DrawItems();
};
</script>
<div id="carouselDiv" style="position:relative; left:0px; top:0px; width:1px; height:1px;" onmousedown="javascript:carousel.MouseDown(event);" onmousemove="javascript:carousel.Drag();">
</div>
Okay well I think that about covers it - if you have any questions / problems etc. feel free to drop me a line. Also, I'd be interested to find out how many items you can run the carousel with on different platforms and with different image resolutions - as an example I can run it quite nicely in Opera on an Athlon 64 3000, WinXP, 1GB RAM ___^^___ 500x64x64 (the above configuration) with about 150 items. Have fun.
Download Support.js
Download Carousel.js
Addendum
I received a comment from Michael asking how to add some sort of mechanism to allow the items to rotate to the front when clicked - this involves just a couple of minor changes to the code. First of all, let's look at the differences in CarouselItem:///-class-/////////////////////////////////////////////////////////////////////
// CarouselItem
///////////////////////////////////////////////////////////////////////////////
function CarouselItem(Parent, HREF, ImageSRC)
{
///-data-//////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////
.
.
.
this._index = this._parent._items.length;
///-methods-///////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////
.
.
.
this.GetMarkup = function()
{
.
.
.
return ..ClickItem(' + this._index + ')..;
};
.
.
.
this.InPlace = function()
{
return (Math.round(this._position._y * 1000) == 1000);
};
}
As you can see, we now store the parent's array index of the item which we pass back to the parent as an argument in GetMarkup(). We also add a method called InPlace() that calculates whether or not the item is at the front of the carousel - we know that the item is at the front of the carousel when its y-position is equal to one, however because we're using floats, we'll rarely, if ever, get a value of exactly one in this variable. We therefore multiply by 1000 and round it to make the test a little more forgiving. This calculation needs tweaking depending on how many items are in the carousel and how quickly it rotates. You could instead do something like testing between a range or calculate the difference between the item's current y-position and its target y-position (1) and if the difference is less than the distance it will move on the next frame, rotate the whole carousel with that value instead - bear in mind however, that you'll perform this operation on every frame so consider performance implications before implementing it.
Now the changes to Carousel:
///-class-/////////////////////////////////////////////////////////////////////
// Carousel
///////////////////////////////////////////////////////////////////////////////
function Carousel(ID, LayerID, CarouselWidth, ItemWidth, ItemHeight)
{
///-data-//////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////
.
.
.
this._clickedItem = 0;
///-methods-///////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////
.
.
.
this.Animate = function()
{
for (var count = 0; count < this._items.length; ++count)
this._items[count].Update();
if (this._items[this._clickedItem].InPlace())
this.Stop();
};
.
.
.
this.ClickItem = function(Index)
{
this._clickedItem = Index;
if (this._items[this._clickedItem].InPlace())
{
window.open(this._items[this._clickedItem]._href);
}
else
{
if (this._items[this._clickedItem]._position._x < 0)
this.SetRotate(-Math.PI / 50);
else if (this._items[this._clickedItem]._position._x >= 0)
this.SetRotate( Math.PI / 50);
this.Start();
}
};
}
We keep track of the most recent item clicked in a new variable called "_clickedItem". In the Animate() method we remove the call to Decelerate() and change the stop condition to test whether the clicked item is in position or not. Finally, ClickItem() now sets our new "_clickedItem" variable to the array index of the most recently clicked item and either initialises the animation with a uniform rotation, or opens a new window with the HREF of the clicked item (if it's already at the front).
Finally we should disable the mouse behaviour - to do this we remove the MouseDown() and Drag() methods and the "_mouseTracker" variable from Carousel. Then we can create the carousel div as follows:
<div id="carouselDiv" style="position:relative; left:0px; top:0px; width:1px; height:1px;">
</div>
Michael
19 September 2008
Hi,very nice widget! But I think background images are too small. How can I change the radius? It would also be nice to have a rotation around ellipsoid...
Michael
Michael
19 September 2008
Hi,OK, found it. Changed GetScreenSize to:
this._size.MulVal(1 + (this._position._y-1)/5);
This works very fine for me...
Still 2 questions:
(1) Browser compatibilities?
(2) I'd like to have a button rotating the next item to the front (I think mouse navigation feels a little strange - bin ALL carousels). Any hint on how to do this?
Thanks,
Michael
Mark Onat
19 September 2008
Congrats on being a scripting allstar. From someone who's more on the graphics side, dont call these projects impractical, especially when as whimsical as this one. Amusement of the public is always practical. This one is so smooth in its interaction its really shocking.I've been trying to dig up a jscript for rotation as viewed from above, one that I could then add mouseovers to. I've managed this stuff in Flash, but the iphone isnt supporting flash, so thats sending me back into dhtml and jscript, but I'm a paster, not a programmer. i seriously doubt I will place these parts of this script in the right place in the document, but I could definitely see using it in a display website, say of 30 images of 600x400. Would really be a crowd-pleaser.
Mark Onat
Foto21.com, Markonat.com
Doug
19 September 2008
Hi Michael - thanks for your comments. I see you've worked out how to get the image resizing and elliptical effect working (an elliptical effect comes from differently sized rear images for anyone else reading) so I'll just answer your other questions:1. I've tested this on the following browsers:IE 6, IE 7, Firefox 2, Firefox 3, Safari, Google Chrome and Opera 9. With some browsers (Firefox esp.) if you click and drag one of the images, the browser tries to perform a drag/drop and as such, won't fire the mousemove event - this can cause the carousel to not start spinning properly so it's somewhat questionable as to how suitable this would really be for a GUI component. To make it more usable, you can do what you've suggested in your second question and add a button so the item clicked moves to the front.
2. I've actually implemented a version of this behaviour on my employer's new website:http://www.outerin.com/MarketTested.aspx - each item of the carousel here acts a button which, if clicked when not at the front will rotate to the foreground. If clicked when already at the front, it will launch a PDF file (but you could get it to link elsewhere or fire some more JavaScript etc.). It also has an auto-rotate implemented so the carousel will move each item around roughly every 10 seconds. I've got to head out for a few hours right now, but I'll post some more code here later this evening (GMT), showing you how to get it working.
Cheers,
Doug
Doug
19 September 2008
Cheers Mark - glad you like it. The code's pretty straightforward to place - obviously the script tags won't affect your page markup so you can put them pretty much anywhere you like. The carousel div on the other hand can be placed just like any other page element - because it uses relative positioning, other page elements will flow around it so you shouldn't have too much trouble getting it to look right - I'd be glad to give you some pointers if you do have any problems - just drop me a line.As for adding many large images, well this becomes somewhat interesting - depending on the browser you use, the larger the image, the slower the performance - this is especially evident in IE 6 which seems to have a major problem when you try to manipulate many large page elements simultaneously. The best thing to do is try it out - the image sizes are passed as arguments into the main carousel constructor so I'd just give it a spin (excuse the pun) and see how you get on. Once again, if you need any help, feel free to get in touch.
Finally I know what you mean about the iPhone - I kind of wanted to dislike it (one, I'm a Microsoft kid and two, Apple are infuriatingly good at what they do) but I can't escape the fact that it's a really beautiful device and I think it's really quite important to support it as much as you can - in my opinion, the web is about inclusivity and the more you can do to achieve that, the better. Fortunately, the iPhone uses Safari so you should have no problems running any of the stuff I post here on the device. If you do come across any problems with it, please let me know.
Cheers,
Doug
Michael
21 September 2008
Doug,thanks for supplying compatibilities and the link. I came up with a sort of sloppy implementation for the buttons:I set the rotating speed to around 7 which gives a rough 60° rotation - fine for my 6 images.
As for the link:your sample is right what I need, a proper alternative to using buttons. I would be great if you could post according changes to the code. Still, I think it could be improved by a “preview” of the background images, propably meaning to set up some kind of perspective by z-axis forward rotation. I think most of the other carousels around do it like that.
Michael
Doug
21 September 2008
Hi Michael - I've added the code you need to enable the clickable version of the carousel at the end of the post (see Addendum).In terms of keeping the background images visible, this is simply a case of playing with the y-component calculation in CarouselItem.GetScreenPosition() - the reason they're hidden in the link I posted in my previous reply to you is a purely stylistic one:we simply decided the carousel looked better that way. By playing with GetScreenPosition() though, you can position them however you like - let me know how you get on and if you have any trouble, just give me a shout.
Cheers,
Doug
Michael
22 September 2008
Hi Doug, thanks once again for the quick reply and the updated code.It still amazes me that all this can be done with a few KB of jscript.
The only feature in which jscript still lags behind flash is smoothness of animation:the flickering of animations/effects can be a little annoying sometimes. But I guess that's where jscript reaches its limits:not really intended for such things in the first place...
Cheers,
Michael
P.S.:Have you thought about compiling your widgets as toolkit?
Doug
23 September 2008
No problem Michael. I know what you mean about JavaScript vs Flash - hopefully with Google upping the game somewhat with Chrome, performance will improve in the future (the other thing that bugs me is the lack of decent sound support but there we go).As for a toolkit, I hadn't really thought about it to be honest - there's quite a few out there already but I don't use them because I want to understand what's going on under the hood. Whether I'll ever collate all the stuff I've done into a toolkit is something I'll consider - I'm still in the process of refactoring a lot of my previous work (that's why my next post is taking a while - it's a bit more substantial and interactive than the carousel) so maybe when I've finished standardising it all, I'll put something together.
Cheers,
Doug
Michael
26 September 2008
Indeed that is really what I liked most:small code size, decent programming style, extensive documentation. I just decided not to use anything larger or more complex than jquery - that's the end of the line for me!My usual work is actually with GWT which releases much of the pain of coding jscript directly (with pain I mean lack of a proper IDE). Coming from this background I think its obvious I liked it the way it is ;-)
Anyway, contact me when you put it all together. I could add a GWT layer to make it available for the GWT world which I'm sure will appreciate it as much as I do!
Cheers,
Michael
Oscar
14 October 2008
Very good work! This was the best carousel I found for using in my designs (i'm currently experimenting with it)As you asked to test how many items we can run, I've tested it on my iBook G4 1.33GHz, 1.5GB RAM, Mac OS 10.4.11 500x64x64 (the test up there) and I run over 190 items in Safari 4 beta (nightly build) with Squirrelfish Extreme, over 200 it starts to get slower.
Cheers,
Oscar
P.S.:Sorry for my bad English, i'm from Spain :)
Dilip Shukla
16 October 2008
Hi Doug,I was searching for something, which can stimulate iphone like image viewer with integrated carousel functionality.
where we can click and drag to next item with acceleration (exactly same as your this carousel exhibits).
But as you see to i need only one image at time which will fill the div (iphone screen visible part) and dragging on image should result in new image, with same effect. It translate into i need clipped visible area with no 3D. In addition it should have ability to auto play image slides as well manual next, previous, play and pause functionality triggered by clicking some link or button.
I have played with your code a bit but totally in mess in order to achieve the desired result.
I am looking for your help regarding same.
(extreamly sorry for above broken comment postings)
Thanks
Doug
16 October 2008
Hi Oscar - glad you like it. Thanks for your feedback.Cheers,
Doug
Doug
16 October 2008
Hi Dilip - thanks for your feedback. I think I know what you're trying to achieve - I'll put a little example together at the weekend and post it up here. Don't worry about the multiple comments by the way - I just deleted the broken ones.Cheers,
Doug
Dilip Shukla
17 October 2008
Thanks a lot Doug,I'll be eagerly waiting for your post. :)
Dilip Shukla
17 October 2008
I don't know if you are a jQuery fan or not...but its really great.what you think about jQuery versions/plugins for your experiments (for this and further 'Doug Labs' releases as well) ?
Doug
19 October 2008
Hi Dilip - I've had a bit of a look at jQuery. There seems to be quite a variety of toolkits out there and jQuery certainly appears to be one of the better ones from what I've seen. A lot of the stuff I do though, I do because I want to understand how it works from the ground up - in cases where you need to get results and you're constrained by time or other resources, it's certainly well worth taking advantage of what's already available on the web, but by doing so I feel that you ultimately end up just learning how to use a framework, not necessarily the language or the techniques required to make you a better programmer. Of course if you can help it, it's better not to reinvent the wheel, but if you're undertaking something as a purely technical exercise (which is what pretty much everything on here is), I'd much prefer to follow my own path and see what I can come up with - sure I'll make mistakes and there may be better ways of doing things, but I think that those are ultimately the lessons you don't forget.Dilip Shukla
19 October 2008
I agree with you completely...and i appreciate it with respect...coz i can smell something been cooked with purity and with love of cooking without keeping in mind whats current cooking trend :)I wish you all the luck (and hope you'll maintain same quality for every post of your blog).
BTW (here goes a cunning question), i am still waiting for you modified carousel related post (or solution). I can start crying any time :(
Cau
23 October 2008
Hi Dougyour script is amazing (I prefer to work without frameworks)!
I have a question:
how can I make the carousel rotate automatically (on page load)?
Thank you for this great script.
Doug
27 October 2008
Hi Cau - thanks for your feedback. If you want the carousel to rotate automatically on page load, you'll need to setup the rotation speed and add a call to Carousel.Start() in the window.onload function - something like:window.onload = function()
{
carousel.DrawItems();
carousel._rotateSpeed = Math.PI / 10;
carousel.Start();
};
You'll have to experiment with the exact rotation speed until you find something you're happy with. If you want it to continue to rotate, you'll also have to remove the call to Carousel.Decelerate() in Carousel.Animate(). If you have any trouble, feel free to give me a shout.
Russ
28 October 2008
Hi, Great Carousel, Ive been trying for hours to write a text lable over the top of each image (as to use the images as buttons), i have managed to get dynamic text for the alt and titles of each image but cant figure a way to write a text link infront of the picture that follows it round, should it be possibe? Thanks again.Sean
28 October 2008
I will briefly experiment with a hybrid model. If I am successful, I will post script changes necessary to complete.What I want is a content area that may have multiple links. When the area is not fully in focus, I want the ClickItem functionality. When the area is fully in focus, I want links[multiple] to be clickable.
Doug
03 November 2008
Hi Russ - thanks for your comments. Sorry I've taken a while to reply - I'm snowed under at the moment with work and everything else so I've been neglecting the blog for the past week or so I'm afraid. In answer to your question, you should be able to attach a label to each item by including an absolutely positioned div or span in the item markup and manipulating those also during the animation loop. Alternatively you could use a single div for each item, place a centre aligned image and label within and then move the div but resize the image on each animation frame. As long as the image and label are both relatively positioned, they'll move within their containing div without any additional code. I'll post the alternative item markup here as soon as I get five minutes to test it out. In the meantime, thanks for reading.Cheers,
Doug
Doug
03 November 2008
Hi Sean - I'd be interested to see what you come up with - send me a link or post it up here when you've got a working version if you can.Cheers,
Doug
ranjana
08 November 2008
hello,can you please give me full script which is working in IE 7 and Mozilla Firefox as i am fail to use this script but its really good i think and thats why i want your reply on this please reply me it urgent
Thanks,
Ranjana
Doug
13 November 2008
Hi Ranjana - there are links to the necessary scripts at the end of the post (just before the Addendum), all of which are entirely cross-browser compatible.Cheers,
Doug
Amit
13 November 2008
HiI want that the image should rotate contineously every time whenever we open the site in the browser. I tried but its working only on mouse over.
I tried ones but its not rotating smoothly. So please do reply
Thanx
Regards
Amit
Doug
13 November 2008
Hi Amit - there's a pretty simple way to get this going:set the Carousel._rotateSpeed variable to an appropriate value depending on how fast you want it to spin, remove the call to Carousel.Decelerate() in Carousel.Animate() and finally add a call to Carousel.Start() in your window.onload function after Carousel.DrawItems(). Finally, remove the mouse event calls from the carousel div in your page markup as well so it no longer reacts to mouse input. I think this should do it (but I haven't tested it). Give me a shout if you have any problems.Cheers,
Doug
Amit
13 November 2008
Amithi , I did that by doing some changes here and there. But what remaining is if we r cliking on any image then it should open in same window.
This is where i made some chanage
this.Decelerate = function() {
this._rotateSpeed = this._rotateSpeed;
this.SetRotate((this._rotateSpeed * Math.PI) / 1000);
};
how to open the image in same window
Thanx , u did a great job man
Regards
Amit
Doug
14 November 2008
Hi Amit - to get the images to open in the browser, you'll need to change the behaviour in Carousel.ClickItem - the carousel passes the item ID to the method so all you need to do is recover the item from the Carousel._items array and handle it accordingly in the ClickItem method. As the carousel will always be moving, you'll also need to remove the test in ClickItem that determines whether the carousel is currently moving, i.e. _rotateSpeed == 0 or you won't get any response.It's worth mentioning by the way that the code you posted in your last comment is doing some unnecessary things - the lines
this._rotateSpeed = this._rotateSpeed;
this.SetRotate((this._rotateSpeed * Math.PI) / 1000);
are both redundant and should be removed - the SetRotate call is particularly expensive, given that you're performing 3 or 4 floating point calculations that don't actually change anything. I'd comment out the call to Carousel.Decelerate in Carousel.Animate as it's just not required if you want the carousel to spin continuously.
Hope this helps,
Doug
Roy
09 December 2008
Hmm... I really wanted to implement this, so I began playing around with your code. The main reason that I don't want to implement it “as is” is the firefox problems. I think for usability reasons, it would be nice to remove the user ability to rotate and just allow them to click to follow a link.Anyways, I attempted to implement this. I changed the onLoad function to set the rotation and to make a call to Start(), and I also removed the call to Decelerate() inside of Animation(). However, the pictures just jump from location to location, and never change locations (ie the pictures rotate from div to div, but the divs themselves do not rotate in a circle).
Upon further looking, without the decelerate call, the SetRotate never gets called, which means that upon Update() -> Rotate(), there's no new values stored in the rotateCos and rotateSin values.
I don't think you can avoid the expensive call to SetRotate if you want the carousel to spin, maybe this is where a few of the others had some issues?
Roy
09 December 2008
In addition, I should point out what I did to accomplish the desired affect. I only changed these two functions:this.Decelerate = function()
{
this._rotateSpeed *= 0.96;
this.SetRotate((this._rotateSpeed * Math.PI) / 500);
};
this.MouseDown = function()
{
if (this._interval == ”)
this.Start();
else
this.Stop();
};
Bryan Avery
22 December 2008
Great Blog, I hope you don't mind, as I have taken your JavaScript and implemented it in a .NET controlhttp://www.bryanavery.co.uk/post/2008/12/22/How-to-create-a-Carousel-in-a-webpage.aspx
Guy Van Hove
08 January 2009
Hi Doug,Great script for a great carousel! Not sure if this blog is still actively followed up by you, but here's my question anyway :-)
I'm not familiar with java scripting at all but I did manage to get your script working with my very own images in it. One thing I still want to get to work is this:on clicking image x in the carousel, this image (or another hyperlinked file) should open into the same page or frame on the site. What happens now is an alert box that is opening, but I can't rewrite the script such that a hyperlink is opened..
Also, but maybe less urgent/important to me, is how do I add text above/under/on top of an image? This question has been asked here by Russ and answered by you, but I can't figure out the answer. If you could post or send me the alternative item markup for thi, that would be great too.
Thanks!
Guy
Doug
11 January 2009
Hi Roy - thanks for your comments and sorry for the delay in replying - I've been in Puerto Rico since early December so I haven't touched the blog since then - I plan to do another update in the next few days. In reply to your comments, I've already implemented the behaviour you mention in the addendum at the end of the post. If you want the carousel to rotate in different directions depending on the clicked item, you'll need the call to SetRotate() whenever you click an item - this can be seen in the modified ClickItem() method. If you want the carousel to just rotate constantly, you only need to set the _rotateSpeed variable once in the initialisation of the carousel - something like:window.onload = function()
{
carousel.DrawItems();
carousel._rotateSpeed = Math.PI / 10;
carousel.Start();
};
Hope this helps.
Cheers,
Doug
Doug
11 January 2009
Hi Bryan - thanks for your comments and sorry for the delay in replying - I?ve been in Puerto Rico since early December so I haven?t touched the blog for a while. I've no problem with your .NET implementation by the way - nice work.Cheers,
Doug
Doug
11 January 2009
Hi Guy - thanks for your comments and as I've mentioned in my last two comments, sorry for the delay in replying - I?ve been in Puerto Rico since early December so I haven?t touched the blog since then.In answer to your first question, to get the items to work as hyperlinks, simply modify the ClickItem() method - specifically the line:
alert('You clicked item ' + ItemID);
Instead, pass a valid URL for each item when adding them to the carousel and then use something like:
this.ClickItem = function(HREF)
{
if (this._rotateSpeed == 0 && !this._mouseTracker._buttonDown)
window.location = HREF;
};
As for your second question, I still haven't gotten around to posting the code up yet for the text - I'll try and get it done in the next few days and post it on the site along with a whole load of other little snippets etc.
Cheers,
Doug
Eric
20 January 2009
Hello Doug,Great code.
I teach High School and have implemented your Carousel code at the school site for the students to link to their class information.
How could I change the ClickItem() method to play a different sound for each item clicked?
Regards,
Eric
Melvz
23 January 2009
Hello Doug,Thanks for sharing this beautiful code. I used this script on my boss personal website (www.paolofeliciano.com/html_version). I used phpmysql to generate thumbs and added ajax to preview large image. Im just new in web programming and still learning..
Thanks again, more power to you! cheers ;)
Andrey
31 January 2009
Hi Doug. i've tested few good 3d galeries (for exumple this onehttp://www.dhteumeuleu.com/run/Slideshow3D/ is very cool) but yours is the the best one. because of it took me only 30 second to install your galary into my site. the other galaries use absolute positioning - and it too hard use them everywhere i want.
Great thanks for your work.
if you dont mind i have used your script in my site http://vash-gorod.com
I have only one question:
as i can see your galary fix width and height of images to values, i set in new Carusel(..., wifth, height).
but if images have different dimantions ,they are displayed confused.
How can i set only one dimantion - for example “WIDTH”, and height will calculate proportionaly? as teg work?
thank you for you help,
best regards,
Andrey
Doug
05 February 2009
Hi Eric - thanks for your comments. There's currently no cross-browser compatible way of playing sounds with JavaScript I'm afraid - there are some IE specific ways of doing it and other methods that use plugins but as there's nothing generic, it's not something I've bothered to pursue to be honest - sorry I can't be more help.Cheers,
Doug
Doug
05 February 2009
Hi Melvs - thanks for your comments - glad you like the script.Cheers,
Doug
Doug
05 February 2009
Hi Andrey - thanks for your comments. I've got no problem with you using the script - feel free. To get the images to scale properly, you'll need to remove the reference to one of the dimensions entirely - that is don't specify either a width or a height at all - although I haven't tested it, I think the browser should do the rest.Cheers,
Doug
Nial
16 February 2009
Hi Doug - Thanks for all the scripts and perhaps more importantly, this 'forum'. I've implemented the carousel script and applied a few of the tweaks/mods suggested above by yourself and others with excellent results.My question is simple enough; I've changed the method this.ClickItem = function(HREF) and it now opens the corresponding HREF in the SAME page, what code should I change to get the method to open in a NEW page?
Regards
Nial
Nial
16 February 2009
Hi Doug - I wanted the rear images to vanish and so adjusted the GetScreenSize and it works just fine in IE7 but NOT in google Chrome...! I've not tested other browsers. (Working example at http://www.nialbarker.com) Chrome sets the image size to max when the image is supposed to vanish....? I am using the following parametersthis._size.MulVal((this._position._y + 0.76) / 1.1);
Is there another way of achieving the desired result using your script (vanishing rear images) ..?
Regards - Nial
Nial
19 February 2009
Hi Doug - Its me again... I've now trialled the scripts on the iPhone and it too behaves like google Chrome and does not allow the rear images to vanish using the settings above (the images vanish just fine in IE7). The other noticeable thing is one also looses mouseOver functionality on the iPhone (you cannot get the carousel to rotate using mouseOver). Any guidance you can give me regarding getting images to vanish in Chrome and iPhone, would be greatly appreciated. Thanks.Nial
Doug
22 March 2009
Hi Nial - sorry for the delay in replying - I haven't had the time to do anything with the blog for a while now so it's on the back-burner until I've got some of my other projects out of the way - hopefully I'll be able to write some more about that within the coming weeks but I can't really say much about it just yet. Anyway, to answer your questions:1. To open a link in a new page try something along the lines of <a href="www.targeturl.com" target="_blank">www.targeturl.com</a> in the item markup instead of making a call to ClickItem(). If you want to do some pre-processing, you can instead use the JavaScript window.open() function although the browser pop-up blockers will likely prevent this from working consistently.
2. To make the images disappear in WebKit browsers, add a check in the item Update() method to change the item's style.visibility property from visible to hidden and vice-versa (e.g. this._position._y < -0.8).
The iPhone problem on the other hand is a bit trickier - I haven't looked into iPhone-specific web-apps so I don't know of anyway of overriding the default drag functionality of the device for navigating a web-page so at the moment, you can't spin the carousel on the handset. As the iPhone uses Safari, the code will work if you change the script to respond to clicks but you can't use a drag unfortunately. If you do come up with a solution though, I'd love to see it.
Cheers,
Doug
Tord Nordell
30 March 2009
Dear DougThis was a fantastic description of how a carousel is working. Your approach is also so easy to implement. You deserve a salute, man.
Yours,
Tord
Nial
01 April 2009
Hi Doug,Thanks for the above reply. I went with the window.open() function and it work just fine at the moment. On the second point, I'm having some difficulties. I agree with your suggestion, changing the items visibility property but seem unsuccessful with the exact code.
Currently it stands at
this.Update = function()
{
this._parent.Rotate(this._position);
var screenSize = this.GetScreenSize();
var screenPosition = this.GetScreenPosition();
if (this.GetElement())
{
this._element.style.left = screenPosition.GetXPxl();
this._element.style.top = screenPosition.GetYPxl();
this._element.width = screenSize.GetXInt();
this._element.height = screenSize.GetYInt();
this._element.style.zIndex = this.GetZIndex();
}
};
Any chance you could give me the exact additional line of code to switch visibility, please?
Thanks
Nial
Doug
05 April 2009
Hi Nial - I haven't tested this but I think it's along the lines of:this.Update = function()
{
...
if (this.GetElement())
{
...
if (this._position._y < -0.8) // change this threshold depending on your requirements
this._element.style.visibility = 'hidden';
else
this._element.style.visibility = 'visible';
...
}
...
}
Hope this helps,
Doug
Doug
05 April 2009
Hi Tord - thanks for your comments - glad you like it.Cheers,
Doug
Nial
07 April 2009
BINGO...!Hi Doug, Your subtle code changes work like a charm. The carousel with vanishing rear images now also works in Chrome browsers. For reference I used the following lines of code
this.Update = function()
{
this._parent.Rotate(this._position);
var screenSize = this.GetScreenSize();
var screenPosition = this.GetScreenPosition();
if (this.GetElement())
{
this._element.style.left = screenPosition.GetXPxl();
this._element.style.top = screenPosition.GetYPxl();
this._element.width = screenSize.GetXInt();
this._element.height = screenSize.GetYInt();
if (this._position._y < -0.74)
this._element.style.visibility = 'hidden';
else
this._element.style.visibility = 'visible';
this._element.style.zIndex = this.GetZIndex();
}
};
The end result is http://www.nialbarker.com - You have removed a thorn from my side, so I thank you..Cheers Nial
Add a comment:
Name*
Email*
Website
Comments*
Mouse Driven 3D JavaScript Carousel
Status:
Ready...
JavaScript Image Gallery
A mouse-driven image gallery
Draggable Analogue Clock
An analogue clock that can be set with the mouse
Mouse Driven 3D Carousel
A draggable 3D-style carousel
Tracking The Mouse
How to track the mouse using JavaScript
Some more about JavaScript
Some stuff about JavaScript classes
Welcome to my blog
Welcome to my blog and some JavaScript fundamentals
About Me
A little bit about me and my interests
Amaze
My employer
Southampton ECS
My university