Das Skript benötigt kein jQuery und kein HTML5-Canvas und kein Add-On, um diesen Crossbrowser-Effekt zu erzeugen. Die Größe und Deckkraft des gespiegelten Bildes (glänzender Bereich) lässt sich leicht auf Ihre Bedürfnisse einstellen. Jedes Bild kann verlinkt und kommentiert werden.
Code: Alles auswählen
<!-------------------------------------------------------------------->
<!-- START OF THE CODE FOR THE SLIDESHOW WITH MIRRORED IMAGES -->
<!-------------------------------------------------------------------->
<!-- CONFIGURATION OF MESSAGE-STYLE AND MESSAGEBOXSTYLE STARTS HERE -->
<style>
.messageboxstyle{
text-align:center;
background-color:#000000;
}
a.messagestyle{
font-family:Arial;
font-size:11px;
color:white;
text-decoration:none;
}
</style>
<!-- CONFIGURATION OF MESSAGE-STYLE AND MESSAGEBOXSTYLE STARTS HERE -->
<script>
<!-- Beginning of JavaScript -
// CREDITS:
// Slideshow with mirrored image as shadow 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.
// 11/25/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.
////////////////////////////////////////////////////////////////////////////
// SCRIPT-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
// If you don't want to add a link enter "#"! See sample below
var imglink=new Array("http://www.hotscripts.com", "#", "http://www.google.com", "http://www.hotscripts.com")
// Standstill of images (seconds)
var standstill=2
// Width of images (pixels)
// All images should have the same width
var image_width=200
// Height of images (pixels)
// All images should have the same height
var image_height=150
// Set the opacity for the text. Values may range from 0 to 1 (high value = low opacity)
var op_text=0.5
// Set the opacity of the shadow. Values may range from 0 to 10 (high value = high opacity)
var op_basic=2
// Set the vertical squeeze of the shadow. Values may range from 1.1 to 2 (low value = big squeeze)
var squeeze_shadow=1.5
// Set the angle of the shadow (low value = more angle)
// If you don't want an angle set the value to 100000
// Values may range from 1 to 20
var shift_shadow=2
////////////////////////////////////////////////////////////////////////////
// SCRIPT-CONFIGURATION ENDS HERE
////////////////////////////////////////////////////////////////////////////
// Do not change the variables below
var x_finalpos=0
var y_finalpos=0
var y_slices=image_height
var x_slices=1
standstill*=1000
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 i_img=0
var width_slice=image_width
var height_slice=1
var cliptop=0
var clipbottom=height_slice
var clipleft=0
var clipright=image_width
var spancounter=0
var op=0
var op_less=0
function inite() {
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+"')")
thisspan.innerHTML="<img src='"+imgurl[0]+"' border=0>"
spancounter++
}
}
document.getElementById('wholepic').innerHTML="<a href='"+imglink[i_img]+"' target='_top' class='messagestyle'><img src='"+imgurl[0]+"' border=0></a>"
document.getElementById('wholemessage').innerHTML="<table cellpadding=0 cellspacing=2 class='messageboxstyle'><tr><td><a href='"+imglink[0]+"' target='_top' class='messagestyle' >"+message[0]+"</a></td></tr></table>"
placemirrorimg()
}
function placemirrorimg() {
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")
op+=1/image_height/op_basic
if (document.all) {
var thisfilter=eval("document.getElementById('span"+spancounter+"')")
thisfilter.filters.alpha.opacity=Math.round(op*100)
}
else {
thisspan.opacity=op
}
thisspan.top=((squeeze_shadow*image_height)-(squeeze_shadow*spancounter)-1)+"px"
thisspan.left=((image_height/shift_shadow-spancounter/shift_shadow))+"px"
thisspan.clip ="rect("+cliptop+"px "+clipright+"px "+clipbottom+"px "+clipleft+"px)"
cliptop+=height_slice
clipbottom+=height_slice
spancounter++
}
}
showimg()
}
function showimg() {
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.visibility="visible"
spancounter++
}
}
document.getElementById('wholepic').style.visibility="visible"
var tmr=setTimeout("hideimg()",standstill)
}
function hideimg() {
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.visibility="hidden"
spancounter++
}
}
document.getElementById('wholepic').style.visibility="hidden"
changeimg()
}
function changeimg() {
spancounter=0
i_img++
if (i_img>=imgurl.length) {
i_img=0
}
document.getElementById('wholepic').innerHTML="<a href='"+imglink[i_img]+"' target='_top' class='messagestyle'><img src='"+imgurl[i_img]+"' border=0></a>"
document.getElementById('wholemessage').innerHTML="<table cellpadding=0 cellspacing=2 class='messageboxstyle'><tr><td><a href='"+imglink[i_img]+"' target='_top' class='messagestyle' >"+message[i_img]+"</a></td></tr></table>"
for (i=0;i<=y_slices-1;i++) {
for (ii=0;ii<=x_slices-1;ii++) {
var thisspan=eval("document.getElementById('span"+spancounter+"')")
thisspan.innerHTML="<img src='"+imgurl[i_img]+"' border=0>"
spancounter++
}
}
spancounter--
showimg()
}
document.write("<div style='position:relative;width:"+image_width+"px;height:"+(squeeze_shadow*image_height)+"px;'>")
document.write("<div id='wholepic' style='position:absolute;width:"+image_width+"px;height:"+image_height+"px;left:0px;top:0px;filter:alpha(opacity=100);opacity:1'>")
document.write("</div>")
document.write("<div id='wholemessage' style='position:absolute;left:0px;top:0px;filter:alpha(opacity="+(100*op_text)+");opacity:"+op_text+"'>")
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;visibility:hidden;filter:alpha(opacity=0);opacity:0'></span>")
document.write("<span id='text"+spancounter+"' style='position:absolute;left:-5000px;visibility:hidden;filter:alpha(opacity=0);opacity:0'></span>")
spancounter++
}
}
document.write("</div>")
spancounter=0
window.onload=inite
// - End of JavaScript - -->
</script>
<!-------------------------------------------------------------------->
<!-- END OF THE CODE FOR THE SLIDESHOW WITH MIRRORED IMAGES -->
<!-------------------------------------------------------------------->