Jonas: Mootools

Hallo zusammen,

Ich versuche zur Zeit eine Gallerie mit Hilfe von Mootools zu erstellen.
Ich lade die Bilder zuerst im Hintergrund, der Vortschritt wird durch einen Ladebalken angezeigt. Dies funktioniert soweit.

Mein Problem ist jedoch folgendes:
Wie kann ich die geladenen Bilder nun anzeigen?
Ich habe die Pfade zu den Bildern in einem Array gespeichert, und möchte diese nun in einem Div anzeigen.
Kann mir da jemand helfen?

Vielen Dank!

Ps: Hat jemand ne deutsche Dokumentation, ein Tutorial oder sonst irgendeine Anleitung für Mootools?

  1. Hallo,

    Ich bin auch kein Mootools-Profi, aber wenn du mal das postest oder verlinkst, was du bisher programmiert hast, können wir es uns mal anschauen.

    Ich versuche zur Zeit eine Gallerie mit Hilfe von Mootools zu erstellen.
    Ich lade die Bilder zuerst im Hintergrund, der Vortschritt wird durch einen Ladebalken angezeigt. Dies funktioniert soweit.

    Wie? Erzeugst du einfach Image-Objekte mit new Image() und .src = "URI"?

    Wie kann ich die geladenen Bilder nun anzeigen?

    Kommt darauf an, wie du sie vorgeladen hast.

    Ich habe die Pfade zu den Bildern in einem Array gespeichert, und möchte diese nun in einem Div anzeigen.

    Dann musst du die img-Elementknoten (das sind die Image-Objekte quasi) mit appendChild ans div-Element anhängen.

    Mathias

    1. Danke für deine Antwort,

      leider habe ich mein ganzes Script gelöscht, aber das Grundprinzip ist in etwa das gleiche wie das Demoscript auf der Mootools-seite: [url]http://demos.mootools.net/Asset.images[/url]
      Ich möchte jedoch alle vorgeladenen Bilder neben bzw. untereinander auflisten, natürlich kleiner als die Original-Bilder, also ca. 150px breit. Dann sollten die Bilder verlinkt sein, damit ich diese mit in Originalgröße anzeigen kann.

      Gruß Jonas

      1. Hallo,

        Schau dir mal den Javascript-Code des Beispiels an.
        Und dieses: http://docs.mootools.net/Remote/Assets.js#images

        Bei onComplete kannst du die Bilder in ein Element schreiben, d.h. sie über das DOM einem Element anhängen.
        Das macht das Beispiel mit image.inject(gallery).
        Dazu brauchst du den loadedImages-Array, zu dem das image beim onProgress hinzugefügt wird.
        Im onComplete wird die Liste dann durchlaufen. Dort kannst du jedes Image der Galerie hinzufügen. (gallery wird oben mit gallery = $('gallery') initialisiert.)
        Im Grunde nimmst du also das Beispiel und wirfst den unnötigen Effekt-Kram heraus.

        Mathias