SLIDESHOW WITH ZOOM-IN-OUT ANIMATION

[Hape]

DHTML Slideshow mit tollem Übergangseffekt. Jedes Bild hat einen eigenen Link. Einfache Konfiguration von Bildern, Links und Geschwindigkeit.

Code: Alles auswählen

<style>
.textstyle {
	font-family:Arial;
	font-size: 9pt;
	color:#FFFFFF;
	background-color:#AAAAAA;
	text-align:center;
}
</style>

<script>
<!-- Beginning of JavaScript -

// CREDITS:
// Free JavaScript slideshow with zoom-in-zoom-out-animation
// 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.

var imgname=new Array()
var imglink=new Array()
var message=new Array()

// URL of images
imgname[0]="imgzoom1_114.jpg"
imgname[1]="imgzoom2_114.jpg"
imgname[2]="imgzoom3_114.jpg"

// Links corresponding to the images above
imglink[0]="http://www.fabulant.com"
imglink[1]="http://www.fabulant.com"
imglink[2]="http:/www.fabulant.com"

// Messages corresponding to the images above
message[0]="My beach is my life"
message[1]="Welcome to my island"
message[2]="Flower power is anywhere"

// Width of images (pixels)
var imgwidth=256

// Height of images (pixels)
var imgheight=164

// Height of textbox (pixels)
var textheight=17

// Pause between the pictures (higher value = higher pause)
var pause=2000

// DO NOT EDIT BELOW THIS LINE ////////////////////////////////////////////

var imgpreload=new Array()
for (i=0;i<=imgname.length-1;i++) {
	imgpreload[i]=new Image()
	imgpreload[i].src=imgname[i]
}
var pause=2000
var speed=20
var step=20
var i_loop=0
var i_image=0

var pos_left=0
var pos_top=0

function stretchimage() {
	if (i_loop<=imgwidth) {
		imgcontainer.innerHTML="<a href='"+imglink[i_image]+"' target='_blank'><img width='"+i_loop+"' src='"+imgname[i_image]+"' border='0'></a>"
		i_loop=i_loop+step
		var timer=setTimeout("stretchimage()",speed)
  	}
	else {
		clearTimeout(timer)
		imgcontainer.innerHTML="<a href='"+imglink[i_image]+"' target='_blank'><img width='"+imgwidth+"' src='"+imgname[i_image]+"' border='0'></a>"
		textcontainer.innerHTML=message[i_image]
		textcontainer.style.visibility="visible"
		var timer=setTimeout("shrinkimage()",pause)
	}
}

function shrinkimage() {
	if (i_loop>-step) {
		textcontainer.style.visibility="hidden"
		imgcontainer.innerHTML="<a href='"+imglink[i_image]+"' target='_blank'><img width='"+i_loop+"' src='"+imgname[i_image]+"' border='0'></a>"
		i_loop=i_loop-step
		var timer=setTimeout("shrinkimage()",speed)
  	}
	else {
		clearTimeout(timer)
		changeimage()
	}
}

function changeimage() {
	i_loop=0
	i_image++
	if (i_image>imgname.length-1) {i_image=0}
   	var timer=setTimeout("stretchimage()",pause)
}

function initiate() {
	document.getElementById('imgcontainer').style.left=pos_left
	document.getElementById('imgcontainer').style.top=pos_top
	changeimage()
}

document.write('<div id="roof" style="position:relative;width:'+imgwidth+';height:'+imgheight+'">')
document.write('<div id="imgcontainer" style="position:absolute;top:0px;left:0px;width:'+imgwidth+'px;height:'+imgheight+'px"></div>')
document.write('<div id="textcontainer" class="textstyle" style="position:absolute;top:'+imgheight+'px;left:0px;width:'+imgwidth+'px;height:'+textheight+'px;visibility:hidden"></div>')
document.write('</div>')
window.onload=onLoad=stretchimage

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

Hier dazu die Demoseite: Slideshow-Zoom-in-out