Code: Alles auswählen
<!-- BEGINNING OF THE CODE FOR THE CSS3-ROTATION-AND-ZOOM-SLIDESHOW-->
<!----------------------------------------->
<!-- TEXT-STYLE-CONFIGURATION STARTS HERE -->
<!----------------------------------------->
<!-- Set the text-style within ".textboxstyle" -->
<!-- Set the backgroundcolor within ".textboxbackgroundstyle" -->
<!-- "-moz-" is required for Firefox. "-webkit-" is required for Safari and Chrome -->
<style>
.textboxstyle {
font-family:Arial;
font-size:10pt;
color:white;
text-align:center;
vertical-align:middle;
}
.textboxbackgroundstyle {
background-color:black;
padding:0px;
}
</style>
<!----------------------------------------->
<!-- TEXT-STYLE-CONFIGURATION ENDS HERE -->
<!----------------------------------------->
<style>
.imgbox {
float:left;
position:absolute;
top:0px;
left:0px;
display:block;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
}
</style>
<script>
// CREDITS:
// CSS3-Slideshow with rotation and zoom effect effect
// by Peter Gehrig
// Copyright (c) 2012 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
// 02/10/2010
// IMPORTANT:
// If you add this script to a script-library or script-archive
// you have to add a link to http://www.fabulant.com on the webpage
// where this script will be running.
// CONFIGURATION:
// Go to http://www.fabulant.com and get the original code
// with step-by-step instructions and copy-and-paste installation.
/////////////////////////////////////////////////
// SCRIPT-CONFIGURATION STARTS HERE
/////////////////////////////////////////////////
// Set the elements of your slides. Each block below contains the URL of your images as well as the corresponding messages and links. In this case the pictures are in the same directory as the HTML-file. Add as many slides as you like. Just follow the rules below:
// { Each block starts with this brackets
// imgsrc : "../the path/or/url/to/your/image.jpg",
// message : "the comment at the bottom of the slide",
// linkto : "http://the-url-of-your-link.com" This line does not end with a comma
//}, Each block ends with a bracket and comma. ATTENTION: The very last block does not end with a comma!!!
var slide= [
{
imgsrc : "sample1.jpg",
message : "That's the smile of Mona Lisa",
linkto : "http://www.fabulant.com"
},
{
imgsrc : "sample2.jpg",
message : "Lena looks like an angel",
linkto : "http://www.fabulant.com"
},
{
imgsrc: "sample3.jpg",
message : "Most women are waterproof",
linkto : "http://www.fabulant.com"
},
{
imgsrc : "sample4.jpg",
message : "Beauty has no age",
linkto : "http://www.fabulant.com"
}
]
// Set the target of the your links ("_blank", "_top", "_self", "_parent" or "nameOfYourFrame")
var target_url="_blank"
// Set the width and height of your images (pixels)
var imgwidth=200
var imgheight=150
// Set the height of your textbox (pixels)
var textheight=20
// Set opacity-strength (transparency-effect). Values may range from 1 to 100
var opacitystrength=60
// Set the pause (standstill) between the rotations (seconds)
var pause=2
/////////////////////////////////////////////////
// SCRIPT-CONFIGURATION STOPS HERE
/////////////////////////////////////////////////
// do not edit below this line
var maxrotations=1
var step=3
var i_imgwidth=0
var i_imgsrc=0
var i=0
var maxdegree=maxrotations*360
pause*=1000
var imgpreload=new Array()
for (ii=0;ii<=slide.length-1;ii++) {
imgpreload[ii]=new Image()
imgpreload[ii].src=slide[ii].imgsrc
}
function enlarge() {
i+=step
i_imgwidth+=imgwidth/(360*maxrotations/step)
if (i_imgwidth>imgwidth) {
i_imgwidth=imgwidth
}
if (i<=maxdegree) {
document.getElementById("dt").innerHTML="<table cellpadding=0 cellspacing=0 width="+imgwidth+" height="+imgheight+"><tr valign=middle><td align=center><a href='"+slide[i_imgsrc].linkto+"' target='"+target_url+"'><img src='"+slide[i_imgsrc].imgsrc+"' width="+i_imgwidth+" border=0></a></td></tr></table>"
document.getElementById("dt").style.MozTransform="rotate("+i+"deg)"
document.getElementById("dt").style.WebkitTransform="rotate("+i+"deg)"
document.getElementById("dt").style.OTransform="rotate("+i+"deg)"
tmr=setTimeout("enlarge()",20)
}
else {
clearTimeout(tmr)
i=0
i_imgwidth=imgwidth
showmessage()
}
}
function showmessage() {
document.getElementById("textbox").innerHTML='<div class="textboxbackgroundstyle">'+slide[i_imgsrc].message+'</div>'
tmr=setTimeout("hidemessage()",pause)
}
function hidemessage() {
document.getElementById("textbox").innerHTML=""
shrink()
}
function shrink() {
i+=step
i_imgwidth-=imgwidth/(360*maxrotations/step)
if (i_imgwidth<1) {
i_imgwidth=1
}
if (i<=maxdegree) {
document.getElementById("dt").innerHTML="<table cellpadding=0 cellspacing=0 width="+imgwidth+" height="+imgheight+"><tr valign=middle><td align=center><a href='"+slide[i_imgsrc].linkto+"' target='"+target_url+"'><img src='"+slide[i_imgsrc].imgsrc+"' width="+i_imgwidth+" border=0></a></td></tr></table>"
document.getElementById("dt").style.MozTransform="rotate("+i+"deg)"
document.getElementById("dt").style.WebkitTransform="rotate("+i+"deg)"
document.getElementById("dt").style.OTransform="rotate("+i+"deg)"
tmr=setTimeout("shrink()",20)
}
else {
clearTimeout(tmr)
i_imgsrc++
if (i_imgsrc>slide.length-1) {
i_imgsrc=0
}
i=0
i_imgwidth=0
tmr=setTimeout("enlarge()",500)
}
}
document.write("<div id='roof' style='position:relative;width:"+imgwidth+"px;height:"+imgheight+"px;'>")
document.write("<div class='imgbox' id='dt' style='width:"+imgwidth+"px;height:"+imgheight+"px;top:0px;left:0px;'></div>")
document.write("<div id='text' style='position:absolute;width:"+imgwidth+"px;height:"+textheight+"px;top:"+(imgheight-textheight)+"px;left:0px;filter:alpha(opacity="+opacitystrength+");opacity:"+(opacitystrength/100)+";'><table width="+imgwidth+" height="+textheight+"><tr><td id='textbox' class='textboxstyle'></td></tr></table></div>")
document.write("</div>")
window.onload=enlarge
</script>
<!-- END OF THE CODE FOR THE CSS3-ROTATION-AND-ZOOM-SLIDESHOW-->