Code: Alles auswählen
<!-- START OF STYLE-CONFIGURATION ZONE -->
<style>
.textstyle {
position:absolute;
visibility:visible;
border-style:solid;
border-width:2px;
border-color:#EEEEEE;
font-family:Arial;
font-size:8pt;
color:#FFFFFF;
text-align:center;
background-color:#CCCCCC;
top:-1000px;
}
</style>
<!-- END OF STYLE-CONFIGURATION ZONE -->Code: Alles auswählen
<script>
// CREDITS:
// Carousel Slideshow with transparency and zoom effect
// By Peter Gehrig
// Copyright (c) 2010 Peter Gehrig. All rights reserved.
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at http://www.fabulant.com
// IMPORTANT:
// If you add this script to a script-library or script-archive
// you have to add a highly visible link to
// http://www.fabulant.com on the webpage
// where this script will be featured
var rotatingimage=new Array()
var rotatingtext=new Array()
var rotatinglink=new Array()
///////////////////////////////////////////////////////////////////////////////////////
// START OF SCRIPT-CONFIGURATION ZONE
//////////////////////////////////////////////////////////////////////////////////////
// Set the path and name (or URL) of your images. Add as many images as you like
// Take care that the images have a decent resolution as they are used for the zoom-images as well
rotatingimage[0]="/autumn_leaves.jpg"
rotatingimage[1]="/dock.jpg"
rotatingimage[2]="/forest.jpg"
rotatingimage[3]="/forest_flowers.jpg"
rotatingimage[4]="/green_sea_turtle.jpg"
rotatingimage[5]="/humpback_whale.jpg"
rotatingimage[6]="/oryx_antelope.jpg"
rotatingimage[7]="/toco_toucan.jpg"
rotatingimage[8]="/waterfall.jpg"
// Set the the comments corresponding to the images above (requires the same amount as images!)
rotatingtext[0]="Herbststimmung"
rotatingtext[1]="Steg"
rotatingtext[2]="Wald"
rotatingtext[3]="Waldblumen"
rotatingtext[4]="Wasserschildkröte"
rotatingtext[5]="Wal"
rotatingtext[6]="Antilope"
rotatingtext[7]="TuKan"
rotatingtext[8]="Wasserfall"
// Set the the comments corresoponding to the images above (requires the same amount as images!)
// Set "#" if no link is required
rotatinglink[0]="#"
rotatinglink[1]="#"
rotatinglink[2]="#"
rotatinglink[3]="#"
rotatinglink[4]="#"
rotatinglink[5]="#"
rotatinglink[6]="#"
rotatinglink[7]="#"
rotatinglink[8]="#"
// Set the width of the circle (pixels)
var circlewidth=420
// Set the height of the circle (pixels)
var circleheight=240
// Set the width of your small rotating images (pixels)
var imgwidth=150
// Set the height of your small rotating images (pixels)
var imgheight=90
// Set the height of your textbox (pixels). This is the textbox (comment) below the rotating images
var textboxheight=17
// Set the path and name (or URL) of your backgroundimage
// Write "var bgimg=false" if you don't want to add a backgroundimage
var bgimg="/wasser.jpg"
// Set the number of words that will be displayed at once
var displaymax=7
// Set the speed! Tha values may range from 0.1 to 1.0
var step=0.02;
// Set the zoomfactor for the big picture that appears on mouseover
var zoomfactor=2;
// padding to the margin
var imgpadding=10
/////////////////////////////////////////////////////////////////////////////////////
// END OF SCRIPT-CONFIGURATION ZONE
// Do not edit below this line
////////////////////////////////////////////////////////////////////////////////////
var maxopacity=new Array()
var i_imgcounter=0
var segment=360/(displaymax);
var decrement=0;
var op
var tmr
var opacitystep=Math.round(100/circleinnerheight)
var zoomobj
var twidth
var theight
var windowwidth
var windowheight
var circleinnerwidth=circlewidth-(imgwidth+2*imgpadding)
var circleinnerheight=circleheight-(imgheight+2*imgpadding)
circleinnerwidth=circleinnerwidth/2
circleinnerheight=circleinnerheight/2
var ns4=document.layers?1:0
var ns6=document.getElementById&&!document.all?1:0
var ie=document.all?1:0
var preloadedimages=new Array()
for (i=0;i<rotatingimage.length;i++){
preloadedimages[i]=new Image()
preloadedimages[i].src=rotatingimage[i]
}
for (i=0;i<displaymax;i++) {
maxopacity[i]=1
}
function getpagesize() {
windowwidth=parseInt(document.body.clientWidth)
windowheight=parseInt(document.body.clientHeight)
twidth=Math.floor(circleinnerwidth)
theight=Math.floor(circleinnerheight)
i_imgcounter=0
for (i=0; i<displaymax; i++) {
var thisspan=eval("document.getElementById('span"+i+"').style")
thisspan.left=twidth*Math.sin(decrement+i*segment*Math.PI/180)+circleinnerwidth+imgpadding;
thisspan.top=theight*Math.cos(decrement+i*segment*Math.PI/180)+circleinnerheight+imgpadding;
thisspan.zIndex=parseInt(thisspan.top)
op=parseInt(100/circleinnerheight*(parseInt(thisspan.top)*0.5))
document.getElementById('span'+i).innerHTML="<a href='"+rotatinglink[i_imgcounter]+"'><img border=0 width="+imgwidth+" src='"+rotatingimage[i_imgcounter]+"' id='im"+i_imgcounter+"' onMouseover='stoprotating(this)' onMouseout='restartrotating()'></a><br>"+rotatingtext[i_imgcounter]
document.getElementById('span'+i).style.visibility="visible"
maxopacity[i]=-1
i_imgcounter++
if (i_imgcounter>=rotatingimage.length) {
i_imgcounter=0
}
}
rotatetext()
}
function rotatetext() {
for (i=0; i<displaymax; i++) {
var thisspan=eval("document.getElementById('span"+i+"').style")
thisspan.left=twidth*Math.sin(decrement+i*segment*Math.PI/180)+circleinnerwidth+imgpadding;
thisspan.top=theight*Math.cos(decrement+i*segment*Math.PI/180)+circleinnerheight+imgpadding;
thisspan.zIndex=parseInt(thisspan.top)
op=parseInt((100/circleinnerheight*(parseInt(thisspan.top)*0.5))-imgpadding)
if (op<5 && maxopacity[i]==1) {
if (i_imgcounter>=rotatingimage.length) {
i_imgcounter=0
}
document.getElementById('span'+i).innerHTML="<a href='"+rotatinglink[i_imgcounter]+"'><img border=0 width="+imgwidth+" src='"+rotatingimage[i_imgcounter]+"' id='im"+i_imgcounter+"' onMouseover='stoprotating(this)' onMouseout='restartrotating()'></a><br>"+rotatingtext[i_imgcounter]
document.getElementById('span'+i).style.visibility="visible"
maxopacity[i]=-1
i_imgcounter++
}
if (op>90) {
maxopacity[i]=1
}
var thisfilter=eval("span"+i)
if (ie) {
thisfilter.filters.alpha.opacity=op
}
else {
thisspan.opacity=op/100
}
}
decrement-=step;
tmr=setTimeout('rotatetext()', 50);
}
function stoprotating(thisobj) {
clearTimeout(tmr)
zoomobj=thisobj
zoomobj.width=zoomfactor*imgwidth
zoomobj.parentNode.parentNode.style.width=zoomfactor*imgwidth
zoomobj.parentNode.parentNode.style.zIndex=9999
if (ie) {
zoomobj.parentNode.parentNode.filters.alpha.opacity=100
}
else {
zoomobj.parentNode.parentNode.style.opacity=1
}
}
function restartrotating() {
zoomobj.width=imgwidth
zoomobj.parentNode.parentNode.style.width=imgwidth
rotatetext()
}
document.write('<div id="roof" style="position:relative;width:'+circlewidth+'px;height:'+(circleheight+textboxheight)+'px;">')
if (bgimg) {
document.write('<img src="'+bgimg+'" width="'+circlewidth+'" height="'+(circleheight+textboxheight)+'">')
}
for (i=0;i<displaymax;i++) {
document.write("<div id='span"+i+"' class='textstyle' style='filter:alpha(opacity=80);opacity:0.8;width:"+imgwidth+"px;visibility:hidden'></div>");
i_imgcounter++
if (i_imgcounter>=rotatingimage.length) {
i_imgcounter=0
}
}
document.write('</div>');
window.onload=getpagesize;
</script>