Fun of JavaScript: free slideshow with zoom animation

» 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

Free JavaScript slideshow with zoom animation
Free JavaScript Slideshow with zoom-in and zoom-out transition effect between the pictures. You may add as many images as you like. Each picture may have a message of its own. And each picture can be linked to a separate URL. Easy 1-minute-configuration of pictures, messages and links. Browsers: Internet Explorer 5x/6x/7x/8x, Firefox 2x/3x/4x, Opera 7x/8x/9x/10x, Google Chrome 3x/4x/5x.

Configuration:

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

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

Step 2: Go to the style zone (top of the code) and configure the textstyle.

Step 3: Go to the top of the script and configure pictures and links of the slideshow.