bildergallerie mit XML füllen

[kharn]

Hallo zusammen,

erstmal ein THX an pape für seinen klasse XML thread , hab zwischenzeitlich auch einige andere Beiträge genutzt, deren Autoren ich allerding nicht mehr im Kopf habe...

eins noch vorweg, das ganze ist zur zeit noch ne ziemliche Baustelle, da noch ne ganze Menge fehlt und ich versch. Sachen gleichzeitig ausprobier

wo möchte ich hin:
+ Bildergallerie, deren Sub-Navigation und Inhalte (bis auf Bilder) in einer XML Datei stehen
(die komplette Navigation dynamisch zu generieren ist für mich im Moment wohl zu aufwändig, da ich zumindest noch die Hauptnavigationspunkte animieren möchte und das per AS zu realisieren hab ich sowas von kein plan von ... )
+ klick auf hauptnavigationspunkt (illustration, animation, something) lädt dynamische Anzahl von buttons
+ klick auf buttons öffnen thumbnail, samt link zu großem Bild, Überschrift und Text aus XML


was funktioniert:
+ Hauptnavigation
+ laden von Thumbnails, Überschrift, Texten
+ generieren von subnavigation
+ klick auf thumbnail öffnet bild in neuem browserfenster


was noch nicht klappt:
+ dynamische buttons mit AS ansprechen / klickbar machen (hab schon div. pfade ausprobiert, leider ohne Erfolg, vielleicht hab ich was übersehn)
+ dynamische buttons mit removeMovieclip löschen sobald neuer Haupt-navigationspunkt geklickt wird (klappt wohl aus dem gleichen Grund wie oben nicht *seufz*)
+ Abstand der dynamischen Buttons untereinander stimmt nicht (KA warum, hab zu den x, y koordinaten eigentlich noch pixel dazu gerechnet (gap) seltsam )
+ formatieren der texte im XML mit HTML-Tags (hab schon diverse Threads zu diesem Thema durchgelesen, mit CDATA klappts aber noch nicht, mmhh hab wohl einfach ein ziemlich großes Brett vorm kopf ... )


hier der code der XML

<?xml version='1.0' encoding='utf-8'?>
<galery>
	<illustration name="illustration" path="illustration">
		<illustration_pic_1
		name="pic_1"
		thumb="pic_1_t.jpg"
		pic="pic_1.jpg"
		headline="Hier seht ihr die 1. Illustration"
		text_long="Nun folgt noch eine mehr oder weniger kurze Geschichte zu dem Bild"
		/>
		<illustration_pic_2
		name="pic_2"
		thumb="pic_2_t.jpg"
		pic="pic_2.jpg"
		headline="Hier seht ihr die 2. Illustration"
		text_long="Nun folgt noch eine mehr oder weniger kurze Geschichte zu dem Bild"
		/>
		<illustration_pic_3
		name="pic_3"
		thumb="pic_3_t.jpg"
		pic="pic_3.jpg"
		headline="Hier seht ihr die 3. Illustration"
		text_long="Nun folgt noch eine mehr oder weniger kurze Geschichte zu dem Bild"
		/>
		<illustration_pic_4
		name="pic_4"
		thumb="pic_4_t.jpg"
		pic="pic_4.jpg"
		headline="Hier seht ihr die 4. Illustration"
		text_long="Nun folgt noch eine mehr oder weniger kurze Geschichte zu dem Bild"
		/>
		<illustration_pic_5
		name="pic_5"
		thumb="pic_5_t.jpg"
		pic="pic_5.jpg"
		headline="Hier seht ihr die 5. Illustration"
		text_long="Nun folgt noch eine mehr oder weniger kurze Geschichte zu dem Bild"
		/>
		<illustration_pic_6
		name="pic_6"
		thumb="pic_6_t.jpg"
		pic="pic_6.jpg"
		headline="Hier seht ihr die 6. Illustration"
		text_long="Nun folgt noch eine mehr oder weniger kurze Geschichte zu dem Bild"
		/>
		<illustration_pic_7
		name="pic_7"
		thumb="pic_7_t.jpg"
		pic="pic_7.jpg"
		headline="Hier seht ihr die 7. Illustration"
		text_long="Nun folgt noch eine mehr oder weniger kurze Geschichte zu dem Bild"
		/>
		<illustration_pic_8
		name="pic_8"
		thumb="pic_8_t.jpg"
		pic="pic_8.jpg"
		headline="Hier seht ihr die 8. Illustration"
		text_long="Nun folgt noch eine mehr oder weniger kurze Geschichte zu dem Bild"
		/>
	</illustration>
	<animation name="animation" path="animation">
		<animation_pic_1
		name="pic_1"
		thumb="pic_1_t.jpg"
		pic="pic_1.jpg"
		headline="Hier seht ihr die 1. Animation"
		text_long="Nun folgt noch eine mehr oder weniger kurze Geschichte zu der Animation"
		/>
	</animation>
	<something name="something" path="something">
		<animation_pic_1
		name="pic_1"
		thumb="pic_1_t.jpg"
		pic="pic_1.jpg"
		headline="Hier seht ihr 1. something"
		>
			<text_long name="text_long">
			<![CDATA[<a href="http://www.blabla.de/">www.blabla.de</a>]]
			</text>
		</animation_pic_1>
	</something>
</galery>

jetzt noch das AS (hoffmal das das nicht zu viel ist :P):

stop();
 
// textfield setup /////////////////////////////////////////////////////////////////////
_root.headline.multiline = true;
_root.headline.html = true ;
_root.text_long.multiline = true;
_root.text_long.html = true ;
 
 
// load gallery //////////////////////////////////////////////////////////////////////
var XMLgallery = new XML(); // new XML objekt
XMLgallery.ignoreWhite=true; // ignores whitespaces of XML-file
XMLgallery.load("gallery.xml");
XMLgallery.onLoad = function(success) {
 
    if (success) { // if XML successfully loaded
        current_category = 0;  
        load_pics (current_category);
        current_pic = 0; // determine which pic to show
        show_pic (current_category, current_pic); // in this case show first pic of this category first  
        var pic_ammount = XMLgallery.firstChild.childNodes[current_category].childNodes.length; // count number of pics within categories
        load_selectors (pic_ammount);
    }
}
 
function load_pics (current_category:Number, current_pic:Number):Void { // load pics + infos
    
    _global.pic_ammount = XMLgallery.firstChild.childNodes[current_category].childNodes.length; // count number of pics within categories and make this variable available globally
    XMLgallery_pic_name = []; // new array
    XMLgallery_thumb = [];
    XMLgallery_pic = [];
    XMLgallery_headline = [];
    XMLgallery_text_long = [];
    
    for (var i=0; i<pic_ammount; i++) {// repeat as often as pics are in current category
        XMLgallery_pic_name[i] = XMLgallery.firstChild.childNodes[current_category].childNodes[i].attributes.name;
    }
}
 
function show_pic (current_category:Number, current_pic:Number):Void { // show pic + infos
    _root.thumb.loadMovie(XMLgallery.firstChild.childNodes[current_category].attributes.name + "/" + XMLgallery.firstChild.childNodes[current_category].childNodes[current_pic].attributes.thumb);
    // trace (XMLgallery.firstChild.childNodes[current_category].attributes.name + "/" + XMLgallery.firstChild.childNodes[current_category].childNodes[current_pic].attributes.thumb);
    _root.headline.text = XMLgallery.firstChild.childNodes[current_category].childNodes[current_pic].attributes.headline;
    _root.text_long.text = XMLgallery.firstChild.childNodes[current_category].childNodes[current_pic].attributes.text_long; 
}
 
 
 
function load_selectors (pic_ammount:Number) { // selectors = buttons which load thumbnail
    selectors_per_line = 5; // max. ammount of selectors per line
    current_row = 0; // row at which to put next selector
    current_column = 0; // column at which to put next selector
    current_selector = 1; // number of current selector
    selector_w = _root.selector._width; 
    selector_h = _root.selector._height;
    default_x = 24; // x position where to place first MC
    default_y = 225; // y position where to place first MC
    gap = 10; // gap between MCs
    
    for (var i=0; i<pic_ammount; i++) { // repeat as often as pics are in current category
        selector._x = default_x + current_column * selector_w + gap; // new x position
        selector._y = default_y + current_row * selector_h + gap; // new y position
        
        //trace ("selector number: " + current_selector);
        //trace ("selector row: " + current_row);
        //trace ("selector column: " + current_column);
        //trace ("selector x position: " + selector._x);
        //trace ("selector y position: " + selector._y);
        //trace ("-------------------");
        
        _root.selector.duplicateMovieClip(created_selector_[current_selector], current_selector); //create new selector with current_selector ID on current_selector number layer
        created_selector_[current_selector]._x = selector._x;
        created_selector_[current_selector]._y = selector._y;
        //trace (created_selector_[current_selector]);
        
        _root.created_selector_[current_selector].onRelease = function() {
                trace ("release");
            }
        _root.created_selector_[current_selector].onRollOver = function() {
                trace ("mouseover");
            }
        
        if ((current_selector % selectors_per_line) == 0) { // if end of row reached
            current_row++; // increase row number
            current_column = -1; // reset column
        }
        current_selector++;
        current_column++;
    }
}
 
function remove_selectors (pic_ammount:Number){
    for (var i=0; i<pic_ammount; i++) { // repeat as often as pics/ selectors are in current category
        created_selector_[i+1].removeMovieClip();
        trace ("remove: selector " + (i+1));
    }
}
 
 
// buttons /////////////////////////////////////////////////////////////////////////////
btn_illustration.onRelease = function() {
    trace ("illustration");
    current_category = 0;
    load_pics (current_category);
    current_pic = 0; // determine which pic to show first
    show_pic (current_category, current_pic); // show first pic of this category first
    remove_selectors (pic_ammount); // remove selector instances from previously viewed category
}
btn_animation.onRelease = function() {
    trace ("animation");
    current_category = 1;
    load_pics (current_category);
    current_pic = 0;
    show_pic (current_category, current_pic);
    remove_selectors (pic_ammount);
}
btn_something.onRelease = function() {
    trace ("something");
    current_category = 2;
    load_pics (current_category);
    current_pic = 0;
    show_pic (current_category, current_pic);
    remove_selectors (pic_ammount);
} 

hoffe das ihr mir helfen könnt

PS: das angehängte ZIP enthält nicht alle nötigen pics, weils sonst zu groß ist ums hier hochzuladen...

[Mr.Dauerfeuer]

Hi,

also ich helf Dir schonmal mit den dynamischen Buttons - nett gell

PHP-Code:


 var mc:MovieClip = _root.selector.duplicateMovieClip("irgendwas" + current_selector, current_selector);
        mc._x = selector._x;
        mc._y = selector._y;
        
        
        mc.onRelease = function() {
                trace ("release");
            }
        mc.onRollOver = function() {
                trace ("mouseover");
            } 


Hoffe das hilft

Gruss Frederik

[Mr.Dauerfeuer]

achso...damit Du später auch auf die Btns verweisen kannst mach noch sowas:

PHP-Code:

// irgendwo oben in dem Script
var meineBtns:Array = new Array();

// des hier in deine Schleife unter des "dublicateMovieClip"
meineBtns[current_selector] = mc; 


[kharn]

THX Frederik , probier das gleich mal aus

sag mal die Hintergrundbilder deiner Site, hast du die geschossen?

[Mr.Dauerfeuer]

bis auf des Bild unter "Profile" sind die von mir...