Problem mit der Positionierung/ "Fader mit Autostart"

gedankenpolizei · 10.06.2011, 18:57

Hallo

vielleicht kann mir in folgender Sache geholfen werden:

Auf der Suche nach einer einfachen Slideshow stieß ich auf

http://aktuell.de.selfhtml.org/artik.../framework.htm

"Fader mit Autostart"

Ich habe das Script zwar erfolgreich anwenden können,
jedoch entsteht das neu-einblendende Bilder immer unter dem Zuvorigen,
und wird dann "nach oben verschoben", sodass unterhalb diesem wieder das nächste Bild sich langsam einblendet.

Was muss im Script Wie geändert werden, damit die Ausgabe der Bilder aussieht wie:

http://www.floss-design.de/

also die Bilder übereinander gewechselt werden.

Ich würde mich sehr freuen, wenn sich ein JavaScript-Experte schnell die Angelegenheit anschaut

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>Fader mit Autostart</title>
	<script type="text/javascript">

		var FaderFramework = {

			oldWinOnLoad: false,
			inits: new Array(),
			faders: new Object(),

			init: function (einstellungen) {
				var fader;

				if (this.inits) {
					this.inits[this.inits.length] = einstellungen;

				} else {
					fader = new this.Fader(einstellungen);

					if (fader != false && !this.faders[fader.id]) {
						this.faders[fader.id] = fader;
						fader.next();
					}
				}
			},

			start: function () {
				this.oldWinOnLoad = window.onload;

				window.onload = function () {
					if (typeof(FaderFramework.oldWinOnLoad) == "function") {
						FaderFramework.oldWinOnLoad();
					}
					FaderFramework.onload();
				};
			},

			onload: function () {
				var i, fader, e = document.createElement("link");
				e.type = "text/css";
				e.rel = "stylesheet";
				e.href = "fader-framework/fader-framework.css";
				document.getElementsByTagName("head")[0].appendChild(e);

				fader = this.inits;
				delete this.inits;

				for (i = 0; i < fader.length; i++) {
					this.init(fader[i]);
				}
			},

			Fader: function (einstellungen) {
				if (!einstellungen.id || !document.getElementById(einstellungen.id)
					|| FaderFramework.faders[einstellungen.id]
					|| einstellungen.images.length < 2) {

					return new Boolean(false);
				}

				var i, original = document.getElementById(einstellungen.id);

				this.id = einstellungen.id;
				this.images = new Array();
				this.counter = false;

				this.element = document.createElement("span");
				this.element.className = "fader";
				original.parentNode.replaceChild(this.element, original);

				for (i = 0; i < einstellungen.images.length; i++) {
					this.images[i] = document.createElement("img");
					this.images[i].src = einstellungen.images[i];
					this.images[i].alt = "Bild";

					if (i == 0) {
						this.element.appendChild(this.images[i]);
					}
				}

				this.fade = function (step) {
					var fader = this, imgs = this.element.getElementsByTagName("img");

					step = step || 0;

					imgs[1].style.opacity = step/100;
					imgs[1].style.filter = "alpha(opacity=" + step + ")"; // IE?

					step = step + 0.5;

					if (step < 100) {
						window.setTimeout(function () { fader.fade(step); }, 1);
					} else {
						imgs[1].className = "";
						this.element.removeChild(imgs[0]);
						window.setTimeout(function () { fader.next(); }, 2000);
					}
				};

				this.next = function () {
					this.counter = (this.counter < this.images.length -1) ? this.counter +1 : 0;

					this.element.appendChild(this.images[this.counter]);
					this.images[this.counter].className = "next";
					this.fade();
				};
			}
		};

		FaderFramework.start();

	</script>
	<script type="text/javascript">
		FaderFramework.init({
			id: "fader1",
			images: [
				"bilder/bilderschau/a_0001.jpg", 
				"bilder/bilderschau/a_0002.jpg", 
				"bilder/bilderschau/a_0003.jpg", 
				"bilder/bilderschau/a_0004.jpg", 
				"bilder/bilderschau/a_0005.jpg", 
				"bilder/bilderschau/a_0006.jpg"
			]
		});
	</script>
</head><body>

<img src="bilder/bilderschau/a_0001.jpg" alt="Fliegen" id="fader1">

</body></html>

ChrisB · 10.06.2011, 19:04

Bitte beachten:
http://www.php.de/php-einsteiger/675...sumfragen.html (Inserate, Konzepte und Meinungsumfragen)
http://www.php.de/php-einsteiger/543...produkten.html (Fachfragen zu bestimmten Softwareprodukten)
http://www.php.de/javascript-ajax-un...uncements.html
http://www.php.de/php-einsteiger/489...nsammlung.html (Lerne Grundlagen | Quellensammlung)

Wir sind hier keine Fehler-Ausbesserungs-Service.

Wenn du hier Hilfe bekommen willst, dann musst du schon etwas mehr Eigeninitiative zeigen.

gedankenpolizei · 10.06.2011, 19:24

welch "nette" Begrüßung mit solch einem "belehrsamen" Standardspruch

ich hatte bereits über CSS versucht, das bzw. die Bilder auszurichten,
jedoch bringt dies nichts, weil die Ausrichtung" innerhalb des Scriptes geschehen muss.
Meine Kenntnisse über JavaScript sind verschwindend gering, weshalb ich mich an ein Forum wende; zumal es für den einen oder anderen, der sucht, ebenfalls hilfreich ist, hier ein einfaches, effektives Script vorzufinden, dass dann für den Eigenbedarf übernommen werden kann.

ChrisB · 10.06.2011, 19:29

Zitat:

Zitat von gedankenpolizei

Meine Kenntnisse über JavaScript sind verschwindend gering

Damit bleibt's bei: Lerne Grundlagen.

*close*

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Problem mit Ajax - Session Problem	halskrause	PHP Tipps 2009	10	12.01.2010 02:27
[Erledigt] Problem mit Mehrsprachigkeit	Sniper_Kotaro	PHP Tipps 2009	2	16.12.2009 11:47
Problem beim Download Management	mistermint	PHP Tipps 2009	8	24.10.2009 11:34
Umlaut Problem	nokieone	PHP Tipps 2009	7	16.10.2009 19:30
Problem mit Basedir in PhP	cmuch05	Datenbanken	9	08.01.2009 14:17
[Erledigt] Problem: PHP Selbe Datei mehr als 1 Mal	soulan	PHP Tipps 2008	13	28.11.2008 22:51
Problem Upload mehrere Dateien und schreiben in DB	Lapje	PHP Tipps 2008	1	22.10.2008 13:12
utf8 Problem (Daten aus DB auslesen)	go1denboy	PHP Tipps 2008	1	23.09.2008 12:19
Problem mit swfobjects	R4v3r	JavaScript, Ajax und mehr	8	21.09.2008 14:17
Timestamp problem	phrain	PHP Tipps 2008	2	04.04.2008 09:41
ie css problem mit absoluter positionierung	obi	HTML, Usability und Barrierefreiheit	6	10.05.2007 17:30
datensätze defekt oder problem mit dem einlesen?	Ministry	Datenbanken	4	06.07.2006 18:42
problem!!!		PHP Tipps 2006	6	08.02.2006 11:06
Smarty und PHP-Skript Problem		PHP Tipps 2004-2	2	03.12.2004 22:27
Problem mit alter JavaScript-Funktion	woods	PHP Tipps 2004	1	13.08.2004 13:34


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

10.06.2011, 19:04
ChrisB Moderator¹ Registriert seit: 28.03.2010 Beiträge: 7.470 PHP-Kenntnisse: Fortgeschritten	Bitte beachten: http://www.php.de/php-einsteiger/675...sumfragen.html (Inserate, Konzepte und Meinungsumfragen) http://www.php.de/php-einsteiger/543...produkten.html (Fachfragen zu bestimmten Softwareprodukten) http://www.php.de/javascript-ajax-un...uncements.html http://www.php.de/php-einsteiger/489...nsammlung.html (Lerne Grundlagen \| Quellensammlung) Wir sind hier keine Fehler-Ausbesserungs-Service. Wenn du hier Hilfe bekommen willst, dann musst du schon etwas mehr Eigeninitiative zeigen. __________________ RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?

10.06.2011, 19:24
gedankenpolizei Gesperrt Registriert seit: 06.06.2011 Beiträge: 3 PHP-Kenntnisse: Anfänger	welch "nette" Begrüßung mit solch einem "belehrsamen" Standardspruch ich hatte bereits über CSS versucht, das bzw. die Bilder auszurichten, jedoch bringt dies nichts, weil die Ausrichtung" innerhalb des Scriptes geschehen muss. Meine Kenntnisse über JavaScript sind verschwindend gering, weshalb ich mich an ein Forum wende; zumal es für den einen oder anderen, der sucht, ebenfalls hilfreich ist, hier ein einfaches, effektives Script vorzufinden, dass dann für den Eigenbedarf übernommen werden kann. Geändert von gedankenpolizei (10.06.2011 um 19:29 Uhr).