Free JavaScript slideshow with shiny area made of mirrored images

» home
» contact
» terms of use

FREE SCRIPTS

» new
» text
» image
» utility
» background
» animation
» date/time

FREE ONLINE TOOLS

» code generators
» text animator
» drawing animator
» color animator
» slideshow factory
» javascript speed test

FREE BASIC SNIPLETS

» alert box
» image: multi-rollover
» pop-up: centering
» more

FREE'N'CRAZY

» realtime death counter
» eyeQ
» fun ticker

RECOMMENDED LINKS

» www.dynamicdrive.com
» www.hotscripts.com

Slideshow with glossy area made of mirrored images
This free copy and paste JavaScript mirrors your images in order to add an elegant shiny area to your slideshow. And best of all: the script requires no jQuery and no HTML5-canvas to create this crossbrowser effect. The size and opacity of the mirrored image (shadow) can easily be set to your needs. Each slide can be linked and commented. Works with Internet Explorer 5x/6x/7x/8x, Firefox 2x/3x, Opera 7x/8x/9x/10x, Goggle Chrome 3x/4x/5x/6x/7x/8x.

Rate this script

Configuration:

Step 1: Open your webpage and paste the following code anywhere between <body> and </body>:

<style>
.messageboxstyle{
	text-align:center;
	background-color:#000000;
}
a.messagestyle{
	font-family:Arial;
	font-size:11px;
	color:white;
	text-decoration:none;
}
</style>

// 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

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>

Step 2: Go inside the <style>-tags and configure the messagebox-style and message-style.

Step 3: Go to the top-lines of the script and configure the URL of images, messages, links, width, height and much more according to the instructions.