Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag23.05.2010 um 09:58 (UTC)    
Titel: 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 Wink. 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.

Zitat:
<script type="text/javascript" src="http://matsk.bplaced.net/jshost/reflex.js"></script>





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.

Zitat:
<img border="0" class="reflex iopacity50" alt="" style="margin-left: -10px;" src="http://img.webme.com/pic/m/matsk/1.jpg" />
<img border="0" class="reflex iopacity75" alt="" style="margin: 0pt 0px;" src="http://img.webme.com/pic/m/matsk/3.jpg" />
<img border="0" class="reflex iopacity25" alt="" style="margin-left: -5px;" src="http://img.webme.com/pic/m/matsk/2.jpg" />


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
Beitrag23.05.2010 um 10:19 (UTC)    
Titel:

Sehr schönes Tutorial Mats !

So einfach geht es !
Beitrag23.05.2010 um 11:47 (UTC)    
Titel:

Dankesehr, über Feedbacks freue ich mich immer sehr!

Grüße,
Mats
Beitrag23.05.2010 um 18:54 (UTC)    
Titel:

Hey, Habe mich dauernt gefragt, wieso die Grafiken b eim öffnen der Seite immer zurückspringen Very Happy
Super Tutorial, kann ich irgendwann bestimmt auchmal gebrauchen.
Mfg
______________
Beitrag22.07.2010 um 01:09 (UTC)    
Titel:

Das sieht aber nur so aus, und der "Flow", wie auf nem Apple, funktionert mit dem Tutorial nicht, oder?
Beitrag18.12.2010 um 08:27 (UTC)    
Titel:

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
Beitrag18.12.2010 um 18:40 (UTC)    
Titel:

sehr schlechtes beispiel udn es bietet nicht das was du versprichst

bisschen recherche und du hättest das gefunden:
http://www.jcoverflip.com/
Beitrag19.12.2010 um 11:31 (UTC)    
Titel:

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.

Zitat:
sehr schlechtes beispiel udn es bietet nicht das was du versprichst


Ich habe mit diesem Script gar nichts versprochen Wink. 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 Wink.

Grüße,
Mats
Beitrag19.12.2010 um 12:06 (UTC)    
Titel:

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 Wink

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
Beitrag19.12.2010 um 12:17 (UTC)    
Titel:

matsk hat Folgendes geschrieben:
Dankesehr, über Feedbacks freue ich mich immer sehr!

Grüße,
Mats


das tutorial gefällt mir auch sehr.
danke für diese tollen anregungen Wink
- 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.
Beitrag19.12.2010 um 15:58 (UTC)    
Titel:

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

Grüße,
Mats
Beitrag24.12.2010 um 17:47 (UTC)    
Titel:

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
Beitrag25.12.2010 um 00:40 (UTC)    
Titel:

gameshop-new2 hat Folgendes geschrieben:
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 Wink
sicher gibts ne menge anderer möglichkeiten - doch hier gehts schlichtweg um seine.
lg rob
______________


ICH FREU MICH AUF EUCH!
R.E.K.
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de