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.
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>

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>







Kommentare zu dieser Seite:
Kommentar von:04.01.2013 um 22:53 (UTC)
turtletown
turtletown
Offline

supi alles gut geklappt, habe auf 400 verkleinert, nun passt das aber mit den Beschreibungen nicht mehr, die sind zu lang die Balken und sind von der Höhe im Bild vorhanden, vielleicht kannst du mir mal nee-mail schreiben oder antworten wie ich das ändern kann
Gruß und großes LOb von Rainer aus Turtletown

Kommentar von:06.06.2012 um 12:56 (UTC)
thekillerboys
thekillerboys
Offline

Geht nicht^^

Kommentar von:23.02.2012 um 21:03 (UTC)
tipperliga
tipperliga
Offline

besten Dank

Kommentar von:30.11.2011 um 12:06 (UTC)
mike-dorrer-art
mike-dorrer-art
Offline

hallo... bei mir werden die bilder immer zweimal gezeigt. das möchte ich nicht wie kann ich das ändern?

Kommentar von:07.11.2011 um 10:33 (UTC)
sportverein-sonnen
sportverein-sonnen
Offline

Hallo,

super Slide Show finde ich!!!
Nur eine Frage wie kann man das einstellen das die Bilder per Zufall immer kommen nicht der Reihe nach, bzw. das wenn man auf die Homepage klickt nicht immer das gleiche Bild als erstes kommt..
Ansonsten finde ich es wirklich megaklasse!

Kommentar von:26.10.2011 um 11:20 (UTC)
kameraauge
kameraauge
Offline

hallo phillip , ich hab da mal ne frage ....ich habe alles so gemacht wie du hier beschrieben hast ....hat auch funktioniert ....und jetzt kommt das problem ....da ich ja schön das bilder karussel verwende auf meiner seite ist dieses dann nicht mehr aktiv wenn ich diese galerie verwende....hast du da vielleicht einen tipp wie man das ändern kann , so das ich beides verwendne kann ??

LG Grit

Kommentar von:23.09.2011 um 00:17 (UTC)
das-oinky
das-oinky
Offline

ok, das ich das erst hochladen muss hab ich nun verstanden hab mich nochmal schlaun gemacht aber wieso geht es bei mir nicht ?

Kommentar von:22.09.2011 um 23:51 (UTC)
das-oinky
das-oinky
Offline

hi ^^ ich find es super das hier sowas gemacht wird selbst ich vestehe es so langsam !
aber ich hab eine frage wie bekomme ich meine bilder in den Text wenn die Daten imprinzip nicht vorhanen sind ich meine ich kann doch nicht einfac einen bild namen meiner festplatte nehmen oder wes muss doch eine verbindug da sein oder

Lg Oinky

Ps mach weiter so ist echt klasse !



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