PDA

Click to See Complete Forum and Search --> : Know of any good Image Carousels?

Four_of_Five
10-05-2003, 03:28 PM
Preferably a horizontal carousel (for those who're not familiar, its the horsey thingies that goes round and round, and are usually found in carnivals)

Preferably also done only in javascript. The nearest one I recently saw was done vertically here (http://www.cyberwebs.com.au/showcase/image_eff/carousel/vertical.htm) but it's done with java applets and moves more like a ferris wheel rather than a carousel. Besides, it sucks with other browsers :(

It'd be great also if it can be customized as to make each of the images clickable...but not really necessary...
pyro
10-05-2003, 10:19 PM
Doesn't really look like much of a JavaScript thing to me. Maybe Flash, but keep this in mind, as some users may find the motion annoying: http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-avoid-movement
Gollum
10-06-2003, 02:24 AM
It's easy enough to do though...

<html>
<head>
<script>

var theta = 0;
var aImg = null;
var aOffset = [0,45,90,135];

function animate()
{
theta++;
if ( theta >= 45 ) theta = 0;

for ( var i = 0; i < 4; i++ )
{
var a = theta + aOffset[i];
var s = Math.sin(a * Math.PI / 180);
aImg[i].width = Math.floor(200 * s);
}

window.setTimeout("animate();", 50);
}

function init()
{
aImg = new Array;
aImg.push(document.getElementById("h1"));
aImg.push(document.getElementById("h2"));
aImg.push(document.getElementById("h3"));
aImg.push(document.getElementById("h4"));

animate();
}

</script>
</head>
<body onload="init();">
<div align=center>
<table><tr><td nowrap>
<img src="horse.gif" height=180 width=0 id=h1>
<img src="horse.gif" height=180 width=141 id=h2>
<img src="horse.gif" height=180 width=200 id=h3>
<img src="horse.gif" height=180 width=141 id=h4>
</td></tr></table>
</div>
</body>
</html>


extra points for working out how to use different images :p
Four_of_Five
10-06-2003, 12:38 PM
Huh???:confused: You mean I can only use horses???

:D kidding...but seriously, it looks cool enough, thanks! And oh yeah, not to be greedy...but what's the general rule if I say, wanted to add more images?? I know it's about adjusting the width right?
Gollum
10-07-2003, 02:29 AM
Right!

You adjust the widths to make it seem like the image is turning.

So for N images...

<html>
<head>
<script>

var W = 120;
var N = 6;
var theta = 0;
var aImg = new Array;
var aOffset = new Array;
for ( var i = 0; i < N; i++ ) aOffset.push(i*180/N);

function animate()
{
theta++;
if ( theta >= 180/N ) theta = 0;

for ( var i = 0; i < N; i++ )
{
var a = theta + aOffset[i];
var s = Math.sin(a * Math.PI / 180);
aImg[i].width = Math.floor(W * s);
}

window.setTimeout("animate();", 50);
}

function init()
{
for ( i = 0; i < N; i++ ) aImg.push(document.getElementById("h"+i));
animate();
}

</script>
</head>
<body onload="init();">
<div align=center>
<table><tr><td nowrap>
<img src="horse.gif" height=100 width=0 id=h0>
<img src="horse.gif" height=100 width=0 id=h1>
<img src="horse.gif" height=100 width=0 id=h2>
<img src="horse.gif" height=100 width=0 id=h3>
<img src="horse.gif" height=100 width=0 id=h4>
<img src="horse.gif" height=100 width=0 id=h5>
</td></tr></table>
</div>
</body>
</html>