Bilder-Karussell

In diesem Tutorial zeige ich Ihnen, wie sie ein Bilder-Karussell in ihre Homepage einbauen.
Dieses "Karussell" darf jedoch nicht auf kommerziellen Webseiten verwendet werden!
Hier, auf der Herstellerseite, finden Sie eine Demo und andere interessante Informationen:
http://codecanyon.net/

1. Gehen Sie auf "Design einstellen"
2. Fügen Sie bei "Text über dem Design" folgenden Code ein:
<link type="text/css" rel="stylesheet" href="http://philipp7.bplaced.net/carousel/theatre.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://philipp7.bplaced.net/carousel/jquery.theatre-1.0.js" type="text/javascript"></script>
3. Drücken Sie "Speichern".
4. Gehen Sie auf "Eigene Seiten editieren"
5. Gehen Sie auf die Seite und die Stelle, wo das Bilder-Karussell erscheinen soll.
6. Drücken Sie im Editor links oben auf Quellcode und fügen Sie folgenden Code ein:
<div id="carousel" style="width: 600px; height: 300px;">
<img alt="" src="http://bildurl1.jpg" />
<img alt="" src="http://bildurl2.jpg" />
<img alt="" src="http://bildurl3.jpg" />
<img alt="" src="http://bildurl4.jpg" />
</div>
<div id="paging"><a href="javascript:">[{#}]</a></div>
<script type="text/javascript"> $(document).ready(function() {
$("#carousel").theatre({ effect:"3d", still:2000, paging:"#paging", selector:"img"})
}); </script>
600: Gibt die Breite des Bilder-Karrussels an.
300: Gibt die Höhe des Bilder-Karrussels an.
3d: Gibt den Effekt an.
Weitere Möglichkeiten wären: vertical, fade, show oder slide.
2000: Gibt die Dauer in Millisekunden an, nach der das Bild gewechselt wird.

Bei den violett gedruckten Stellen können Sie die Urls der Bilder einfügen.
Diese bekommen Sie mit einem Rechts-Klick auf das Bild und dann Grafik-Adresse kopieren (Firefox) oder mit einen Rechtsklick auf das Bild und dann Eigenschaften (Internet-Explorer).

Wenn Sie weitere Bilder hinzufügen möchten, müssen Sie nach dieser Zeile:
<div id="carousel" style="width: 600px; height: 300px;">
folgende Zeile einfügen:
<img alt="" src="http://bildurl4.jpg" />

7. Speichern.

 



Kommentare zu dieser Seite:
Kommentar von:04.02.2012 um 21:58 (UTC)
ami-trick
ami-trick
Offline

kann man karuelgalerie verschieben ich will das ist ganz rechts ist

danke

Kommentar von:30.12.2011 um 23:20 (UTC)
burakgu
burakgu
Offline

danke für das schöne tutorial

schaut richtig gut aus

Kommentar von:15.09.2011 um 17:23 (UTC)
wehrmacht-im-modell
wehrmacht-im-modell
Offline

interesanntes tut. Leider kann man das Karussell nicht in der ersten rechten Box einbetten sonst sieht man die Bilder des Karussells in der Galerie riesengross.

Gruss: Thomas

Kommentar von:11.09.2011 um 13:30 (UTC)
kameraauge
kameraauge
Offline

dankeschön für das tolle tutorial !!!!

sieht echt klasse aus auf meiner seite

LG grit

Kommentar von:07.09.2011 um 19:41 (UTC)
luostinger-video
luostinger-video
Offline

super tutorial danke



Kommentar zu dieser Seite hinzufügen:
Ihr Name:
Ihre E-Mail-Adresse:
Ihre Nachricht: