Free JavaScript slideshow with with lamellar effect

» 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 lamellar effect
Free JavaScript slideshow with impressive lamellar transition effect between the pictures. You may add as many pictures and lamellas as you like. Each picture can be linked to a separate URL and has a separate message. Easy 1-minute-configuration of speed, pictures, links and number of lamellas, ans text-style. Browsers: Internet Explorer 6x/7x/8x, Firefox 2x/3x, Opera 7x/8x/9x/10x/11x, Google Chrome 3x/4x/5x/6x/7x/8x/9x.

Rate this script on Hot Scripts

Configuration:

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

<style>

/* 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 attributes of the messagebox */
.messageboxstyle {
	background-color:black;
	opacity:0.5; /* Set the opacity for Firefox, Opera and Chrome (value may range from 0 - 1) */
	filter:alpha(opacity=50); /* Set the opacity for Internet Explorer (value may range from 1 - 100) */
	padding:3px;
}

/* Set the position of the messagebox */
.messagealignstyle {
	vertical-align:bottom; /* Set the vertical position (top or middle or bottom) */
	text-align:center; /* Set the gorizontal position (left or center or right) */
}

/* Set the font-attributes */
a.messagefontstyle {
	font-family:Arial;
	font-size:8pt;
	color:white;
	text-decoration:none;
}

</style>

// CREDITS:
// Slideshow with with lamellar effect
// 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

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

var picture= [

/////////////////////////////////////////////////////////////////////////
// START OF SCRIPT-CONFIGURATION
/////////////////////////////////////////////////////////////////////////

// Configure the URL (path) of the pictures, the corresponding messages and links below
// Add as many pictures a you like.
// You may embed simple HTML-Tags into the message
{
src : "sample1.jpg", // The URL (path) of picture
mes : "Are you Mary? <strong>More ...</strong>", // The message (comment), in this sample with embedded HTML-tag
url : "http://www.fabulant.com" // The link (where you go when you click on the message)
}, // Comma required

{
src : "sample2.jpg",
mes : "No this is Mary! <strong>More ...</strong>",
url : "http://www.fabulant.com"
}, // Comma required

{
src : "sample3.jpg",
mes : "This must be Tina. <strong>More ...</strong>",
url : "http://www.fabulant.com"
}, // Comma required

{
src : "sample4.jpg",
mes : "Let's ask granny! <strong>More ...</strong>",
url : "http://www.fabulant.com"
} // ATTENTION: the last bracket requires no comma!!!

]

// target of the picture-links ("_blank", "_top", "_self", "_parent" or "nameOfYourFrame")
var target_url="_blank"
	
// number of lamellas.
var x_slices=8

// width of slideshow (pixels)
var slideshow_width=200

// height of slideshow (pixels)
var slideshow_height=150

// pause beween the pictures (seconds)
var pause=2

/////////////////////////////////////////////////////////////////////////
// END OF SCRIPT-CONFIGURATION
/////////////////////////////////////////////////////////////////////////

// Do not edit below this line

var imgpreload=new Array()
for (iii=0;iii<=picture.length-1;iii++) {
	imgpreload[iii]=new Image()
	imgpreload[iii].src=picture[iii].src
}

var picturewidth
var pictureheight
var i_loop=0
var i_picture=0
var width_slice
var cliptop=0
var clipbottom
var i_clipright=1
var contentimg=""
var contentmes=""
pause=pause*1000

function initiate() {
	getcontent()
	for (i=0;i<=x_slices;i++) {
     	var thisinnersimg=eval("document.getElementById('s"+i+"')")
		var thisinnersmes=eval("document.getElementById('t"+i+"')")
		thisinnersimg.innerHTML=contentimg
		thisinnersmes.innerHTML=contentmes
		var thissimg=eval("document.getElementById('s"+i+"').style")
		thissimg.left=0+"px"
		thissimg.top=0+"px"
		var thissmes=eval("document.getElementById('t"+i+"').style")
		thissmes.left=0+"px"
		thissmes.top=0+"px"
  	}
	var thisspan=eval("document.getElementById('s0')")
	width_slice=Math.ceil(slideshow_width/x_slices)
	clipbottom=slideshow_height
	document.getElementById("whole").style.left=0+"px"
	document.getElementById("whole").style.top=0+"px"
	i_picture++
	openlamellar()
}

function getcontent() {
	contentimg="<table cellpadding=0 cellspacing=0 border=0 width="+slideshow_width+" height="+slideshow_height+"><tr><td width="+slideshow_width+" height="+slideshow_height+"'><img src="+picture[i_picture].src+" border=0 width="+slideshow_width+" height="+slideshow_height+"></td></tr></table>"
	contentmes="<table cellpadding=0 cellspacing=0 border=0 width="+slideshow_width+" height="+slideshow_height+"><tr valign=top><td class='messagealignstyle'><div class='messageboxstyle' style='width:"+slideshow_width+"px;'><a class='messagefontstyle' href='"+picture[i_picture].url+"' target='"+target_url+"'>"+picture[i_picture].mes+"</a></div></td></tr></table>"
}

function changepicture() {
	i_clipright=0
	clipleft=0
	clipright=0
	for (i=0;i<=x_slices;i++) {
       	var thiss=eval("document.getElementById('s"+i+"').style")
    	thiss.clip ="rect("+cliptop+"px "+clipright+"px "+clipbottom+"px "+clipleft+"px)"
	}
	if (i_picture>picture.length-1) {i_picture=0}
	getcontent()

for (i=0;i<=x_slices;i++) {
        var thisinnersimg=eval("document.getElementById('s"+i+"')") 
		var thisinnersmes=eval("document.getElementById('t"+i+"')")
        thisinnersimg.innerHTML=contentimg
		thisinnersmes.innerHTML=contentmes
    }
	i_picture++
	openlamellar()
}

document.write("<div class='borderandshadowstyle' style='position:relative;width:"+slideshow_width+"px;height:"+slideshow_height+"px;overflow:hidden'>")
document.write("<span id='whole' style='position:absolute;top:0px;left:0px;width:"+slideshow_width+"px;height:"+slideshow_height+"px;'></span>")
for (i=0;i<=x_slices;i++) {
 	document.write("<span id='s"+i+"' style='position:absolute;top:0px;left:0px;width:"+slideshow_width+"px;height:"+slideshow_height+"px;'></span>")
document.write("<span id='t"+i+"' style='position:absolute;top:0px;left:0px;width:"+slideshow_width+"px;height:"+slideshow_height+"px;'></span>")
}
document.write("</div>")
document.close()
window.onload=initiate

// - End of JavaScript - -->
</script>

Step 2: Go to the top lines of the STYLE-code and configure the MESSAGE-style.

Step 3: Go to the top lines of the SCRIPT-code and configure the urls of the pictures, the messages, the links the size of the slideshow and much more according the instructions.