einzelne Bilder aus XML File anzeigen

C

ciro

Grünschnabel
Hallo,

ich arbeite gerade an einer Bildergallerie, wobei die Bilder dynamisch aus einem XML File


Code: 
 <?xml version"1.0"?>
<Bilder>
<Bild1 name="paolo1" link="http://www.t-online.de" daten="mein Text" nummer="1" format="10X13" pic="bilder/BILD1.jpg"></Bild1>
<Bild2 name="paolo2" link="http://www.t-online.de" daten="mein Text" nummer="2" format="10X13" pic="bilder/BILD2.jpg"></Bild2>
<Bild3 name="paolo3" link="www.alice.it" daten="mein Text" nummer="3" format="10X13" pic="bilder/BILD3.jpg"></Bild3>
<Bild4 name="paolo4" link="www.alice.it" daten="mein Text" nummer="4" format="10X13" pic="bilder/BILD3.jpg"></Bild4>
</Bilder>

geladen werden. Im Moment werden aber die Bilder einzeln (mit vor und zurück) angezeigt.

Ich möchte aber auch Thumbnails anzeigen lassen (also die einzelnen childNodes).
Wie mache ich das am besten?
Für jegliche Hilfestellung bedanke ich mich

Ciro
 
Hi,

das kommt darauf an, wie Dein Code im Moment aussieht (sinnvoll wäre es, wenn Du die .fla posten würdest, denn es gibt mehrere Möglichkeiten, die auch von der Filmstruktur abhängen).

Prinzpiell durchläufst Du alle Knoten des XML-Objekt, und legst für jeden einen MovieClip an, in den Du das jeweilige Bild lädst.

Mit der Forensuche und den Begriffen "Galerie, "Slideshow" und "Thumbnail" solltest Du einige Beispiele von mir dazu finden.

Gruß
.
 
Hallo Tobias,
inzwischen, habe ich es geschafft die Thumbs anzeigen zu lassen.

mit sicherheit nicht so elegant baer es läuft

AS
Code: 
// XML-Objekt erzeugen (Bezeichner: mein_xml)
mein_xml = new XML();

// Störende Leerzeichen ignorieren
mein_xml.ignoreWhite = true;

// XML-Datei einlesen 
mein_xml.load("bilddaten.xml");

// Lesevorgang 
mein_xml.onLoad = function(status) {
	if (status && this.loaded) {
		anzahl = mein_xml.firstChild.childNodes.length;
		geladen = true;
		aktbild = 0;
		ladeBild(aktBild);
	}
};
myPhoto = new XML();
myPhoto.ignoreWhite = true;
myPhoto.onLoad = function(success) {
	//portfolioTag = this.firstChild;
	numimages = this.firstChild.childNodes.length;
	spacingx = 75;
	spacingy = 75;
		
	for (i=0;i<numimages;i++) {
		this.picHolder = this.firstChild.childNodes[i];
		this.thumbHolder = thumbnails.createEmptyMovieClip("thumbnail"+i,i);
		this.thumbLoader._y = i*spacingx;
		this.thumbLoader
		this.thumbLoader = this.thumbHolder.createEmptyMovieClip("thumbnail_image", 0);
		this.thumbLoader.loadMovie(this.picHolder.attributes.klein);
		this.thumbHolder.title = this.picHolder.attributes.title;
		this.thumbHolder.bild_mc = this.picHolder.attributes.pic;
		this.thumbHolder.onRelease = function() {
			bild_mc.loadMovie(this.bild_mc);
			title_txt.text = this.title;
			bildnr_txt.text = bildkleinnr;
		};
	}
};
myPhoto.load("bilddaten.xml");
	

// Funktion, welche die Daten der XML-Datei verarbeitet
function ladeBild(paktBild) {
	status_mc._visible = 1;
	bild = mein_xml.firstChild.childNodes[paktBild].attributes.pic;
	bildklein = mein_xml.firstChild.childNodes[paktBild].attributes.klein;
	bildkleinnr = mein_xml.firstChild.childNodes[paktBild].attributes.kleinnr;
	bildname = mein_xml.firstChild.childNodes[paktBild].attributes.name;
	bilddaten = mein_xml.firstChild.childNodes[paktBild].attributes.daten;
	bildformat = mein_xml.firstChild.childNodes[paktBild].attributes.format;
	bildnummer = mein_xml.firstChild.childNodes[paktBild].attributes.nummer;
	bildlink = mein_xml.firstChild.childNodes[paktBild].attributes.link;
	loadMovie(mein_xml.firstChild.childNodes[paktBild].attributes.pic, this.bild_mc);
	titel_txt.text = bildname;
	daten_txt.text = bilddaten;
	format_txt.text = bildformat;
	bildnr_txt.text = bildnummer;
	link_txt.text = bildlink;
	gehezu.link = mein_xml.firstChild.childNodes[paktBild].attributes.link;
	gehezu.onRelease = function() {
		getURL(this.link, "_blank");

	};
}


// Weiter Schalter
weiter_btn.onRelease = function() {
	if (geladen && aktbild<anzahl-1) {
		aktbild++;
		ladeBild(aktBild);
	}
};

// Zurück Schalter
zuruck_btn.onRelease = function() {
	if (geladen && aktbild>0) {
		aktbild--;
		ladeBild(aktBild);
	}
};

XML
Code: 
<?xml version"1.0"?>
<Bilder>
<Bild name="paolo1" link="http://www.t-online.de" daten="mein Text" nummer="1" format="10X13" pic="bilder/BILD1.jpg" klein="bilder_thumb/BILD1.jpg" kleinnr="1"></Bild>
<Bild name="paolo2" link="http://www.t-online.de" daten="mein Text" nummer="2" format="10X13" pic="bilder/BILD2.jpg" klein="bilder_thumb/BILD2.jpg" kleinnr="2"></Bild>
<Bild name="paolo3" link="www.alice.it" daten="mein Text" nummer="3" format="10X13" pic="bilder/BILD3.jpg" klein="bilder_thumb/BILD3.jpg" kleinnr="3"></Bild>
<Bild name="paolo4" link="www.alice.it" daten="mein Text" nummer="4" format="10X13" pic="bilder/BILD3.jpg" klein="bilder_thumb/BILD3.jpg" kleinnr="4"></Bild>
<Bild name="paolo5" link="www.alice.it" daten="mein Text" nummer="5" format="10X13" pic="bilder/BILD3.jpg" klein="bilder_thumb/BILD4.jpg" kleinnr="5"></Bild>
<Bild name="paolo6" link="www.alice.it" daten="mein Text" nummer="4" format="10X13" pic="bilder/BILD3.jpg" klein="bilder_thumb/BILD5.jpg" kleinnr="6"></Bild>
</Bilder>


mein jetziger Problem heisst :
wie kann ich die thumbs in 3er gruppe anzeigen lassen ?
+++
+++
+++

Danke

Danke schon mal
 

Anhänge

  • index.zip
    125,1 KB · Aufrufe: 90
  • bilddaten.zip
    358 Bytes · Aufrufe: 87
Hi,

ich würds so machen:
Code: 
	var x = 0;
	var y = 0;
	var cols = 3; // Anzahl Spalten
	for (i=0;i<numimages;i++) {
		this.picHolder = this.firstChild.childNodes[i];
		this.thumbHolder = thumbnails.createEmptyMovieClip("thumbnail"+i,i);
		this.thumbLoader._x = x * spacingx;
		this.thumbLoader._y = y * spacingy;
		x ++;
		if (x >= cols) {
			x = 0;
			y ++;
		}
	}

Gruß
.
 
Herzlich Dank Tobias,
mit deiner Hilfe und jede Menge Geduld bin ich nah am ziel !!

Mein Jetziger CODE
AS
Code: 
// XML-Objekt erzeugen (Bezeichner: mein_xml)
mein_xml = new XML();

// Störende Leerzeichen ignorieren
mein_xml.ignoreWhite = true;

// XML-Datei einlesen 
mein_xml.load("bilddaten.xml");

// Lesevorgang 
mein_xml.onLoad = function(status) {
	if (status && this.loaded) {
		anzahl = mein_xml.firstChild.childNodes.length;
		geladen = true;
		aktbild = 0;
		ladeBild(aktBild);
	}
};
myPhoto = new XML();
myPhoto.ignoreWhite = true;
myPhoto.onLoad = function(success) {
	//portfolioTag = this.firstChild;
	numimages = this.firstChild.childNodes.length;
	spacingx = 80;
	spacingy = 80;
	var x = 0;
	var y = 0;
	var cols = 3; // Anzahl Spalten
		for (i=0;i<numimages;i++) {
		this.picHolder = this.firstChild.childNodes[i];
		this.thumbHolder = thumbnails_mc.createEmptyMovieClip("thumbnail"+i,i);
		this.thumbLoader._x = x * spacingx;
		this.thumbLoader._y = y * spacingy;
		x ++;
		if (x >= cols) {
			x = 0;
			y ++;
		}
		this.thumbLoader = this.thumbHolder.createEmptyMovieClip("thumbnail_image", 0);
		this.thumbLoader.loadMovie(this.picHolder.attributes.klein);
		this.thumbHolder.title = this.picHolder.attributes.title;
		this.thumbHolder.bild_mc = this.picHolder.attributes.pic;
		this.thumbHolder.onRelease = function() {
			bild_mc.loadMovie(this.bild_mc);
			title_txt.text = this.title;
			bildnr_txt.text = bildkleinnr;
		};
	}
};
myPhoto.load("bilddaten.xml");
	

// Funktion, welche die Daten der XML-Datei verarbeitet
function ladeBild(paktBild) {
	status_mc._visible = 1;
	bild = mein_xml.firstChild.childNodes[paktBild].attributes.pic;
	bildklein = mein_xml.firstChild.childNodes[paktBild].attributes.klein;
	bildkleinnr = mein_xml.firstChild.childNodes[paktBild].attributes.kleinnr;
	bildname = mein_xml.firstChild.childNodes[paktBild].attributes.name;
	bilddaten = mein_xml.firstChild.childNodes[paktBild].attributes.daten;
	bildformat = mein_xml.firstChild.childNodes[paktBild].attributes.format;
	bildnummer = mein_xml.firstChild.childNodes[paktBild].attributes.nummer;
	bildlink = mein_xml.firstChild.childNodes[paktBild].attributes.link;
	loadMovie(mein_xml.firstChild.childNodes[paktBild].attributes.pic, this.bild_mc);
	titel_txt.text = bildname;
	daten_txt.text = bilddaten;
	format_txt.text = bildformat;
	bildnr_txt.text = bildnummer;
	link_txt.text = bildlink;
	gehezu.link = mein_xml.firstChild.childNodes[paktBild].attributes.link;
	gehezu.onRelease = function() {
		getURL(this.link, "_blank");

	};
}


// Weiter Schalter
weiter_btn.onRelease = function() {
	if (geladen && aktbild<anzahl-1) {
		aktbild++;
		ladeBild(aktBild);
	}
};

// Zurück Schalter
zuruck_btn.onRelease = function() {
	if (geladen && aktbild>0) {
		aktbild--;
		ladeBild(aktBild);
	}
};

Mein nächster Schritt :
Ein Preloader für die Thumbs

Danke
 
Hi,

Übrigens: folgende wird (zumindest online) nicht funktionieren:
Code: 
		this.thumbLoader.loadMovie(this.picHolder.attributes.klein);
		this.thumbHolder.title = this.picHolder.attributes.title;
		this.thumbHolder.bild_mc = this.picHolder.attributes.pic;
		this.thumbHolder.onRelease = function() {
			bild_mc.loadMovie(this.bild_mc);
			title_txt.text = this.title;
			bildnr_txt.text = bildkleinnr;
		};
Alles, was ich hier rot markiert habe, wird durch das Laden des Films (was ja meistens ein wenig länger dauert, als die Zeit zwischen 2-3 Codezeilen) wieder überschrieben.

Lösung: Erstelle einen weiteren (inneren) Clip für das eigentliche Bild:
Code: 
		var img = this.thumbLoader.createEmptyMovieClip("img", 1);
		img.loadMovie(this.picHolder.attributes.klein);
		this.thumbHolder.title = this.picHolder.attributes.title;
		this.thumbHolder.bild_mc = this.picHolder.attributes.pic;
		this.thumbHolder.onRelease = function() {
			bild_mc.loadMovie(this.bild_mc);
			title_txt.text = this.title;
			bildnr_txt.text = bildkleinnr;
		};
Diese Variante ermöglicht Dir nun auch einen Preloader:
Code: 
		this.thumbHolder.onEnterFrame = function() {
			var cur = this.img.getBytesLoaded();
			var max = this.img.getBytesTotal();
			if (cur > 0 && max > 0) {
				var perc = cur * 100 / max;
				// hier Prozentzahl anzeigen
				if (perc >= 100) delete this.onEnterFrame;
			}
		}
Du musst nun nur noch einen weiteren MC im Clip "thumbHolder" erstellen, der einen Ladebalken o.ä. darstellt.

Ich mache es mir meistens etwas einfacher, und erstette die Thumbnail nicht direkt per Code, sondern lege in der Bibliothek einen MC "thumbnail" an, der schon über einen Container (für das Bild), vielleicht einen Rahmen und einen Preloader verfügt. Ebenso notiere ich die Funktionen zum Vorladen, Skalieren und Anzeigen des Bildes (sowie die Mausereignisse) auf der Zeitleiste dieses MC, den ich dann vom Hauptfilm aus in gewünschter Anzahl per attachMovie instanziere.

Gruß
.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück