Die iTunes Nutzer unter euch kennen ja den netten Cover Flow Effekt aus dem Apple Player. Was nun, wenn man seine eigenen Bilder online nach demselben Prinzip darstellen könnte? Finn Rudolph hat ein auf Java und ein wenig PHP basierendes Script entwickelt, dass es euch ermöglicht, genau das zu tun. Mithilfe des Mausrades, eines Sliders, durch klick auf Bilder oder auch mit den Pfeiltasten könnt ihr mit dem bekannten Flow-Effekt durch Bildserien navigieren.
»ImageFlow ist eine Bildergalerie für Webseiten, welche einen intuitiven Umgang mit Bildern ermöglicht. Die grundlegende Idee dahinter ist die, das Durchblättern eines physikalischen Bilderstapels digital animiert umzusetzen. Der intuitive Umgang wird dabei automatisch durch den metaphorischen Einsatz des bekannten Durchblätterns hervorgerufen.
Dieser Ansatz ist vor allem durch die Cover Flow Technik bekannt geworden, welche von dem Künstler Andrew Coulter Enright entwickelt wurde und nun – von Apple aufgekauft – unter anderem in iTunes zum Einsatz kommt.«
Laut Aussage auf der Entwickler-Webseite steht das Script jedem frei zur Nutzung zur Verfügung.
Eine Sample Galerie von mir findet ihr hier
Weitere Infos, eine Doku und ein weiteres Beispiel gibt es auf dem Blog des Entwicklers Finn Rudolph
verwandte Beiträge
- Copernic Desktop Search: Dateien & Bilder schnell finden
- Desktop Wysiwyg Editoren
- Vom Foto zum Vektor
- Fotografen in Bemerhaven?
- think different.
Related posts brought to you by Yet Another Related Posts Plugin.
Kommentar von: daniel
hi dennis,
du hast die imageflow geschichte super in weiß hingekriegt…schaff ich nicht meine reflektionen bleiben schwarz, egal was ich in der reflect.php schreibe…hättest du da einen kleinen tipp für mich? danke schon mal.
Kommentar von: admin
In der Reflection php ab ca. Zeile 97 müsste stehen:
// bgc (the background colour used, defaults to black if not given)if (isset($_GET['bgc']) == false)
{
$red = 255;
$green = 255;
$blue = 255;
}
bei red, green und blue die entsprechenden Werte eintragen, also für weiß 255/255/255
Kommentar von: Marc
hey, ich stehe hier vor einem riesen problem.
bin nicht der super programmierer. eigentlich so gut wie gar keiner.
das machen sonst immer andere für mich, bis auf meine
eigene website.
versuche jetzt vergebens dieses script an laufen zu bringen.
möchte gerne auf meiner startseite mit dem imageflow effekt
meine neuesten referenzen zeigen – dafür müsste ich diesen effekt
in ein tabellenfenster einfügen. du hast das mit dem script mittig hin bekommen… kannst du mir weiter helfen??? wäre super. RIESEN DANK IM VORAUS.
Kommentar von: admin
Hi Mark, grundsätzlich lässt sich das Script durch Verlinken des Javascriptes und des Stylesheets in den Header und die Verlinkung der Bilder über die reflect.php wie im Quelltext der Demo einbinden. Die Dateien müssen natürlich alle auf dem Server liegen. Auf deinem lokalen Rechner bekommst du das nur dann zum laufen, wenn es einer Serverumgenung wie XAMP o.ä. benutzt wird…
Das Positionieren an sich erfolgt dann normal über das HTML/Markup und CSS.
poste wenn möglich mal einen Link, damit ich mir das genau ansehen kann…
so long
Kommentar von: Marc
Morgen.
schau mal hier.
habe es mal hochgeladen… aber irgendwie
bekomme ich das nicht in die tagelle rein.
http://www.kreon-kommunikation.de/Testsite/index.html
danke – bis gleich.
wenn du mir per mail deine tel-nummer schickst, könnte ich dich dann evtl. anrufen? ist vielleicht einfacher als hier über formular?
Kommentar von: admin
hab dein Markup mal ein bissl aufgeräumt ->
http://blog.brandtimage.de/wp-content/galeries/sample/test.html
das Stylesheet dazu:
http://blog.brandtimage.de/wp-content/galeries/sample/screentest.css
Versuchs mal mit dem Markup und dem Stylesheet; der Name des Stylesheets müsste in deinem < Head > Bereich in screentest.css geändert werden bzw. das Stylesheet muss umbenannt werden …
Kommentar von: Marc
ja hey – es funst.
nur mit der größenveränderung – browserfenster anpassung geht noch nicht. es verkleinert sich nicht.
wow – jetzt schon mal vielen lieben dank…
Kommentar von: admin
das mit der Größenänerung hängt evtl. damit zusammen, dass dein Layout Tabellenbasiert ist …
Kommentar von: mike
hallo dennis,
ich hab mich jetzt mal an imageFlow ran gewagt.
was mich wundert ist. wenn ich die demoSeite:
http://194.95.111.244/~countzero/myCMS/index.php?c_id=5&s_id=21
im IE6 aufrufe, dann kommt folgende js-fehlermeldung:
in der datei imageflow.js
…………………………
Zeile: 316
Fehler: Mitglied nicht gefunden.
…………………………
weisst Du womit das zusammen haengt?
laut aussage – soll das script doch eigentlich in den gaengigsten browsern laufen.
kannst Du mir einen tipp geben?
danke erst einmal.
mfg, mike
Kommentar von: Dennis
hm … ich kann das Problem im IE6 nicht reproduzieren; hängt evtl. mit einer (Sicherheits-) Einstellung zusammen. Mein IE6 läuft unter multipleIEs in der Default Einstellung, da gehts auf jeden Fall.
Am besten mal die Optionen prüfen ob nicht irgendwas geblockt wird …
Kommentar von: mike
danke fuer Deine antwort!
jo – dat ist jetz wirklich sehr seltsam!
mein IE6 laeuft auch unter multipleIEs in der default einstellung und und bekomme ich die fehlermeldung.
aber Du hast recht, es muss an den (sicherheits-, programm-) einstellung liegen.
denn am anderen pc – selbes systemInstallation (auch mit multipleIEs bestueckt) – da bekomme ich die meldung auch nicht.
aber noch einmal – vielen dank fuer Deine antwort und muehe
Kommentar von: Romana
Hallo.
Ich habe ein problem bei dem Imagflow. Ich möchte wenn man auf das bild klikt das es sich in einem neuem fenster öfnet? ich habe das kleine bild und noch einen link auf das bild für das vergrősern.
Bitte für hilfe.
Danke
Romana
Kommentar von: mike
hallo Romana,
meinst Du so etwa – wie in diesem beispiel?
http://194.95.111.244/~countzero/scripts/_myImageFlowLightbox2
gruss mike
Kommentar von: Dennis
Hi Romana,
auf der Seite des Entwickler Finn Rudolph findest Du in den FAQs eine Beschreibung, wie man Bilder verlinkt und auch Beispiele und Scripte, wie man ImageFlow mit einem LightBox oder Highslide Script benutzt.
Link
Kommentar von: Dennis
@mike hat sich glatt überschnitten
Kommentar von: mike
@dennis – ja das hat es. Dir noch ein schoenes wochenende
Kommentar von: fleur
ich versuche die Bilder im Imageflow größer zu bekommen, aber es will nicht funktionieren! ich habe auch schon die FAQ`s gelesen, aber ich versteh nicht ganz was ich wo ändern muss.
Kommentar von: Dennis
Die Bilder werden von ImageFlow dynamisch skaliert; insofern kann man nur eine maximale Größe/Breite festlegen.
Zitat:
Kommentar von: fleur
kann man denn die maximle Breite ändern un wenn,
dann würde ich es doch im screen.css bei #imageflow ändern, aber was genau?
ich habe leider kaum ahnung von der HTML-Sprache, deshalb bin ich für jede unterstützung dankbar
Kommentar von: Dennis
Der #imageflow Container ist als Standard 90% breit – (width: 90%;). Die Breite bezieht sich auf das Elternelement, d.h. wenn wie in meiner Sample Galerie das Elternlement < body > ist, dann nimmt die Galeriegesamt 90% des Bildschirms ein. Ist der Galerie ein Div o.ä. übergeordnet,das z.B. 100px breit ist, dann ist die Galerie 900px breit.
kannst ja mal einen Link zum Angucken Deiner Galerie geben …
Kommentar von: Felix
hallo!
habe schon viele hilfreich dinge in diesem artikel finden können! danke!
ich würde image flow gerne als kleine navi eingebunden! wie kann ich das vorne stehende bild als link einrichten?
es soll eine zeitleiste werden. erscheint das bild für 1999 vorne sein, sollte man bei klick auf die seite 1999 gelangen?
gibt es da etwas?
Kommentar von: Dennis
Siehe FAQs des Entwicklers
>ImageFlow FAQs
Zitat:
Kommentar von: Felix
Danke
Kommentar von: hups
bekomme es nicht hin das imageflow mit higslide eine website anzeigt wie sieht da der code aus habe im longdesk ne url drinn aber es wird nur der ladebalken angezeigt.
wie kann ich anstatt highslide das ganze auf lightview umbauen ??
http://www.nickstakenburg.com/projects/lightview/
Kommentar von: Frank
Ich bekomms einfach nicht zum laufen ich hab zwar diesen loadin balken aber und ich seh die titelbezeichnugen der bilder aber ich hab keine animation und auch keine bilder … ich verzweifele
Kommentar von: Dennis
@frank … kann man so natürlich wenig zu sagen … gib am besten mal link zu einem Beispiel …
Kommentar von: Bruno
Hallo zusammen! Viele der Kommentare haben mir schon sehr geholfen. Jetzt stehe ich aber vor einem Problem:
Ich möchte das Imageflow in einem Iframe öffnen welches 266px breit und 336px hoch ist. Leider verkleinert mir das Imageflow die Bilder so extrem das es nicht mehr ins Layout passt. Di Bilder sollten schon eine höhe von etwa 250-300px aufweisen.
Wie mache ich das nun am besten?
SInd vielleicht doofe Fragen, aber ich bin neu in HTML und JS :-/
Kommentar von: Dennis
hört sich so an, als ob die breite deiner Popups das problem ist – Imageflow skaliert die Bilder proportional anhand der Größe des Elternelementes … 266px breite sind da natürlich nicht wirklich viel
Schick am besten mal einen Link zum angucken …
Kommentar von: maqua
Hallo Dennis.
Ich habe auch ein Problem mit Imageflow.
Auf meiner Homepage http://www.maqua-klein.de habe ich unter den Rubriken Kunst den Imageflow laufen. Leider verstehe ich nicht, wie ich so ein schönes Design wie du hinbekomme. Schön wäre, wenn der Immageflow auf dem ganzen Bildschirm zu sehen ist, sobald man auf ein Bild klickt.
Kannst du mir weiterhelfen?
Ich bin Anfänger.