Slideshow
In diesem Tutorial möchte ich Ihnen zeigen, wie Sie eine Slideshow in Ihre Homepage integrieren können.Bei dieser Slideshow handelt es sich um den sogenannten coin-slider.
1. Gehen Sie auf "Design einstellen".
2. Wählen Sie den Reiter "Erweiterte Einstellungen".
3. Fügen Sie folgenden Code ein:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://philipp7.bplaced.net/gal/coin-slider.min.js"></script>
<link type="text/css" href="http://philipp7.bplaced.net/gal/coin-slider-styles.css" rel="stylesheet" />
<script type="text/javascript">
<!-- Verstecke fuer aeltere Browser --
$(document).ready(function(){
$('#coin-slider').coinslider({navigation:true, width: 500, height: 250, delay: 5000 });
});
// -- Ende verstecken -->
</script>
true: gibt an, dass prev und next-Button eingeblendet werden. <script type="text/javascript" src="http://philipp7.bplaced.net/gal/coin-slider.min.js"></script>
<link type="text/css" href="http://philipp7.bplaced.net/gal/coin-slider-styles.css" rel="stylesheet" />
<script type="text/javascript">
<!-- Verstecke fuer aeltere Browser --
$(document).ready(function(){
$('#coin-slider').coinslider({navigation:true, width: 500, height: 250, delay: 5000 });
});
// -- Ende verstecken -->
</script>
Falls dies nicht erwünscht ist, können Sie statt dem true ein false einsetzen.
500: gibt die Breite der Slideshow in Pixel an.
250: gibt die Höhe der Slideshow in Pixel an.
5000: gibt die Zeit in Millisekunden an, nach der das Bild gewechselt wird.
5000 wären 5 Sekunden.
4. Gehen Sie an die Stelle, wo die Slide-Show eingeblendet werden soll.
5. Drücken Sie im Editor links oben auf "Quellcode".
6. Fügen Sie folgenden Code ein:
<div id="coin-slider">
<img width="500" height="250" src="http://bildurl1.jpg" />
<span>Beschreibung des 1. Bildes</span>
<img width="500" height="250" src="http://bildurl2.jpg" />
<span>Beschreibung des 2. Bildes</span>
<img width="500" height="250" src="http://bildurl3.jpg" />
<span>Beschreibung des 3. Bildes</span>
</div>
<img width="500" height="250" src="http://bildurl1.jpg" />
<span>Beschreibung des 1. Bildes</span>
<img width="500" height="250" src="http://bildurl2.jpg" />
<span>Beschreibung des 2. Bildes</span>
<img width="500" height="250" src="http://bildurl3.jpg" />
<span>Beschreibung des 3. Bildes</span>
</div>
500: Diese Zahl gibt die Breite des Bildes an.
Hier sollten Sie die gleiche Zahl einfügen, wie im Code davor.
Ansonsten wird man nur einen Bildausschnitt sehen können oder das Bild wird ein paar mal nebeneinader angezeigt.
250: Diese Zahl gibt die Höhe des Bildes an.
Hier sollten Sie die gleiche Zahl einfügen, wie im Code davor.
Ansonsten wird man nur einen Bildausschnitt sehen können oder das Bild wird ein paar mal übereinander angezeigt.
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).
Bei den roten Stellen können Sie eine Beschreibung zu dem jeweiligen Bild hinzufügen.
Wenn Sie weitere Bilder hinzufügen möchten müssen Sie nur immer folgenden Code vor dem </div> hineinkopieren.
<img width="500" height="250" src="http://bildurln.jpg" />
<span>Beschreibung des n. Bildes</span>
<span>Beschreibung des n. Bildes</span>
Kommentare zu dieser Seite:
|
wie kann ich das ändern?
Kommentar zu dieser Seite hinzufügen: