Slideshow with zoom-in-zoom-out-animation

JavaScriptBank

Bannato
26 Nov 2009
86
0
0
Slideshow with great transitoon effect. Each image has a JavaScript link of its own. Netscape-users will see a simple image-rotation-ef... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

Step 1: Copy & Paste HTML code below in your BODY section
HTML
Codice:
<BODY onload=initiate()>
<SCRIPT>
<!-- Beginning of JavaScript -
// Slideshow with zoom-in-zoom-out-animation

// CONFIGURATION:
// 1.	Create your images (gif or jpg). They should have the same width. 
// 		Put those images in the same directory as the HTML-file. 
//		You can add as many images as you like.
// 2.	Copy the script-block and paste it into head-section of your HTML-file..
// 3. 	Copy the span-blocks with the id "imgcontainer" into the body-section 
//      of your HTML-file.
// 4.	Insert 'onLoad="initiate()"' into the body tag.
// 5.	Configure the varibales below.
		
// The width of your images (pixels). All pictures should have the same width.
var imgwidth=256

// The horizontal and vertical position of the images (pixels). 
var pos_left=10
var pos_top=10

// The name of your images. You may add as many images as you like.
var imgname=new Array()
imgname[0]="logojs.gif"
imgname[1]="photo3.jpg"
imgname[2]="photo4.jpg"

// Where should those images be linked to? 
// Add an URL for each image.
// If you don't want to add an URL just write '#' instead of the URL.
var imgurl=new Array()
imgurl[0]="http://javascriptbank.com"
imgurl[1]="http://javascriptbank.com"
imgurl[2]="http://javascriptbank.com"

// This block will preload your images. Do not edit this block.
var imgpreload=new Array()
for (i=0;i<=imgname.length-1;i++) {
	imgpreload[i]=new Image()
	imgpreload[i].src=imgname[i]
}

// Standstill-time between the images (microseconds).
var pause=2000

// Speed of the stretching and shrinking effect. More means slower.
var speed=20

// This variable also affects the speed (the length of the step between each inmage-frame measured in pixels). More means faster.
var step=10

// Do not edit the variables below
var i_loop=0
var i_image=0

function stretchimage() {
	if (i_loop<=imgwidth) {
		if (document.all) {
			imgcontainer.innerHTML="<a href='"+imgurl[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)
		var timer=setTimeout("shrinkimage()",pause)
	}
}

function shrinkimage() {
	if (i_loop>-step) {
		if (document.all) {
			imgcontainer.innerHTML="<a href='"+imgurl[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() {
	if (document.all) {
		document.all.imgcontainer.style.posLeft=pos_left
		document.all.imgcontainer.style.posTop=pos_top
		changeimage()
	}
	if (document.layers) {
		document.imgcontainer.left=pos_left
		document.imgcontainer.top=pos_top
		rotatenetscape()
	}
}

function rotatenetscape() {
	document.imgcontainer.document.write("<a href='"+imgurl[i_image]+"' target='_blank'><img src='"+imgname[i_image]+"' border='0'></a>")	
	document.imgcontainer.document.close()	
	i_image++
	if (i_image>imgname.length-1) {i_image=0}
   	var timer=setTimeout("rotatenetscape()",pause*2)
}

document.write("<div id=\"roof\" style=\"position:relative\">")

document.write("<div id=\"imgcontainer\" style=\"position:absolute;top:0px;left:0px\"></div>")
document.write("</div>")

// - End of JavaScript - -->

</SCRIPT>
</BODY>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->






 
Discussioni simili
Autore Titolo Forum Risposte Data
F [PHP] Slideshow video PHP 0
Cosina Aggiungere pulsante pause/play a slideshow Javascript 0
ANDREA20 [Javascript] Slideshow Gallery Javascript 0
Andrea_Ventura [HTML] Creare un DIV con slideshow HTML e CSS 5
I [HTML] Slideshow si sovrappone a <div> HTML e CSS 14
I [CSS3]Problema slideshow multiple HTML e CSS 2
M [HTML] Slideshow immagini con effetto FADE HTML e CSS 2
V Creare slideshow con immagini esterne Ajax 1
dakko96 slideshow doppia jQuery 0
G Aiuto slideshow joomla3x Joomla 4
R Slideshow di immagini in HTML5 HTML e CSS 1
S Slideshow con jquery Javascript 2
S Slideshow immagini automatica senza specificare il file immagine PHP 7
I Slideshow HTML e CSS 4
L SlideShow in js Javascript 1
A problema slideshow con visualizzazione mobile HTML e CSS 6
F Plugin Metaslider (Slideshow Wordpress) WordPress 1
C slideshow numero immagini Javascript 5
Devil-94 javascript slideshow Javascript 1
D Come far ripartire una gif quando si rivisita la pagina dello slideshow WordPress 1
Emix Slideshow con div sovrapposto HTML e CSS 5
J Slideshow e gallerie manuali HTML e CSS 19
G Slideshow e Posizionamento DIV HTML e CSS 8
F Codice Random Javascript con slideshow Javascript 3
S Problemi con slideshow HTML e CSS 0
M Simple Slideshow jQuery 1
R Errore Slideshow - "Attenzione lo script non risponde" Joomla 1
R Uso Immagini per Slideshow Joomla 0
R Immagini con Link (modulo e slideshow) Joomla 0
C aggiungere link foto slideshow HTML e CSS 2
K Aiuto per slideshow HTML e CSS 4
L Slideshow non cambia le foto Flash 7
G problema caricamento condizionale slideshow FlexSlider Javascript 0
M [RISOLTO]Fermare slideshow immagini al passaggio del mouse. jQuery 3
L jquery slideshow con anteprima jQuery 10
F Slideshow Javascript 0
P Slideshow orrizontale con link WordPress 0
M sezione news del mio sito collegata a uno slideshow nella home page PHP 0
P Bug IE 7/8 slideshow inserito in pagina html5 Parallax HTML e CSS 4
P Bug IE 7 slideshow inserito in pagina html5 Parallax Javascript 1
M Come dire al mio slideshow di non scrollare all'infinito! jQuery 23
F aiuto slideshow Javascript 0
F personalizzazione slideshow Javascript 0
L Banner e slideshow Flash 1
P Slideshow per sito in ASP Classic ASP 0
J creazione di un slideshow con pagine html HTML e CSS 3
T conflitto tra due slideshow Javascript 3
T inserimento url su immagini in slideshow Javascript 4
Frank10 slideshow immagini in wordpress WordPress 2
W Adattare immagini slideshow a riquadro predefinito Webdesign e Grafica 0

Discussioni simili