Code: Alles auswählen
<!-------------------------------------------------------------------->
<!-- START OF THE MAGIC MAGNET SLIDESHOW CODE -->
<!-------------------------------------------------------------------->
<!----------------------------------------->
<!-- START OF STYLE-CONFIGURATION -->
<!----------------------------------------->
<style>
/* Set the horizontal alignement, background-color, transparency and padding for the comment-box */
.textboxstyle {
text-align:center;
background-color:#666666;
opacity:0.8; /* Set the transparency for Firefox, Opera and Google Chrome */
padding:1px;
}
/* Set the border and shadow around the slideshow */
.borderandshadowstyle {
/* shadow for Firefox */
-moz-box-shadow: 5px 5px 8px #818181;
/* shadow for Safari and Chrome */
-webkit-box-shadow: 5px 5px 8px #818181;
/* shadow for Opera */
box-shadow: 5px 5px 5px #818181;
/* border for all browsers */
border-style:solid;
border-width:1px;
border-color:white;
}
/* Set the vertical alignement for the comment-box (bottom, middle or top) */
.textverticalposition {
vertical-align:bottom;
}
/* Set the font-attributes for the comment-box */
a.textstyle {
font-family: Arial;
font-size:10pt;
font-weight:normal;
color:white;
text-decoration:none;
}
/* Set the font-attributes for the comment-box */
a.textstyle:hover {
font-family: Arial;
font-size:10pt;
font-weight:normal;
color:yellow;
text-decoration:none;
}
</style>
<!----------------------------------------->
<!-- END OF STYLE-CONFIGURATION -->
<!----------------------------------------->
<script>
<!-- Beginning of JavaScript -
// CREDITS:
// Magic Magnet Slideshow by Peter Gehrig
// Copyright (c) 2011 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 link to http://www.fabulant.com on the webpage
// where this script will be running.
var picture= [
////////////////////////////////////////////////////////////////////////////
// SCRIPT-CONFIGURATION STARTS HERE
////////////////////////////////////////////////////////////////////////////
// Set the URLs of images, the links and comments below
// Add as many pictures a you like
// Each image requires a block, as shown below:
// {
// imgsrc : "http://www.the-url.com/of/your/image.jpg",
// linkto : "http://www.where-you-go-if-you-click-on-the big-image.com",
// comment : "the comment below the image",
// }, each block ends with a comma (exception: the very last block)
{
imgsrc : "../../pics/300x180bluefish.jpg",
linkto : "http://www.hotscripts.com",
comment : "Let's go fishing » "
}, // comma required
{
imgsrc : "../../pics/300x180bonbons.jpg",
linkto : "http://www.hotscripts.com",
comment : "Not as sweet as you » "
}, // comma required
{
imgsrc : "../../pics/300x180butterfly.jpg",
linkto : "http://www.hotscripts.com",
comment : "Fly away, my little butterfly » "
} // NO comma required
]
// Standstill of the images (seconds)
var standstill=3
// Width of slideshow (pixels)
var slideshow_width=300
// Height of slideshow (pixels)
var slideshow_height=180
// Number of rows of pieces
var y_slices=8
// Number of pieces within one row
var x_slices=8
////////////////////////////////////////////////////////////////////////////
// SCRIPT-CONFIGURATION ENDS HERE
////////////////////////////////////////////////////////////////////////////
// Do not edit below this line
// 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
var imgpreload=new Array()
for (i=0;i<=picture.length-1;i++) {
imgpreload[i]=new Image()
imgpreload[i].src=picture[i].imgsrc
}
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=new Array()
var max_loop_total=0
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 fadestrength=100
standstill=1000*standstill
function initiate() {
var offleft=parseInt(document.getElementById('wholepic').offsetParent.offsetLeft)
var offtop=parseInt(document.getElementById('wholepic').offsetParent.offsetTop)
screenwidth=parseInt(document.body.clientWidth)
screenheight=parseInt(document.body.clientHeight)
width_slice=Math.ceil(imgwidth/x_slices)
height_slice=Math.ceil(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")
x_randompos=screenwidth*Math.random()-offleft-slideshow_width
y_randompos=screenheight*Math.random()-offtop-slideshow_height
thisspan.left=x_randompos+"px"
thisspan.top=y_randompos+"px"
max_loop[spancounter]=Math.sqrt((x_randompos*x_randompos)+(y_randompos*y_randompos))/20
if (max_loop[spancounter]>max_loop_total) {
max_loop_total=max_loop[spancounter]
}
thisspan.clip ="rect("+cliptop+"px "+clipright+"px "+clipbottom+"px "+clipleft+"px)"
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+"px"
thisspan.top=-5000+"px"
spancounter++
}
}
spancounter=0
if (i_image>picture.length-1) {i_image=0}
for (i=0;i<=y_slices-1;i++) {
for (ii=0;ii<=x_slices-1;ii++) {
var thisinnerspan=eval("document.getElementById('span"+spancounter+"')")
thisinnerspan.innerHTML="<a href='"+picture[i_image].linkto+"' target='_top'><img src='"+picture[i_image].imgsrc+"' 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_total) {
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[spancounter]-i_loop)
y_step[spancounter]=(y_finalpos-parseInt(thisspan.top))/(max_loop[spancounter]-i_loop)
if (Math.abs(parseInt(thisspan.left)+x_step[spancounter])<max_loop_total) {
thisspan.left=0+"px"
}
else {
thisspan.left=parseInt(thisspan.left)+x_step[spancounter]+"px"
}
if (Math.abs(parseInt(thisspan.top)+y_step[spancounter])<max_loop_total) {
thisspan.top=0+"px"
}
else {
thisspan.top=parseInt(thisspan.top)+y_step[spancounter]+"px"
}
spancounter++
}
}
if (fadestrength>=0) {
if (document.all) {
var thisfilter=eval("roofmessage")
thisfilter.filters.alpha.opacity=Math.round(fadestrength)
}
else {
var thiss=eval("document.getElementById('roofmessage').style")
thiss.opacity=(fadestrength/100)
}
fadestrength-=5
}
i_loop++
var timer=setTimeout("explode_IE()",pause)
}
else {
spancounter=0
clearTimeout(timer)
document.getElementById("wholepic").innerHTML="<img src='"+picture[i_wholeimage].imgsrc+"' border=0>"
addmessage()
}
}
function addmessage() {
document.getElementById("messagebox").innerHTML="<a class='textstyle' href='"+picture[i_wholeimage].linkto+"' target='_top'>"+picture[i_wholeimage].comment+"</a>"
messageopacityin()
}
function messageopacityin() {
if (fadestrength<=100) {
if (document.all) {
var thisfilter=eval("roofmessage")
thisfilter.filters.alpha.opacity=Math.round(fadestrength)
}
else {
var thiss=eval("document.getElementById('roofmessage').style")
thiss.opacity=(fadestrength/100)
}
fadestrength+=10
var timer=setTimeout("messageopacityin()",50)
}
else {
clearTimeout(timer)
fadestrength=100
var timer=setTimeout("changeimage()",standstill)
}
}
document.write("<div id='roofdiv' class='borderandshadowstyle' style='position:relative;width:"+slideshow_width+"px;height:"+slideshow_height+"px;'>")
document.write("<div id='wholepic' style='position:absolute;width:"+slideshow_width+"px;height:"+slideshow_height+"px;left:0px;top:0px'>")
document.write("<img src='"+picture[0].imgsrc+"' border=0>")
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='roofmessage' style='position:absolute;top:0px;left:0px;width:"+slideshow_width+"px;height:"+slideshow_height+"px;overflow:hidden;filter:alpha(opacity=100);'><table cellpadding=0 cellspacing=0 width="+slideshow_width+" height="+slideshow_height+"><tr><td class='textverticalposition'><div id='messagebox' class='textboxstyle' style='width:"+slideshow_width+"px;'><a class='textstyle' href='"+picture[0].linkto+"' target='_top'>"+picture[0].comment+"</a></div></td></tr></table>")
document.write("</div>")
document.write("</div>")
spancounter=0
window.onload=changeimage
// - End of JavaScript - -->
</script>
<!-------------------------------------------------------------------->
<!-- END OF THE MAGIC MAGNET SLIDESHOW CODE -->
<!-------------------------------------------------------------------->