Pastable version of ImageFlow - something like CoverFlow in Javascript

<div style="overflow:auto;border:solid 1px #ccc;background:#000;color:#F8F8F8">
 <div class="section">
 Javascript
 <pre style="float:left;margin:0 10px;border-right:0;color:#666;">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116</pre>
 <pre class="sunburst">
/* Set some variables */
var current = 0;
var target = 0;
var timer = 0;
var captionId = &quot;i1&quot;;
var captionTarget = &quot;&quot;;

/* Get width of the images div container in px */
function windowWidth()
{
	var width = document.getElementById(&quot;images&quot;).offsetWidth;
	return width;
}

function step()
{
	if (target &lt; current-1 || target &gt; current+1)
	{
		moveTo(current + (target-current)/3);
		window.setTimeout(step, 50);
		timer = 1;
	}
	else
	{
		timer = 0;
	}
}

function glideTo(x, newCaptionId)
{
	target = x;
	if (timer == 0)
	{
		window.setTimeout(step, 50);
		timer = 1;
	}

captionId = newCaptionId;
	var caption = document.getElementById(captionId);
	captionTarget.innerHTML = caption.innerHTML;
}

function moveTo(x)
{
	current = x;

/* do stuff with the images div */
	var padding_left = document.getElementById(&quot;imageflow&quot;).offsetLeft;
	var div = document.getElementById(&quot;images&quot;);
	var top = div.offsetTop;
	var width = windowWidth();
	var size = width * 0.5;
	var biggest = width * 0.5;

/* zIndex is the z-index in css = order of the layers (here images) */
	var zIndex = div.childNodes.length;

for (index = 0; index &lt; div.childNodes.length; index++)
	{
		var image = div.childNodes.item(index);
		if (image.nodeType == 1)
		{
			var z = Math.sqrt(10000 + x * x)+100;
			var xs = x / z * size + size;

var gna = 100 / z * biggest;

if((image.width) &gt; (image.height))
			{
				image.style.left = xs - 67 / z * biggest + padding_left +&quot;px&quot;;
				image.style.height = gna + &quot;px&quot;;
				image.style.width = &quot;&quot;;
			}
			else
			{
				image.style.left = xs - 50 / z * biggest + padding_left + &quot;px&quot;;
				image.style.width = gna + &quot;px&quot;;
				image.style.height = &quot;&quot;;
			}
		
			image.style.top = (width * 0.35 - image.height) + top + &quot;px&quot;;
			image.style.zIndex = zIndex;
			if ( x &lt; 0 )
			{
				zIndex++;
			}
			else
			{
				zIndex = zIndex -1;
			}
			x += 150;
		}
	}
}

/* Main Function */
function refresh()
{
	var width = windowWidth();
	var height = width * 0.35;
	var images = document.getElementById(&quot;images&quot;);
	images.style.height = height + &quot;px&quot;;

/* Text on top through zIndex */
	captionTarget = document.getElementById(&quot;captionTarget&quot;);
	captionTarget.style.top = images.offsetTop + height + &quot;px&quot;;
	captionTarget.style.zIndex = 100;

var caption = document.getElementById(captionId);
	captionTarget.innerHTML = caption.innerHTML;

/* Call subFunction */
	moveTo(current);
}
</pre>
 </div>
 </div>

Refactor :my => 'code'

Recent

Popular

Pastable version of ImageFlow - something like CoverFlow in Javascript