Code: Alles auswählen
<!-- CONFIGURATION OF MESSAGE-STYLE STARTS HERE -->
<style>
.messagestyle{
font-family:Arial;
font-size:11px;
color:white;
background-color:#888888;
text-align:center;
position:absolute;
}
</style>
<!-- CONFIGURATION OF MESSAGE-STYLE ENDS HERE -->
<script>
<!-- Beginning of JavaScript -
// CREDITS:
// Sliding Stripes Slideshow 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.
// 6/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 STARTS HERE
////////////////////////////////////////////////////////////////////////////
// The URLs of your images. You may add as many images as you like
var imgurl=new Array("sample1.jpg", "sample2.jpg", "sample3.jpg", "sample4.jpg")
// The messages corresponding to the images above
var message=new Array("Hi Mary, how are you?", "Do you know Gina?", "She is the sister of Maureen", "I have forgotten her Name, sorry!")
// The links corresponding to the images above
var imglink=new Array("http://www.hotscripts.com", "http://www.yahoo.com", "http://www.google.com", "http://www.hotscripts.com")
// Standstill of the images (seconds)
var standstill=3
// Width of slideshow (pixels)
var slideshow_width=200
// Height of slideshow (pixels)
var slideshow_height=150
// Height of the messagebox (pixels)
var messagebox_height=15
// The number of pieces within one row
var x_slices=100
////////////////////////////////////////////////////////////////////////////
// CONFIGURATION ENDS HERE
////////////////////////////////////////////////////////////////////////////
// Do not change the variables below
// horizontal position of the slideshow: distance to the left margin of the window
var x_finalpos=0
// vertical position of the slideshow: distance to the top margin of the window
var y_finalpos=0
// The number of rows of pieces
var y_slices=1
var imgpreload=new Array()
for (i=0;i<=imgurl.length-1;i++) {
imgpreload[i]=new Image()
imgpreload[i].src=imgurl[i]
}
var imgheight
var imgwidth
var screenheight
var screenwidth
var x_step=new Array()
var y_step=new Array()
var x_randompos=0
var y_randompos=0
var i_loop=0
var max_loop=20
var i_image=1
var i_wholeimage=1
var width_slice
var height_slice
var cliptop=0
var clipbottom=height_slice
var clipleft=0
var clipright=width_slice
var spancounter=0
var pause=10
var stretchpause=pause
var stretchfactor=1.15
standstill=1000*standstill
function initiate() {
screenheight=document.body.clientHeight/3
screenwidth=document.body.clientWidth/3
width_slice=Math.floor(imgwidth/x_slices)
height_slice=Math.floor(imgheight/y_slices)
cliptop=0
clipbottom=height_slice
clipleft=0
clipright=width_slice
i_loop=0
spancounter=0
for (i=0;i<=y_slices-1;i++) {
for (ii=0;ii<=x_slices-1;ii++) {
var thisspan=eval("document.getElementById('span"+spancounter+"').style")
thisspan.left=20*spancounter
thisspan.top=0
thisspan.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
clipleft+=width_slice
clipright+=width_slice
spancounter++
}
clipleft=0
clipright=width_slice
cliptop+=height_slice
clipbottom+=height_slice
}
explode_IE()
}
function changeimage() {
spancounter=0
for (i=0;i<=y_slices-1;i++) {
for (ii=0;ii<=x_slices-1;ii++) {
var thisspan=eval("document.getElementById('span"+spancounter+"').style")
thisspan.left=-5000
thisspan.top=-5000
spancounter++
}
}
spancounter=0
if (i_image>imgurl.length-1) {i_image=0}
for (i=0;i<=y_slices-1;i++) {
for (ii=0;ii<=x_slices-1;ii++) {
var thisinnerspan=eval("span"+spancounter)
thisinnerspan.innerHTML="<a href='"+imglink[i_image]+"' target='_top'><img src='"+imgurl[i_image]+"' border=0></a>"
spancounter++
}
}
imgwidth=document.getElementById('span0').offsetWidth
imgheight=document.getElementById('span0').offsetHeight
i_wholeimage=i_image
i_image++
initiate()
}
function explode_IE() {
spancounter=0
if (i_loop<=max_loop-1) {
for (i=0;i<=y_slices-1;i++) {
for (ii=0;ii<=x_slices-1;ii++) {
var thisspan=eval("document.getElementById('span"+spancounter+"').style")
x_step[spancounter]=(x_finalpos-parseInt(thisspan.left))/(max_loop-i_loop)
y_step[spancounter]=(y_finalpos-parseInt(thisspan.top))/(max_loop-i_loop)
thisspan.left=parseInt(thisspan.left)+x_step[spancounter]
thisspan.top=parseInt(thisspan.top)+y_step[spancounter]
spancounter++
}
}
i_loop++
stretchpause*=stretchfactor
var timer=setTimeout("explode_IE()",stretchpause)
}
else {
spancounter=0
stretchpause=pause
clearTimeout(timer)
document.getElementById("wholepic").innerHTML="<a href='"+imglink[i_wholeimage]+"' target='_top'><img src='"+imgurl[i_wholeimage]+"' border=0></a>"
addmessage()
}
}
function addmessage() {
document.getElementById("messagebox").innerHTML=message[i_wholeimage]
var timer=setTimeout("changeimage()",standstill)
}
document.write("<div style='position:relative;width:"+slideshow_width+"px;height:"+(slideshow_height+messagebox_height)+"px;overflow-x:hidden'>")
document.write("<div id='wholepic' style='position:absolute;width:"+slideshow_width+"px;height:"+slideshow_height+"px;left:0px;top:0px'>")
document.write("<a href='"+imglink[0]+"' target='_top'><img src='"+imgurl[0]+"' border=0></a>")
document.write("</div>")
for (i=0;i<=y_slices-1;i++) {
for (ii=0;ii<=x_slices-1;ii++) {
document.write("<span id='span"+spancounter+"' style='position:absolute;left:-5000px'></span>")
spancounter++
}
}
document.write("<div id='messagebox' class='messagestyle' style='width:"+slideshow_width+"px;height:"+messagebox_height+"px;left:0px;top:"+slideshow_height+"px;'>")
document.write(message[0])
document.write("</div>")
document.write("</div>")
spancounter=0
window.onload=changeimage
// - End of JavaScript - -->
</script>