Javascrip-Funktion in inkludierter PHP-Seite ****t nicht

celiadee

Mitglied
Liebe Leute,
habe folgendes Problem:
Habe mir für die Startseite meiner HP eine Bildwechsler mit Javascript gebastelt
(Script aus dem Netz, modifiziert).

Das Script sieht so aus:

HTML:
<script type="text/javascript">
	function imageLine()
	{
		var	checkInterval = null,
			imageLineInterval = null,
			currentImage = -1;
		/*
			Variablen die man in
			verschiedenen Funktionen benötigt
		*/
		images = new Array(
				'image1.jpg',
				'image2.jpg',
				'image3.jpg',
				'image4.jpg',
				'image5.jpg',
				'image6.jpg',
				'image7.jpg',
				'image8.jpg',
				'image9.jpg',
				'image10.jpg'
				// Diese Bilder sind die standard Windows XP Bilder
			);
		// Alle Bilder die angezeigt werden sollen
		
		loadingImages = new Array();
		// Dieses Array enthält später alle Objekte
		
		this.run = function()
		{
			checkInterval = window.setInterval('this.checkIfLoaded();', 100);
			// Alle 100 Millisekunden prüfen ob alle Bilder geladen sind
			for(i = 0;i < images.length;i++)
			{
				image = images[i];
				loadingImages.push(new Image);
				loadingImages[i].src = image;
			}
			/*
				Alle Images in dem Array einzeln Durchgehen.
				Das Array für die Objekte mit den Objekten füllen.
				Dem neuen Objekt die Url des momentanen Bildes geben.
			*/
		}
		
		this.checkIfLoaded = function()
		{
			allLoaded = true;
			for(i = 0;i < loadingImages.length;i++)
			{
				loadingImage = loadingImages[i];
				if(!loadingImage.complete)
					allLoaded = false;
			}
			/*
				Alle Objekte durchgehen.
				Prüfen ob das aktuelle Objekt / Bild geladen ist.
				Falls nicht dann die Variable zur Prüfung auf false setzen
			*/
			if(allLoaded)
			{
				// Wenn alle Objekte / Bilder geladen sind

				// Die Interval für das Prüfen löschen
				window.clearInterval(checkInterval);
				// Das erste Bild anzeigen
				this.startImageLine();
				// Die Funktion für das Bilder wechseln alle 10 Sekunden ausführen
				window.setInterval('this.startImageLine();', 5000);
			}
		}
		
		this.startImageLine = function()
		{
			this.showImage();
			// Bild anzeigen
			if(currentImage == (loadingImages.length - 1))
				currentImage = 0;
			else
				currentImage += 1;
			/*
				Aktuelles Bild um eins hochzählen.
				Sollte das momentane Bild genau so groß sein,
				wie das Array dann wieder beim ersten anfangen.
			*/
			
			element = document.getElementById('imageline');
			// Element für die Bilderanzeige
			element.style.height = loadingImages[currentImage].height + 'px';
			element.style.width = loadingImages[currentImage].width + 'px';
			// Dem Element die Breite und Höhe des momentanen Bildes geben
			element.style.backgroundImage = 'url(' + loadingImages[currentImage].src + ')';
			// Dem Element das aktuelle Bild als Hintergrundbild setzen
			
			window.setTimeout('this.hideImage();', 4500);
			// Das Bild in 9,5 Sekunden ausblenden
		}
		
		this.hideImage = function()
		{
			element = document.getElementById('imageline');
			for(i = 0;i <= 100;i++)
				window.setTimeout('element.style.filter = "Alpha(opacity=' + (100 - i) + ')"; element.style.MozOpacity = ' + (1 - i / 100) + '; element.style.opacity = ' + (1 - i / 100) + ';', i * 5);
			// Von 0 bis 100 (Prozent)
			// Das i * 5 dient dazu, dass das Ausblenden nicht zu schnell geht
		}
		
		this.showImage = function()
		{
			element = document.getElementById('imageline');
			for(i = 0;i <= 100;i++)
				window.setTimeout('element.style.filter = "Alpha(opacity=' + i + ')"; element.style.MozOpacity = ' + i / 100 + '; element.style.opacity = ' +  i / 100 + ';', i * 5);
			// Hier das selbe wie bei hideImage
		}
		
		this.run();
	}
	
	window.onload = function()
	{
		imageLine();
	}
</script>


Ich habe eine index.php in die sämtliche Seiten meiner HP includiert werden, so auch die Seite 'hello.php, in der der Bildwechsel stattfinden soll.

PHP:
switch($_GET['seite']) {

  case "files/hello":
     include('files/hello.php');
  break;
?>


Offline funktioniert die Javascript-Funktion wunder bar, wenn sie in hello.php geschrieben steht.
Soll hello.php online dann aber in die index.php includiert werden, dann funktioniert es nicht.

Was ich schon versucht habe:

Javascript in die index.php bis ......this.run.();}
und in der hello.php dann
HTML:
	window.onload = function()
	{
		imageLine();
	}


Aber leider niente....
wer weiss
Rat?

Danke und lieben Gruß
celiadee
 
Versuch es doch mal anders rum, in der index.php den Aufruf von onload und deiner Funktion und den Rest in die Incudierte datei.
Ansonsten würd ich es so machen:
- Javascript in eigene Datei
- wenn die hello.php in die index.php includiert wird, im Headbereich des Dokuments die Javascript datei includen
 
Hallo Maniac,

danke für die schnelle Antwort. Mein Code war soweit richtig. Habe festgestellt dass der Pfad zu den Bildern falsch war.

Alles paletti!
Grüße, Celiadee
 
Hallo noch mal,

wie gesagt, der Code ist richtig und alles funktioniert.
Allerdings ist mir aufgefallen, dass beim Aufrufen der Seite bzw. Einsetzen des Bildwechslers, das erste Bild so komisch blinkt. Das muss am Laden liegen. Kann man da etwas verbessern?
hier der Link: http://christinaundwalter.com
Bin dankbar für Anregungen.
Liebe Grüße
Celiadee
 
In welchem Browser kommt das denn vor?
Konnte ich eben im FF 3.6.17 nicht nachvollziehen.
 
hallo Maniac,
danke für Deine Hilfe! Im Safari 5.0.5,
bei FF 3.5.7 tritt es nur manchmal auf, kann man vernachlässigen.
(Sollte wohl mal wieder meinen FF updaten, was? :-D)
 
Zurück