ImageFlow einbinden

Hallo Leute,
möchte auf meiner HP ImagFlow einbauen.
Siehe Seite http://finnrudolph.de/ImageFlow.
Die Anleitung verstehe ich nur teilweise.
Kann mir jemand Schritt für Schritt erklären wie ich die ImageFlow
In meine Seite einbinden kann.

Danke

Hallo myoddo,

möchte auf meiner HP ImagFlow einbauen.
Siehe Seite http://finnrudolph.de/ImageFlow.
Die Anleitung verstehe ich nur teilweise.
Kann mir jemand Schritt für Schritt erklären wie ich die
ImageFlow
In meine Seite einbinden kann.

ich gehe davon aus, dass du Grundkenntnisse in HTML hast und weißt, wie ein HTML-Dokument aufgebaut ist. Wenn nicht, kannst du es hier nachlesen: http://de.selfhtml.org/

Des Weiteren nehmen ich an, dass du nur bei der Übersetzung der Anleitung Probleme hast. Für alles andere ist eigentlich das Board HTML und CSS bzw. JavaScript bzw. PHP zuständig.

  1. Man benötigt einen Server, der mindestens PHP 4.3.2 und GD extension 2.0.1 oder höher installiert hat.

Dann downloaded man sich die neueste Version vom Image Flow, entpackt folgende Dateien und lädt sie in ein Verzeichnis seiner Wahl auf den Server: imageflow.js, reflect2.php, reflect3.php, imageflow.css slider.png.

Sollte es wegen der Dateigrößen Probleme geben, kann man statt imageflow.js einfach imageflow.packed.js nehmen.

  1. Um den Image-Flow zu integrieren, muss man folgende Zeilen (XHTML) in den Head-Bereich des Dokumentes einfügen:

Tipp: In HTML wird die erste Zeile mit > anstatt /> geschlossen.

Außerdem müssen in den Body-Bereich folgende Zeilen (XHTML) geschreiben werden:

Tipp: Der image-Tag wird in HTML mit > anstatt /> geschlossen.

Die ID „unique_name“ solltest du durch einen eindeutigen Namen ersetzen. Z.B. „image-flow“. Die Klasse „imageflow“ muss auf jeden Fall erhalten bleiben.

Im source-Attribut kannst du den Pfad zu deinem Bild angeben. Über longdesc wird der Pfad zu dem Bild angegeben, welches sich beim Anklicken öffnet. Über alt ein eindeutiger Ersatz- bzw. Beschreibungstext. Wenn dieses Attribut leer bleiben soll, auf keinen Fall ein Leerzeichen reinschreiben. Einfach leer bzw. weg lassen.

Für die volle Unterstützung im Internet Explorer müssen noch Höhe (height) und Breite (width) jedes einzelnen Bildes angegeben werden.

Sollten noch mehr Bilder erwünscht werden, kann der image-Tag einfach kopiert und darunter mit neuen Werten versehen werden.

Uups… da fehlt noch was :smiley:

  1. Um den Image-Flow zu vollenden muss man diesem System noch die in Schritt 2 vergebene ID für das div-Element mitteilen.

Dazu öffnet man die Datei imageflow.js bzw. imageflow.packed.js und überschreibt folgenden Code am Ende der Datei:

domReady(function()
{
var instanceOne = new ImageFlow();
instanceOne.init({ ImageFlowID: ‚myImageFlow‘ });
});

Den Ausdruck ‚myImageFlow‘ ersetzt man durch die vergebene ID. Also z.B.: ‚image-flow‘.

Man kann auch mehrere Instanzen dieses ImageFlows erzeugen. Dazu kopiert man den Quellcode des divs, vergibt einfach eine andere ID, fügt die Zeilen von oben nochmals in das JavaScript-Dokument ein und übergibt auch dieser wieder die festgelegte ID des neuen divs.

Ich hoffe jetzt ist alles verstanden, ansonsten einfach nochmal nachfragen.

MfG, Florian J.

Hi myoddo,

ist eigentlich ein recht simples System.
Habe das Script mal auf meinen Server geladen (http://www.dessau-rosslauer.de/ImageFlow_1.3.0/) und mir die Funktionsweise angeschaut.

Als erstes: PHP-Unterstützung erforderlich!

Alle Dateien aus dem Verzeichnis ‚ImageFlow_1.3.0‘, außer favicon.ico, in das Verzeichnis wo auch die Datei sich befindet in welche Du das Script einbinden willst hochladen.
Das darin befindliche Verzeichnis ‚/img‘ nur anlegen wenn Du keinen anderen Bildordner nutzt.

In die Seite die das Script anzeigen soll
zwischen und die Script und CSS-Datei einbinden
also

wenn sich Style und Script im selben Verzeichnis befinden sonst die Pfade (Wegbeschreibung) anpassen.
Zwischen und an die Stelle wo die Bilder angezeigt werden sollen einen Divcontainer anlegen mit Identitätsnamen id=„myImageFlow“ und einem Klassennamen class=„imageflow“ damit die CSS drauf zugreifen kann.
Also

dazwischen kommt der Aufruf der Bilder wie in der Beispielindex
wobei Du natürlich den Bildnamen/Bildmaße/Aternativtext und eventuell den Verzeichnisnamen incl. Pfad (bei Änderung) anpassen mußt.
Dann den Container abschließen mit
.

Das war´s :wink:

Gruß, der Rosslauer.de

Hallo,
danke für eure schnelle Hilfe!
Genau so habe ich alles gemacht.
Nicht alles. Sonst würde es funktionieren!
Das Problem liegt wahrscheinlich an den Dateien
bzw. an ihrem Standort (Wegbeschreibung)

Vorgegeben:

Meine Dateienstruktur:

Hauptverzeichnis.html
Pictures – foto.jpg
Imageflow- alle Dateien vom imageflow außer favicon.ico

Hab noch ein Textbereich angelegt. Dies dürfte aber nicht relevant sein und keine png. sondern jpg.

Glaube der Fehler liegt im
Wegbeschreibung zu meinen Dateien

Muss ich das imageflow.css laden oder das imageflow.css ?
Was ist der unterschied.

Noch ne Frage zu php. Mein Server kann dies! Weshalb brauch er das aber ?
Muss ich hier was beachten?

Besten Dank

Hallo Leute,

nach langem hin und her habe ich es nun geschafft die Imageflow Bildergalerie in meine Seite einzubinden. Bis 3 Bilder funktioniert es auch tadellos. Sobald ich mehr als 3 Bilder einbinde,
kommt eine Lücke mit Image 7. Keine Ahnung warum ?
Hab schon so ziemlich alles mir mögliche versucht. Leider ohne Erfolg.

Hoffe mir kann jemand weiterhelfen.

Danke

Hab es gefunden !!!
Hab es gefunden !!!

Weshalb brauch er PHP aber ?

Im Hauptverzeichnis befinden sich auch die Dateien reflect2. php und reflect3. php :wink:

Glaube der Fehler liegt im

Da liegst Du warscheinlich richtig. Versuch mal

Vorrausgesetzt natürlich o.g. Dateien befinden sich im selben Verzeichnis :smile:

Hauptverzeichnis.html Pictures – foto.jpg

Wenn ‚/Pictures‘ Dein Bildverzeichnis ist dann sollten die Verweise bei den Bildern angepasst werden. Sonst wäre es ok.

Statt sollte es dann heißen

Gruß, der Rosslauer