FOTOBOEK 2

JavaScripts knippen en plakken

Op deze website vind je javascripts die je door eenvoudig knippen en plakken aan jouw site kunt toevoegen.

Home CSS DHTML Forum E-mail Sitezoeker Links

FOTOBOEK 2

1. Kopieer deze code en plaats ze in het HEAD-gedeelte van je pagina:

<script type="text/javascript">
// dit kun je wijzigen
	var Beeldbreedte=116;
	var Beeldhoogte=118;
	var Rand=true;
	var Randkleur="silver";
	var Snelheid=15;
	var Pauze=1500; // 1 seconde = 1000
	var Verticaal=0;	
	var Achteruit=false;
	var Automatisch=true;
// hier plaats je de afbeeldingen
	Afbeeldingen=new Array(
	
		"../pics/foto1.jpg","#","",
		"../pics/foto2.jpg","#","",
		"../pics/foto3.jpg","#","",
		"../pics/foto4.jpg","#","" // geen komma na laatste regel!
		);
		
// Hieronder niets wijzigen
	var BLI,BMI,BRI,BTI;
	var HOEK=0,ActBeeld,VolgBeeld,MAXB,RICHTING=true,RICHTINGgewijzigd=false;
	var AFB=Afbeeldingen,AFBV=AFB.length,RichtingVlag=false;
	var B_MSz,HALT=Automatisch?false:true;PreBeeld=new Array(AFBV);

function fotoboek(){
		if(document.getElementById){
			for(var i=0;i<AFBV;i+=3){PreBeeld[i]=new Image();PreBeeld[i].src=AFB[i]}
			BoekDiv=document.getElementById("Boek");
			BLI=document.createElement("img");BoekDiv.appendChild(BLI);	
			BRI=document.createElement("img");BoekDiv.appendChild(BRI);
			BMI=document.createElement("img");BoekDiv.appendChild(BMI);
			BLI.style.position=BMI.style.position=BRI.style.position="absolute";
			BLI.style.zIndex=BRI.style.zIndex=0;BMI.style.zIndex=1;
			BLI.style.top=BLI.style.left=BMI.style.top=BRI.style.top=0+"px";
			BMI.style.left=(Achteruit?0:Beeldbreedte+1)+"px";
			BRI.style.left=Beeldbreedte+1+"px";
			BLI.style.height=BMI.style.height=BRI.style.height=Beeldhoogte+"px";
			BLI.style.width=BMI.style.width=BRI.style.width=Beeldbreedte+"px";
			if(Rand){
				BLI.style.borderStyle=BMI.style.borderStyle=BRI.style.borderStyle="solid";
				BLI.style.borderWidth=BMI.style.borderWidth=BRI.style.borderWidth=1+"px";
				BLI.style.borderColor=BMI.style.borderColor=BRI.style.borderColor=Randkleur}
			BLI.src=Achteruit?AFB[AFBV-12]:AFB[0];
			BLI.lnk=Achteruit?AFB[AFBV-11]:AFB[1];
			BLI.trgt=Achteruit?AFB[AFBV-10]:AFB[2];
			BMI.src=Achteruit?AFB[AFBV-6]:AFB[3];
			BMI.lnk=Achteruit?AFB[AFBV-5]:AFB[4];
			BMI.trgt=Achteruit?AFB[AFBV-4]:AFB[5];
			BRI.src=Achteruit?AFB[AFBV-3]:AFB[9];
			BRI.lnk=Achteruit?AFB[AFBV-2]:AFB[10];
			BRI.trgt=Achteruit?AFB[AFBV-1]:AFB[11];
			ActBeeld=Achteruit?AFBV-9:6;
			VolgBeeld=Achteruit?AFBV-18:15;
			BLI.onclick=BMI.onclick=BRI.onclick=BeeldLink;
			BLI.onmouseover=BMI.onmouseover=BRI.onmouseover=STOP;
			BLI.onmouseout=BMI.onmouseout=BRI.onmouseout=START;
			AFBEELDINGEN()}}

function AFBEELDINGEN(){
		if(!HALT){
			if(RichtingVlag)WijzigRichting();
			B_MSz=Math.abs(Math.round(Math.cos(HOEK)*Beeldbreedte));
			MidOffset=!Achteruit?RICHTING?Beeldbreedte+1:Beeldbreedte-B_MSz:
				RICHTING?Beeldbreedte-B_MSz:Beeldbreedte+1;
			BMI.style.left=MidOffset+"px";
			BMI.style.width=B_MSz+"px";
			HOEK+=Snelheid/720*Math.PI;
			if(HOEK>=Math.PI/2&&RICHTING){
				RICHTING=false;
				BMI.src=AFB[ActBeeld];BMI.lnk=AFB[ActBeeld+1];BMI.trgt=AFB[ActBeeld+2];
				ActBeeld+=(Achteruit?-6:6);
				if(ActBeeld>=AFBV)ActBeeld-=AFBV;
				if(ActBeeld<0)ActBeeld+=AFBV}
			if(HOEK>=Math.PI){
				RICHTING=true;
				if(!Achteruit){
					BTI=BLI;BLI=BMI;BMI=BTI;
					BMI.style.left=Beeldbreedte+1+"px";			
					BMI.src=BRI.src;	BMI.lnk=BRI.lnk;BMI.trgt=BRI.trgt}
				else{	BTI=BRI;BRI=BMI;BMI=BTI;
					BMI.style.left=0+"px";			
					BMI.src=BLI.src;BMI.lnk=BLI.lnk;BMI.trgt=BLI.trgt}
				setTimeout("PAUZEREN()",Pauze)}
			else setTimeout("AFBEELDINGEN()",50)}
		else setTimeout("AFBEELDINGEN()",50)}

function PAUZEREN(){
			if(!Achteruit){
				BRI.src=AFB[VolgBeeld];	BRI.lnk=AFB[VolgBeeld+1];BRI.trgt=AFB[VolgBeeld+2];
				BLI.style.zIndex=1}
			else {BLI.src=AFB[VolgBeeld];BLI.lnk=AFB[VolgBeeld+1];BLI.trgt=AFB[VolgBeeld+2];
				BRI.style.zIndex=1}
			BMI.style.zIndex=2;HOEK=0;
			VolgBeeld+=(Achteruit?-6:6);
			if(VolgBeeld>=AFBV&&!Achteruit)VolgBeeld-=AFBV;
			if(VolgBeeld<0&&Achteruit)VolgBeeld+=AFBV;
		if(!Automatisch&&!RICHTINGgewijzigd)HALT=true;RICHTINGgewijzigd=false;
		setTimeout("AFBEELDINGEN()",50)}

function WijzigRichting(){
		HALT=true;
		Achteruit=Achteruit?false:true;RICHTING=RICHTING?false:true;
		HOEK=Math.PI-HOEK;
		RichtingVlag=HALT=false;
		ActBeeld+=(Achteruit?-9:9);
		if(ActBeeld>=AFBV)ActBeeld-=AFBV;
		if(ActBeeld<0)ActBeeld+=AFBV;
		VolgBeeld+=(Achteruit?-21:21);
		if(VolgBeeld>=AFBV)VolgBeeld-=AFBV;
		if(VolgBeeld<0)VolgBeeld+=AFBV;
		RICHTINGgewijzigd=true}
	
	function Wijzig_Richting(){HALT=false;RichtingVlag=true}
	function Ga_Achteruit(){HALT=false;if(!Achteruit)Wijzig_Richting()}
	function Ga_Vooruit(){HALT=false;if(Achteruit)Wijzig_Richting()}
	function Wissel_Auto_of_Manueel(){HALT=false;Automatisch=Automatisch?false:true}
	function Maak_Auto(){HALT=false;Automatisch=true}
	function Maak_Manueel(){Automatisch=false}
	function STOP(){if(Automatisch)HALT=true;this.style.cursor=this.lnk?"pointer":"default"}
	function START(){if(Automatisch)HALT=false}
	function BeeldLink(){var FotoboekFrame;
		if(this.lnk){
			if(!this.trgt)location.href=this.lnk;
			else if(this.trgt=="top")top.location.href=this.lnk;
			else if(this.trgt=="new")window.open(this.lnk);
			else if(FotoboekFrame=parent.frames[this.trgt])FotoboekFrame.location.href=this.lnk;
			else location.href=this.lnk}}
</script>

2. Kopieer het figuurtje hieronder en sla het op als "transparent.gif". Het is onzichtbaar, maar je hebt het nodig om plaats te voorzien voor jouw fotoboek. De breedte van het transparante beeldje stel je daarna in op de volledige breedte van jouw fotoboek.

3. In het BODY-gedeelte van jouw pagina voeg je - op de plaats waar je wenst dat het fotoboek verschijnt - in:

<div id="Boek" style="position:relative">
<img src="../pics/transparent.gif" width="235" height="120">
</div>

   Automatisch bladeren is standaard ingesteld, wat hieronder staat kun je weglaten.
   Enkel indien je de keuzes voor manuele bediening en richting wijzigen wenst, voeg je het volgende toe:

<form>
<input type="button" value="Automatisch" onclick="Maak_Auto()">
<input type="button" value="<" onclick="Ga_Achteruit()">
<input type="button" value="Manueel" onclick="Maak_Manueel()">
<input type="button" value=">" onclick="Ga_Vooruit()">
</form>

4. Plaats binnenin de <BODY>-tag: <body onload="fotoboek()">

Copyright: Het internet is van iedereen, de volledige inhoud van deze site kan door iedereen vrij gebruikt worden.