Tutorial: Coverflow für deine Homepage

Coverflow mit Javascript

Hallo liebe Community,
heute möchte ich zeigen wie ihr ein Coverflow, das man auf jeden Appleprodukt findet, auch für eure Homepage nutzen und modifizieren könnt. Es ist wirklich nicht schwer, wenn man die Grundlagen von HTML beherscht. Klick für Klick und mit Bildern erklärt . Wir werden hierbei ein vorgefertigtes Script verwenden, das sich Reflex nennt.


Schritt 1: Das Einbinden der .js Datei
Damit ihr das Reflexscript auch benutzen könnt, müsst ihr es natürlich auch in eurer Homepage einbinden. Da nicht jeder ein Webspace besitz, habe ich einmal das Script hochgeladen, sodass ihr nur folgende Codezeilen in das Feld "Text über dem Design" einfügen müsst.

Schritt 2: Die Bilddateien
Je nach dem wie viele Bilddateien man verwendet, muss man das Script anpassen. In unserem Beispiel werde ich es mit folgenden drei Bilddateien zeigen. Am besten ist es, wenn alle Bilder die gleiche Größe haben. Ladet eure eigenen Bilder nun bei euch im Baukasten hoch und haltet die Bildurl's schoneinmal Griffbereit.


http://img.webme.com/pic/m/matsk/1.jpg http://img.webme.com/pic/m/matsk/3.jpg http://img.webme.com/pic/m/matsk/2.jpg



Schritt 3: Bilddateien als Coverflow einbinden
Nun kommen wir wohl zum kompliziertestem Teil in diesem Tutorial. Um euch erst einmal zu erschlagen poste ich einmal den Script. Die Erklärungen folgende darauf.

● Das Rotmakierte ist ein sehr wichtiger Faktor. Hier wird nämlich simbolisiert, dass das Reflexscript hier eingreifen soll und diese Grafik bearbeitet ausgeben soll.
● An diesen Grünmakierten Stellen wird die Bildurl, der zuvor hochgeladenen Bilder eingefügt.

Wenn ihr den Script nun angepasst habt, und eure Bildadressen eingefügt habt, dann könnt ihr es ganz normal im Seiteneditor einfügen. Klickt dazu oben Links auf den Button "Quelltext" und kopiert eure Codezeilen hinein.





Schritt 4: Der Schluss-Check
Habt ihr den Script eingebunden in dem Feld "Text über dem Design"?
Habt ihr eure Bildurl's eingefügt?
Und habt ihr den Script auf eurer Seite eingegfügt?

Wenn ihr das gemacht habt, ist alles richtig und es sollten keine Probleme auftreten. Falls doch schreibt mir, oder schaut auf der Herstellerseite vorbei.

Herstellerseite: http://www.netzgesta.de/reflex/
Bitte beachtet die Lizenz des Scriptes auf der Herstellerseite.


Ich hoffe ich habe euch mit diesem Tutorial geholfen.

Grüße,
Mats


© Copyright by Matsk 2010

Sehr schönes Tutorial Mats !

So einfach geht es !

Dankesehr, über Feedbacks freue ich mich immer sehr!

Grüße,
Mats

Hey, Habe mich dauernt gefragt, wieso die Grafiken b eim öffnen der Seite immer zurückspringen
Super Tutorial, kann ich irgendwann bestimmt auchmal gebrauchen.
Mfg
______________

...

Nein, so ein Flow ist zu mindest in diesem Script nicht möglich. Dieses Script bearbeitet wirklich nur die Grafiken und gibt sie mit der Spiegelung und Position aus.

Grüße,
Mats

sehr schlechtes beispiel udn es bietet nicht das was du versprichst

bisschen recherche und du hättest das gefunden:
http://www.jcoverflip.com/

Hallo,
wie man ein Script beurteilt liegt im Auge des Betrachters, jedenfalls glaube ich, dass das Reflex-Script um einiges kompatibler und auch Ladungszeiten optimierter ist als das Script, das du gepostet hast.

Ich habe mit diesem Script gar nichts versprochen . Das Beispiel auf meiner Startseite passt für mich perfekt. Erweitern, kürzen und modifizieren für die eigene Homepage liegt im Aufgabenbereich des jeweiligen Webmasters. Theoretisch betrachtet könnte sich jeder dieses "Grunscript" auf die eigenen Wünsche anpassen.

Ich möchte mich auch nicht rechtfertigen oder eine Diskusion anfangen. Ich hab ein Tutorial für dieses Script geschrieben und wenn du dein Script als besser passend findest, dann freue mich auf ein Tutorial von dir dazu .

Grüße,
Mats

Hallo Matsk,

hör garnicht auf so einen.Der muss halt in der virtuellen Welt den großen Mann spielen,weil er in der Öffentlichkeit keine Aufmerksamkeit bekommt.Wegen den hatten wir gestern schonmal eine Diskussion.Also lass dir bloß nichts von den erzählen

Ich finde das Tutorial gut.
______________
Info: Info-Landwirtschaft wird demnächst wieder eröffnet. BeI weiteren Fragen einfach eine Nachricht schreiben.

Mit freundlichem Gruß
Info-Landwirtschaft

das tutorial gefällt mir auch sehr.
danke für diese tollen anregungen
- achja gameshop bla bla hat eh keine ahnung ;O) -
also nichts für ungut.
find es gut wenn sich leute gedanken machen und es anderen vermitteln können mit tollen beispielen bzw tutorials.
das kan die flachpfeife von *gameshop bla bla* z.b nicht ;O)

gruß robert
______________


ICH FREU MICH AUF EUCH!
R.E.K.

Hey,
danke für eure Rückmeldungen . Und auch danke dafür, dass ihr mein Tutorial verteidigt. Vielleicht folgt demnächst auch nochmal ein weiteres Tutorial.

Grüße,
Mats

Naja. Dein s ript bz tutoial ist eigentlich gar nichts und relativ statisch. Qer wirklich ein funktionierendes coverflow script will nimmt jcoveeflip oder das jcarousel von professor cloud

aber sei doch erhlich ist doch soweit nen gut erklärtes, dargestelltes kleines tutorial
sicher gibts ne menge anderer möglichkeiten - doch hier gehts schlichtweg um seine.
lg rob
______________


ICH FREU MICH AUF EUCH!
R.E.K.