Zu jedem Bild kann ein Kommentar angezeigt werden. Und jedes Bild kann mit einer separaten URL verknüpft werden.
Code: Alles auswählen
<!------------------------------------------------------->
<!-- BEGINNING OF THE CODE FOR THE CAROUSEL-SLIDESHOW -->
<!------------------------------------------------------->
<!-- 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 -->
<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]="../../pics/300x180bluefish.jpg"
rotatingimage[1]="../../pics/300x180bonbons.jpg"
rotatingimage[2]="../../pics/300x180butterfly.jpg"
rotatingimage[3]="../../pics/300x180fruitshop.jpg"
rotatingimage[4]="../../pics/300x180herbstwald.jpg"
rotatingimage[5]="../../pics/300x180castle.jpg"
rotatingimage[6]="../../pics/300x180kleeblaetter.jpg"
rotatingimage[7]="../../pics/300x180lemons.jpg"
rotatingimage[8]="../../pics/300x180tree.jpg"
// Set the the comments corresponding to the images above (requires the same amount as images!)
rotatingtext[0]="Deep blue"
rotatingtext[1]="Not as sweet as you"
rotatingtext[2]="Fly, butterfly, fly"
rotatingtext[3]="Fruit Paradise"
rotatingtext[4]="Lost in the forrest"
rotatingtext[5]="My castle is my home"
rotatingtext[6]="This is my lucky day"
rotatingtext[7]="John Lemon"
rotatingtext[8]="Free the tree"
// Set the the comments corresoponding to the images above (requires the same amount as images!)
// Set "#" if no link is required
rotatinglink[0]="http://www.hotscripts.com"
rotatinglink[1]="http://www.hotscripts.com"
rotatinglink[2]="http://www.hotscripts.com"
rotatinglink[3]="http://www.hotscripts.com"
rotatinglink[4]="http://www.hotscripts.com"
rotatinglink[5]="http://www.hotscripts.com"
rotatinglink[6]="http://www.hotscripts.com"
rotatinglink[7]="http://www.hotscripts.com"
rotatinglink[8]="http://www.hotscripts.com"
// 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="../../pics/abendstimmung.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)+"px";
thisspan.top=(theight*Math.cos(decrement+i*segment*Math.PI/180)+circleinnerheight+imgpadding)+"px";
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)+"px";
thisspan.top=(theight*Math.cos(decrement+i*segment*Math.PI/180)+circleinnerheight+imgpadding)+"px";
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
}
if (ie) {
var thisfilter=eval("document.getElementById('span"+i+"')")
thisfilter.filters.alpha.opacity=op
}
else {
var thisfilter=eval("document.getElementById('span"+i+"').style")
thisspan.opacity=op/100
}
}
decrement-=step;
tmr=setTimeout('rotatetext()', 50);
}
function stoprotating(thisobj) {
clearTimeout(tmr)
zoomobj=thisobj
document.getElementById(zoomobj.id).style.width=(zoomfactor*imgwidth)+"px"
document.getElementById(zoomobj.parentNode.parentNode.id).style.width=(zoomfactor*imgwidth)+"px"
zoomobj.parentNode.parentNode.style.zIndex=9999
if (ie) {
zoomobj.parentNode.parentNode.filters.alpha.opacity=100
}
else {
zoomobj.parentNode.parentNode.style.opacity=1
}
}
function restartrotating() {
document.getElementById(zoomobj.id).style.width=imgwidth+"px"
document.getElementById(zoomobj.parentNode.parentNode.id).style.width=imgwidth+"px"
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>
<!------------------------------------------------------->
<!-- END OF THE CODE FOR THE CAROUSEL-SLIDESHOW -->
<!------------------------------------------------------->