<!---------------------------------->
<!-- START OF SLIDESHOW SCRIPT -->
<!---------------------------------->

<!-- START OF STYLE CONFIGURATION -->
<style>
.commentstyle{
	/* style attributes for the comments below the pictures */
	font-family:Arial;
	font-size:9pt;
	color:brown;
	vertical-align:middle;
	text-align:center;
	padding:5px;
}

.thumbnailstyle{
	/* style attributes for the thumbnails */
	margin:3px;
	width:67px;
	border-style:solid;
	border-width:1px;
	border-color:white;
	
	/* shadow for Firefox */
	-moz-box-shadow: 2px 2px 3px #AAAAAA;

	/* shadow for Safari and Chrome */
	-webkit-box-shadow: 2px 2px 3px #AAAAAA;

	/* shadow for Opera */
	box-shadow: 2px 2px 3px #AAAAAA;
	
	/* shadow for Internet Explorer */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#AAAAAA');
}

.slideshowstyle{
	/* style attributes for the slideshow-box */
	/* ATTENTION: width and height must be set within the script */
	overflow:hidden;
	border-style:solid;
	border-width:1px;
	border-color:white;
	background-color:#EEEEEE;
	background-image: url(tile.jpg);
	margin:3px;

	/* shadow for Firefox */
	-moz-box-shadow: 5px 5px 8px #AAAAAA;

	/* shadow for Safari and Chrome */
	-webkit-box-shadow: 5px 5px 8px #AAAAAA;

	/* shadow for Opera */
	box-shadow: 5px 5px 5px #AAAAAA;

	/* shadow for Internet Explorer */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#AAAAAA');
}
</style>
<!-- END OF STYLE CONFIGURATION -->

<script>
// CREDITS:
// Slideshow with thumbnail gallery and zoom-effects
// by Peter Gehrig 
// Copyright (c) 2011 Peter Gehrig. All rights reserved.

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

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

// Set the URLs of images, the links and comments.
// 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"
}, // comma required

{
imgsrc : "../../pics/300x180castle.jpg",
linkto : "http://www.hotscripts.com",
comment : "My castle is my home"
}, // comma required

{
imgsrc : "../../pics/300x180fruitshop.jpg",
linkto : "http://www.hotscripts.com",
comment : "Are fruits really healthy for you? "
}, // comma required

{
imgsrc : "../../pics/300x180herbstwald.jpg",
linkto : "http://www.hotscripts.com",
comment : "Did you see Robin Hood behind the trees?"
}, // comma required

{
imgsrc : "../../pics/300x180lemons.jpg",
linkto : "http://www.hotscripts.com",
comment : "I like lemons"
}, // comma required

{
imgsrc : "../../pics/300x180tree.jpg",
linkto : "http://www.hotscripts.com",
comment : "The truth about trees "
} // ATTENTION: the last entry requires NO final comma

]

// pause (seconds)
var stillstand=2

// speed of zooming. Higher value means faster zooming
var zoomspeed=20

// width of slideshow (px). Width of slideshow and width of images should be identical
var slideshowwidth=300

// height of slideshow (px). Height of slideshow and height of images should be identical
var slideshowheight=180

// Shall thumbnails be displayed? Enter "yes" or "no"
var show_thumbnails="yes"

/////////////////////////////////////////////
// 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].imgsrc
}

var positionleft=0
var positiontop=0
var timer
var marginright=0
var i_fadestrength=0
var i_images=0
var step=1
var content_image
var content_text
var imageboxwidth=0
var imageboxheight=0
var imagebasicwidth=0
var imagebasicheight=0
var moveon=true
var timer
var timerpause
var stopid
stillstand*=1000

function setimage() {
	if (i_images>=picture.length) {i_images=0}
	content_image="<a href='"+picture[i_images].linkto+"'><img border=0 name='newpic' src='"+picture[i_images].imgsrc+"'></a>"
	content_text=picture[i_images].comment
	document.getElementById('imagebox').innerHTML=content_image
	document.getElementById('textbox').innerHTML=content_text
	imagebasicwidth=document.newpic.width
	imagebasicheight=document.newpic.height
	if (show_thumbnails=="yes"){
		if (document.all) {
			for (i=0;i<=picture.length-1;i++) {
				document.getElementById(i).filters.alpha.opacity=30
			}
		}
		else {
			for (i=0;i<=picture.length-1;i++) {
				document.getElementById(i).style.opacity=0.3
			}
		}
	}
	timer=setTimeout("startenlarge()",50)
}

function startenlarge() {
	if (moveon) {
		if (imageboxwidth<imagebasicwidth) {
			content_image="<a href='"+picture[i_images].linkto+"'><img border=0 name='newpic' src='"+picture[i_images].imgsrc+"' width="+imageboxwidth+"></a>"
			document.getElementById('imagebox').innerHTML=content_image
			imageboxwidth=document.newpic.width
			imageboxheight=document.newpic.height
			if (document.all) {
				document.getElementById('imagebox').filters.alpha.opacity=Math.floor(i_fadestrength)
				document.getElementById('textbox').filters.alpha.opacity=Math.floor(i_fadestrength)
				if (show_thumbnails=="yes"){
					document.getElementById(i_images).filters.alpha.opacity=Math.floor(i_fadestrength)
				}
		
			}
			else {
				document.getElementById('imagebox').style.opacity=(i_fadestrength)/100
				document.getElementById('textbox').style.opacity=(i_fadestrength)/100
				if (show_thumbnails=="yes"){
					document.getElementById(i_images).style.opacity=(i_fadestrength)/100
				}
			}
			document.getElementById('imagebox').style.left=(slideshowwidth/2-imageboxwidth/2)+"px"
			document.getElementById('imagebox').style.top=(slideshowheight/2-imageboxheight/2)+"px"
			document.getElementById('imagebox').style.overflowX="hidden"
			document.getElementById('imagebox').style.visibility="visible"
			step+=0.5
			i_fadestrength+=(100/(slideshowwidth/zoomspeed))
			imageboxwidth+=zoomspeed
			timer=setTimeout("startenlarge()",50)
		}
		else {
			clearTimeout(timer)
			pauseimage()
		}
	}
	else {
		clearTimeout(timer)
		stopanimation()
	}
}

function pauseimage() {
	if (moveon) {
		content_image="<a href='"+picture[i_images].linkto+"'><img border=0 name='newpic' src='"+picture[i_images].imgsrc+"' width="+imagebasicwidth+" height="+imagebasicheight+"></a>"

		document.getElementById('imagebox').style.left=0+"px"
		document.getElementById('imagebox').style.top=0+"px"
		document.getElementById('imagebox').innerHTML=content_image
		if (document.all) {
			document.getElementById('imagebox').filters.alpha.opacity=100
			document.getElementById('textbox').filters.alpha.opacity=100
			if (show_thumbnails=="yes"){
				document.getElementById(i_images).filters.alpha.opacity=100
			}
		}
		else {
			document.getElementById('imagebox').style.opacity=1
			document.getElementById('textbox').style.opacity=1
			if (show_thumbnails=="yes"){
				document.getElementById(i_images).style.opacity=1
			}
		}
		i_fadestrength=0
		timer=setTimeout("finishenlarge()",stillstand)
	}
	else {
		clearTimeout(timer)
		stopanimation()
	}
}

function finishenlarge() {
	if (moveon) {
		if (i_fadestrength<=100) {		
			content_image="<a href='"+picture[i_images].linkto+"'><img border=0 name='newpic' src='"+picture[i_images].imgsrc+"' width="+imageboxwidth+"></a>"
			document.getElementById('imagebox').innerHTML=content_image
			imageboxwidth=document.newpic.width
			imageboxheight=document.newpic.height
			if (document.all) {
				document.getElementById('imagebox').filters.alpha.opacity=Math.floor(100-i_fadestrength)
				document.getElementById('textbox').filters.alpha.opacity=Math.floor(100-i_fadestrength)
			}
			else {
				document.getElementById('imagebox').style.opacity=(100-i_fadestrength)/100
				document.getElementById('textbox').style.opacity=(100-i_fadestrength)/100
			}
			document.getElementById('imagebox').style.left=(slideshowwidth/2-imageboxwidth/2)+"px"
			document.getElementById('imagebox').style.top=(slideshowheight/2-imageboxheight/2)+"px"
			document.getElementById('imagebox').style.overflow="hidden"
			document.getElementById('imagebox').style.visibility="visible"
			i_fadestrength+=5
			imageboxwidth+=zoomspeed
			timer=setTimeout("finishenlarge()",20)
		}
		else {
			clearTimeout(timer)
			i_fadestrength=0;
			step=1;
			i_images++
			if (i_images>=picture.length) {i_images=0}
			imageboxwidth=0
			timer=setTimeout("setimage()",50)
		}
	}
	else {
		clearTimeout(timer)
		stopanimation()
	}
}

function onmsover(thisimg) {
	stopid=thisimg.id
	if (show_thumbnails=="yes"){
		if (document.all) {
			for (i=0;i<=picture.length-1;i++) {
				document.getElementById(i).filters.alpha.opacity=30
			}
			document.getElementById(stopid).filters.alpha.opacity=100
		}
		else {
			for (i=0;i<=picture.length-1;i++) {
				document.getElementById(i).style.opacity=0.3
			}
			document.getElementById(stopid).style.opacity=1
		}
	}
	moveon=false
}

function onmsout(thisimg) {
	moveon=true
	i_images=thisimg.id
	clearTimeout(timer)
	setimage()
}

function stopanimation() {
	content_image="<a href='"+picture[stopid].linkto+"'><img border=0 name='newpic' src='"+picture[stopid].imgsrc+"' width="+imagebasicwidth+" height="+imagebasicheight+"></a>"
	document.getElementById('imagebox').style.left=0+"px"
	document.getElementById('imagebox').style.top=0+"px"
	document.getElementById('imagebox').innerHTML=content_image
	content_text=picture[stopid].comment
	document.getElementById('textbox').innerHTML=content_text
	if (document.all) {
		document.getElementById('imagebox').filters.alpha.opacity=100
		document.getElementById('textbox').filters.alpha.opacity=100
	}
	else {
		document.getElementById('imagebox').style.opacity=1
		document.getElementById('textbox').style.opacity=1
	}
	i_fadestrength=0
}

if (show_thumbnails=="yes") {
	document.write("<DIV id='roofthumbnails'  style='position:relative;width:"+slideshowwidth+"px;'>")
	for (i=0;i<=picture.length-1;i++) {
		document.write("<img class='thumbnailstyle' onmouseover='onmsover(this)' onmouseout='onmsout(this)' id='"+i+"' style='filter:alpha(opacity=50') src='"+picture[i].imgsrc+"'>")
	}
	document.write("</DIV>")
}

document.write("<DIV id='roofimages' class='slideshowstyle' style='position:relative;width:"+slideshowwidth+"px;height:"+slideshowheight+"px;overflow:hidden'>")
if (document.all) {
	document.write("<DIV id='imagebox' style='position:absolute;left:0px;top:0px;filter:alpha(opacity=0);'></DIV>")
}
else {
	document.write("<DIV id='imagebox' style='position:absolute;opacity:1;'></DIV>")
}

document.write("</DIV>")

document.write("<DIV style='position:relative;width:"+slideshowwidth+"px;'>")

document.write("<DIV><table style='width:"+slideshowwidth+"px;'><tr><td class='commentstyle' id='textbox' style='filter:alpha(opacity=0);'></td></tr></table></DIV>")

document.write("<DIV><table style='width:"+slideshowwidth+"px;'><tr><td class='commentstyle' id='textbox' style='filter:alpha(opacity=0);'></td></tr></table></DIV>")

document.write("</DIV>")


onload=setimage
</script>
<!---------------------------------->
<!-- END OF SLIDESHOW SCRIPT -->
<!---------------------------------->

http://www.fabulant.com/downloadcenter/imgfadezoom/imgfadezoom.html

Free JavaScript slideshow with thumbnail gallery, zoom-in-effect, zoom-out-effect and transparency-effect (opacity). Add as many pictures as you like. Each picture can be linked and commented. The thumbnail gallery can be displayed or hidden. True copy-and-paste installation. Most of the design can be set with CSS (within the style-tags). Works with Internet Explorer 5x/6x/7x/8x/9x, Firefox 3x/4x, Opera 7x/8x/9x/10x/11x, Google Chrome 4x/5x/6x/7x/8x/9x.

Slideshow with thumbnail gallery and zoom-effects

javascript, script, flash, download, free, web

JavaScript