Script Slideshow Linkabili su scripting di WebLink

P3 - Slideshow Linkabili.

Funziona con il Browser:

firefox

Safari

opera

internet explorer

Chrome

Crediti: Peter Gehrig
Name: info@24fun.ch
Website: Sito Sparito dalla rete

Descrizione: Rotazione di immagini cliccabili:

Passo 1 :

Selezionare tutto il codice cliccando sul pulsante grigio, quindi posizionatevi sul testo evidenziato, adoperate il tasto destro del mouse per l'operazione di copia ed incolla, non vi rimane che trasferire il tutto nella vostra pagina web, in questo caso nel punto esatto in cui volete creare l'effetto all'interno dei tags: <body> e </body>

<table width="480"><tr><td>
<script type="text/javascript">
<!-- 
// CREDITS:
// Gum Slideshow 3.11
// By Peter Gehrig
// Copyright (c) 2004 Peter Gehrig and Urs Dudli. All rights reserved.
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at http://Sito Sparito dalla rete
// info@24fun.com
// 1/31/2004
// Prelevato ed illustrato su http://www.web-link.it

// IMPORTANT:
// If you add this script to a script-library or script-archive
// you have to add a highly visible link to
// http://Sito Sparito dalla rete on the webpage
// where this script will be featured

// CONFIGURATION:
// Go to http://Sito Sparito dalla rete
// and create your own slideshow
// with our new Slideshow Fayctory.

var slideurl=new Array()
var slidecomment=new Array()
var slidelink=new Array()
var slidetarget=new Array()

///////////////////////////////////////////////////////////////////////////
// EDIT-ZONE STARTS HERE
//////////////////////////////////////////////////////////////////////////

// Set the URLs of your slides (images)
slideurl[0]="img1.jpg"
slideurl[1]="img2.jpg"
slideurl[2]="img3.jpg"

// Add a link for each slide
// If you don't want to link a slide type "#" instead (see middle-sample below)
slidelink[0]="http://weblink.altervista.org"
slidelink[1]="http://www.ilmioforum.com"
slidelink[2]="http://www.web-link.it"

// Add a target for each link
// Allowed values are: "_blank", "_top", "_parent", "_self" or the name of a frame
slidetarget[0]="_blank"
slidetarget[1]="_blank"
slidetarget[2]="_top"

// Add a comment for each slide
slidecomment[0]="Sito Weblink senza frames in php!"
slidecomment[1]="Il forum di Web-Link!"
slidecomment[2]="Il sito di Web-Link in html!"

// Set the font for the comments
var slidefont="Arial"

// Set the fontcolor for the comments
var slidefontcolor="black"

// Set the fontsize for the comments (HTML-values ranging form 1 - 6)
var slidefontsize=5

// Set the width of the pictures (pixels)
var slidewidth=400

// Set the height of the pictures (pixels)
var slideheight=60

// Set the pause between the pictures (seconds)
var pause=3

///////////////////////////////////////////////////////////////////////////
// EDIT-ZONE ENDS HERE
//////////////////////////////////////////////////////////////////////////

var preloadedimages=new Array()
for (i=0;i<slideurl.length;i++){
	preloadedimages[i]=new Image()
	preloadedimages[i].src=slideurl[i]
}

var ns4=document.layers?1:0
var ns6=document.getElementById&&!document.all?1:0 
var ie=document.all?1:0

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

var pos_left=0
var pos_top=0
var speed=20
var step=10
var i_loop=0
var i_image1=0
var i_image2=1
var i_space=""
var all_space=""
var max_space=20
var content=""
var i_slide=0
pause*=1000

function stretchimage() {
	if (i_loop<=slidewidth) {
		if (ie) {
			imgcontainer1.innerHTML="<a href='"+slidelink[i_image1]+"' target='"+slidetarget[i_image1]+"'><img width='"+i_loop+"' height='"+slideheight+"' src='"+slideurl[i_image1]+"' border='0'></a>"
			document.all.imgcontainer2.style.posLeft=document.all.imgcontainer1.style.posLeft+i_loop
			
			imgcontainer2.innerHTML="<a href='"+slidelink[i_image2]+"' target='"+slidetarget[i_image2]+"'><img width='"+(slidewidth-i_loop)+"' height='"+slideheight+"' src='"+slideurl[i_image2]+"' border='0'></a>"
		}
		if (ns6) {
			document.getElementById('imgcontainer1').innerHTML="<a href='"+slidelink[i_image1]+"' target='"+slidetarget[i_image1]+"'><img width='"+i_loop+"' height='"+slideheight+"' src='"+slideurl[i_image1]+"' border='0'></a>"
			document.getElementById('imgcontainer2').style.left=parseInt(document.getElementById('imgcontainer1').style.left)+i_loop
			
			document.getElementById('imgcontainer2').innerHTML="<a href='"+slidelink[i_image2]+"' target='"+slidetarget[i_image2]+"'><img width='"+(slidewidth-i_loop)+"' height='"+slideheight+"' src='"+slideurl[i_image2]+"' border='0'></a>"
		}
		i_loop=i_loop+step
		var timer=setTimeout("stretchimage()",speed)
  	}
	else {
		clearTimeout(timer)
		var imgcontent="<a href='"+slidelink[i_image1]+"' target='"+slidetarget[i_image1]+"'><img width='"+i_loop+"' height='"+slideheight+"' src='"+slideurl[i_image1]+"' border='0'></a><br><font face='"+slidefont+"' size="+slidefontsize+" color='"+slidefontcolor+"'>"+slidecomment[i_image1]+"</font>"
		if (ie) {
			imgcontainer1.innerHTML=imgcontent
			document.all.imgcontainer2.style.posLeft=document.all.imgcontainer1.style.posLeft+i_loop	
			imgcontainer2.innerHTML=""
		}
		if (ns6) {
			document.getElementById('imgcontainer1').innerHTML=imgcontent
	document.getElementById('imgcontainer2').style.left=parseInt(document.getElementById('imgcontainer1').style.left)+i_loop	
			document.getElementById('imgcontainer2').innerHTML=""
		
		}
		changeimage()
	}
}

function changeimage() {
	i_loop=0
	i_image1++
	if (i_image1>slideurl.length-1) {i_image1=0}
	i_image2=i_image1-1
	if (i_image2>slideurl.length-1) {i_image2=0}
	if (i_image2<0) {i_image2=slideurl.length-1}
	if (ie) {
		document.all.imgcontainer2.style.posLeft=document.all.imgcontainer1.style.posLeft
	}
	if (ns6) {
		document.getElementById('imgcontainer2').style.left=parseInt(document.getElementById('imgcontainer2').style.left)
	}
   	var timer=setTimeout("stretchimage()",pause)
}

function simpleslideshow() {
	i_slide++
	if (i_slide>=slideurl.length) {i_slide=0}
	document.slideimage.src=preloadedimages[i_slide].src
	simpleslideshowcomment()
	var fadetimer=setTimeout("simpleslideshow()",pause)
}

function simpleslideshowjump() {
	if (slidetarget[i_slide]=="_self") {
		document.location.href=slidelink[i_slide]
	} 
	else if (slidetarget[i_slide]=="_blank") {
		codepopup=window.open(slidelink[i_slide], "code", "status=yes,location=yes,toolbar=yes,menubar=yes,resizable=yes,scrollbars=yes,width=780,height=580,top=10,left=10");
	} 
	else if (slidetarget[i_slide]=="_top") {
		top.location.href=slidelink[i_slide]
	} 
	
	else if (slidetarget[i_slide]=="_parent") {
		parent.location.href=slidelink[i_slide]
	} 
	else {
		var jumpto=eval("parent."+slidetarget[i_slide])
		jumpto.location.href=slidelink[i_slide]
	}
}

if (ie || ns6) {
	var slideh=slideheight+30
	document.write("<div style=\"position:relative;width:"+slidewidth+"px;height:"+slideh+"px;overflow:hidden\">")
	document.write("<div id=\"imgcontainer1\" style=\"position:absolute;width:"+slidewidth+"px;height:"+slideh+"px;top:0px;left:0px\"><img src=\""+slideurl[0]+"\"></div>")
		document.write("<div id=\"imgcontainer2\" style=\"position:absolute;width:"+slidewidth+"px;height:"+slideh+"px;top:0px;left:0px\"><img src=\""+slideurl[1]+"\"></div>")
	document.write("</div>")
	window.onload=stretchimage
}
else {
	document.write("<a href=\"javascript:simpleslideshowjump()\"><img name=\"slideimage\" src=\""+slideurl[0]+"\" border=0></a>")
	window.onload=simpleslideshow
}
// end -->
</script>
</td></tr></table>

Note :

E' possibile configurare la velocità, le dimensioni, i colori, il tipo di font il numero di banner ed altro ancora. Nelle prime righe di codice dello script trovate le variabili:

var slidefont="Arial" = tipo di font usato per la scritta sotto al banner.

var slidefontcolor="black" = colore della scritta sotto al banner.

var slidefontsize=5 = dimensione del font usato per la scritta sotto al banner.

var slidewidth=400 = dimensione in pixel larghezza banner.

var slideheight=60 = dimensione in pixle altezza banner.

var pause=3 = pausa in secondi fra un banenr e l'altro.

Risultano invece abbastanza evidenti i blocchi di codice sul quale inserire il nome delle immagini, siano esse di tipo gif o jpg, il relativo URL dal quale essere reperite, l'url che sarà richiamto al clik ed il target, destinazione di apertura links.

Elenco completo degli script.

Se avete domande da fare potete scrivere sul forum di supporto , gratuito e aperto a tutti.

JavaScript P3