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>
<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>
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>
<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>
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;">
<img alt="" src="http://bildurl4.jpg" />
7. Speichern.
Kommentare zu dieser Seite:
|
Kommentar zu dieser Seite hinzufügen: