|
Senior Coder
Join Date: Apr 2011
Location: London, England
Posts: 2,120
Thanks: 15
Thanked 354 Times in 353 Posts
|
FWIW carousel.html (not my work!!)
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><title>Carousel Slideshow</title>
<script type='text/javascript'>
function carousel(params){
if(!(params.width>0&&isFinite(params.width)))params.width=100;
if(!(params.height>0&&isFinite(params.height)))params.height=100;
if(!(params.sides>2&&isFinite(params.sides)))params.sides=4;
if(!(params.steps>0&¶ms.steps<100&&isFinite(params.steps)))params.steps=20;
if(!(params.speed>0&&isFinite(params.speed)))params.speed=8;
if(!(params.image_border_width>=0&&isFinite(params.image_border_width)))params.image_border_width=0;
if(isFinite(params.id)||!params.id)params.id='bad_id_given_'+Math.random();
document.write("<div style='position:relative;overflow:hidden;' id='"+params.id.replace(/[^a-zA-Z0-9]+/g,'_')+"'></div>");
var cdiv=document.getElementById(params.id.replace(/[^a-zA-Z0-9]+/g,'_'))
cdiv.style.width=params.width+'px';
cdiv.style.height=params.height+'px';
cdiv.style.border=params.border;
cdiv.style.position='relative';
cdiv.style.overflow='hidden';
cdiv.title=params.id;
var counter=0,spinning=true,interval=Math.floor(60000/params.sides/params.steps/params.speed)-5;
interval=isNaN(interval)?200:interval;
var img_position=[],images=[],img_dimension=[];
var img_index=params.images.length+1,img_index_cap=2*params.images.length;
var faces=Math.ceil(params.sides/2), dimension, direction, targ, attr, faraway;
function init(){
if(params.direction=="left" || params.direction=="right"){
direction=params.direction;
dimension="width";
}
else if(params.direction=="top" || params.direction=="bottom"){
direction=params.direction;
dimension="height";
}
else {
direction="left";
dimension="width";
}
faraway=(direction=="left"||direction=="top")?'-20000px':'20000px';
cdiv.style[dimension]=params[dimension]/(params.size_mode=='image'?Math.sin(Math.PI/params.sides):1)+'px';
var img=new Image();
img.style.position='absolute';
img.style[direction]=faraway;
img.style.width=params.width-2*params.image_border_width+'px';
img.style.height=params.height-2*params.image_border_width+'px';
img.style.border=(params.image_border_width||0)+'px solid '+params.image_border_color;
for(var i=0;i<params.images.length;i++){
images[i]=img.cloneNode(true);
images[i].src=params.images[i];
if(params.links&¶ms.links[i]&¶ms.links[i]!=''){
targ=params.lnk_targets&¶ms.lnk_targets[i]||params.lnk_base||'new';
if(targ=="_blank"){
attr=(params.lnk_attr&¶ms.lnk_attr[i])?",'"+params.lnk_attr[i]+"'":"";
images[i].onclick=new Function("window.open('"+params.links[i]+"','"+targ+"'"+attr+")");
}
else if(targ.substr(0,1)=="_"){
images[i].onclick=new Function(targ.substr(1)+".location='"+params.links[i]+"'");
}
else{
attr=(params.lnk_attr&¶ms.lnk_attr[i])?",'"+params.lnk_attr[i]+"'":"";
images[i].onclick=new Function("var t='"+targ+"';if(window[t]){try{window[t].close()}catch(z){}}window[t]=window.open('"+params.links[i]+"',t"+attr+");window[t].focus()");
}
images[i].style.cursor=document.all?'hand':'pointer';
}
if(params.titles&¶ms.titles[i]&¶ms.titles[i]!='')
images[i].title=params.titles[i];
if(document.all)
images[i].alt=images[i].title;
images[i+params.images.length]=images[i];
if(params.images.length==faces)
images[i+2*params.images.length]=images[i];
cdiv.appendChild(images[i]);
}
var face_size=params.size_mode=='image'?params[dimension]:params[dimension]*Math.sin(Math.PI/params.sides);
var face_offset=params[dimension]*Math.cos(Math.PI/params.sides)/(params.size_mode=='image'?Math.sin(Math.PI/params.sides):1)/2-.5;
var pi_piece=2*Math.PI/params.steps/params.sides;
for(i=0;i<=params.steps*faces;i++){
img_dimension[i]=face_size*Math.sin(pi_piece*i);
img_position[i]=(i<params.steps*params.sides/2)?Math.floor(params[dimension]/2/(params.size_mode=='image'?Math.sin(Math.PI/params.sides):1)-face_offset*Math.cos(pi_piece*i)-img_dimension[i]/2)+'px':faraway;
img_dimension[i]=img_dimension[i]-2*params.image_border_width>1?Math.ceil(img_dimension[i])-2*params.image_border_width+'px':'1px';
}
}
init();
cdiv.rotate = function(){
setTimeout('document.getElementById("'+cdiv.id+'").rotate()',interval);
if(!spinning) return;
if(++counter>=params.steps){
counter=0;
if(++img_index>=img_index_cap)
img_index=params.images.length;
}
images[img_index-faces].style[direction]=faraway;
for(var i=faces-1;i>=0;i--){
images[img_index-i].style[direction]=img_position[counter+i*params.steps];
images[img_index-i].style[dimension]=img_dimension[counter+i*params.steps];
}
}
cdiv.onmouseover=function(){
spinning=false;
}
cdiv.onmouseout=function(){
spinning=true;
}
setTimeout('document.getElementById("'+cdiv.id+'").rotate()',100);
}
</script>
</head><body>
<div id='jake' style='width:180px;float:left;'>
<h4>Linkage</h4>All of these images will open a google search in single (reused) window.
<script type='text/javascript'>
carousel({id:'carousel_2',
border:'',
size_mode:'carousel',
width:144,
height:100,
sides:4,
steps:20,
speed:8,
direction:'right',
images:['http://www.codingforums.com/images/icons/icon7.gif',
'http://www.codingforums.com/images/icons/icon8.gif',
'http://www.codingforums.com/images/icons/icon9.gif',
'http://www.codingforums.com/images/icons/icon10.gif',
'http://www.codingforums.com/images/icons/icon2.gif',
'http://www.codingforums.com/images/icons/icon3.gif',
'http://www.codingforums.com/images/icons/icon4.gif',
'http://www.codingforums.com/images/icons/icon5.gif',
'http://www.codingforums.com/images/icons/icon6.gif'],
links: ['http://www.google.com/search?q=happy',
'http://www.google.com/search?q=angry',
'http://www.google.com/search?q=sad',
'http://www.google.com/search?q=big+grin',
'http://www.google.com/search?q=look+here',
'http://www.google.com/search?q=bright+idea',
'http://www.google.com/search?q=caution',
'http://www.google.com/search?q=question',
'http://www.google.com/search?q=cool'],
lnk_base:'google',
titles:['Happy',
'Angry',
'Sad',
'Big Grin',
'Look Here',
'Bright Idea',
'Caution',
'Question',
'Cool!'],
image_border_width:1,
image_border_color:'red'
});
</script></div>
<div id='wendel' style="width:300px;float:right">
<h4>More Linkage</h4>Two photos share a single window, closing/reopening it with each click to allow the attributes to change. One photo opens in a _blank window, with another window added each click. The last photo opens in an iframe.
<script type='text/javascript'>
carousel({id:'Photos Courtesy of Dynamic Drive',
border:'',
size_mode:'image',
width:140,
height:225,
sides:6,
steps:20,
speed:5,
direction:'left',
images:['http://www.dynamicdrive.com/dynamicindex14/photo1.jpg',
'http://www.dynamicdrive.com/dynamicindex14/photo2.jpg',
'http://www.dynamicdrive.com/dynamicindex14/photo3.jpg',
'http://www.dynamicdrive.com/dynamicindex14/photo4.jpg'],
links:['http://www.dynamicdrive.com/dynamicindex14/photo1.jpg',
'http://www.dynamicdrive.com/dynamicindex14/photo2.jpg',
'http://www.dynamicdrive.com/dynamicindex14/photo3.jpg',
'http://www.dynamicdrive.com/dynamicindex14/photo4.jpg'],
lnk_base:'',
lnk_targets:['photo',
'photo',
'_blank',
'_steve' ],
lnk_attr:['width=200,height=300,top=200,menubar=yes',
'width=300,height=200,left=400,scrollbars=yes',
'width=150,height=250,left=300,top=100',
''],
titles:['Opens in \'photo\' window',
'Opens in \'photo\' window',
'Opens in blank window',
'Opens in iframe'],
image_border_width:0,
image_border_color:'blue'
});
</script></div>
<iframe name='steve' style="margin-top:20px;width:300px;height:300px;border:0px solid white"></iframe>
</body></html>
__________________
"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
Validate your HTML and CSS
|