HpBk-TemplateWorld

Slideshow

Slideshow mit tollen jQuery-Effekten

Einleitung

Sie sind beliebt. Sie sind heiß begehrt. Wer auf seiner Homepage eine Slideshow einfügt, bietet seinen Besuchern ein echtes Highlight. Ich erkläre ich, wie ihr einen simplen Slider mit einem tollen Fade-Effekt erstellen könnt. Und wenn ihr mehr wollt, als nur einen Fade-Effekt ist das auch kein Problem. Denn diese Slideshow bietet euch jede Menge weitere Effekte. Das Ganze wird mit Hilfe von Javascript und dem jQuery Cycle Plugin realisiert und ist wirklich einfacher, als man zuerst denkt.

Schwierigkeitsstufe: Fortgeschritten

Fangen wir mit dem Javascript-Code an.

Der Javascript-Code

Für CSS-Designs
Dieser Code muss in eurem CSS-Design im Header, also innerhalb eures Head-Tags eingefügt werden. Wenn ihr euch jetzt fragt, was das überhaupt sein soll, zeige ich euch hier ein Screenshot. Den sogenannten "Head-Tag" findet ihr im Feld "Text über dem Design", wenn ihr ein CSS-Design besitzt. Ihr seht nun, dass ich den Code bei mir im Feld "Text über dem Design" noch vor dem </head> eingefügt habe.

Für andere Designs
Wenn ihr nicht das CSS-Design besitzt, sondern ein Basis-Design aus dem Baukasten aktiviert das Extra "Eigener Head-Bereich" und fügt den Code dort in das Feld ein.

Der HTML-Code

Kommen wir nun auf den HTML-Code zu sprechen. Wählt euch unter "Seiten" eine Seite aus, auf der die Slideshow später zu sehen sein soll. Wir begeben uns im Seiteneditor in den Quellcode eurer Seite. Dort fügen wir nun ein div-Tag mit dem Namen "Slideshow" ein. Der Code für 4 Bilder sieht folgendermaßen aus:

Natürlich kannst du in deiner Slideshow so viele Bilder einfügen, wie du möchtest.

Der CSS-Code

Wenn wir diese Schritte also alle erledigt haben, fehlt uns nur noch das Aussehen der Slideshow. Der Feinschliff sozusagen. Dazu fügen wir in den "Designeinstellungen" - "Erweiterte Designeinstellungen" im Feld "Text über dem Design" den CSS-Code der Slideshow ein, der wie folgt aussieht:

Hier könnt ihr natürlich entsprechende Änderungen vornehmen, die das Aussehen betreffen. Über width wird die Breite der Bilder definiert, height definiert die Höhe der Bilder. Ihr solltet die Bilder, die ihr in eurer Slideshow einsetzt in der richtigen Größe anlegen, also in der Größe, die ihr im CSS-Code angegeben habt.

So sieht die Slideshow aus:

Wenn ihr mehrere Slideshows einfügen wollt, müsst ihr diese entsprechend umbenennen. Bsp: Ihr habt schon eine Slideshow, wollt aber noch eine andere mit einem anderen Effekt. Dann müsst ihr dieser zweiten Slideshow einen anderen Namen geben, sowohl im HTML-Code, den ihr unter "Seiten" einfügt, als auch im Java-Script-Code $('.slideshow').

Weitere Slideshow-Effekte

Doch natürlich gibt es auch noch jede Menge andere Möglichkeiten die Slideshow zu gestalten. Und deshalb möchte ich, statt hier nur zu labern, was man noch machen könnte, euch einige weitere Slideshow-Effekte zur Verfügung stellen, damit ihr sie gleich bei euch einfügen könnt.

Um den Slide-Effekt zu ändern, müssen wir entsprechend nur einen Wert im Javascript-Code ändern.


<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/82955745/slideshow1.js"></script>

<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/82955745/slideshow2.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow')
    .after('<div id="nav">')
    .cycle({
        fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
    pager: '#nav'
    });
});
</script>

Der fett und rotmarkierte Wert "fade" spielt nun die entscheidende Rolle, welch coolen Effekt unsere Slideshow machen soll. Es gibt eine ganze Liste mit Effekten, die ihr weiter unten auf dieser Seite findet und einfach mal ausprobieren könnt, was euch am besten gefällt.

zoom-Slideshow

Der einzufügende Code (im Head-Bereich):


<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/82955745/slideshow1.js"></script>

<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/82955745/slideshow2.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow')
    .after('<div id="nav">')
    .cycle({
        fx: 'zoom', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
    pager: '#nav'
    });
});
</script>

shuffle-Slideshow

Der einzufügende Code (im Head-Bereich):


<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/82955745/slideshow1.js"></script>

<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/82955745/slideshow2.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow')
    .after('<div id="nav">')
    .cycle({
        fx: 'shuffle', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
    pager: '#nav'
    });
});
</script>

turnDown-Slideshow

Der einzufügende Code (im Head-Bereich):


<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/82955745/slideshow1.js"></script>

<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/82955745/slideshow2.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow')
    .after('<div id="nav">')
    .cycle({
        fx: 'turnDown', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
    pager: '#nav'
    });
});
</script>

toss-Slideshow

Der einzufügende Code (im Head-Bereich):


<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/82955745/slideshow1.js"></script>

<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/82955745/slideshow2.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow')
    .after('<div id="nav">')
    .cycle({
        fx: 'toss', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
    pager: '#nav'
    });
});
</script>

Liste mit Slideshow-Effekten

blindX
blindY
blindZ
cover
curtainX
curtainY
fade
fadeZoom
growX
growY
none
scrollUp
scrollDown
scrollLeft
scrollRight
scrollHorz
scrollVert
shuffle
slideX
slideY
toss
turnUp
turnDown
turnLeft
turnRight
uncover
wipe
zoom

Kommentare zu dieser Seite:

Kommentar von:	22.03.2017 um 16:46 (UTC)
Bahnland-Sachsen Offline	Funktioniert seit 18.03.2017 nicht mehr?! :o Grüße

Kommentar von:	01.05.2015 um 21:01 (UTC)
(gesperrter Nutzer)	Nutze ich auf meiner neuen Startseite. Super. Lob!

Kommentar von:	20.01.2014 um 22:50 (UTC)
hpbk-templateworld Offline	@ Petra: Vielen Dank für deinen Kommentar. Kannst du mir dein Problem bitte im Community-Board mit einem Link schreiben? Dann könnte ich mir das Ganze einmal ansehen, um die Ursache des Problems zu finden. Vielen Dank!

Kommentar von Petra Borrmann( malereipetra-borrmann.com ), 20.01.2014 um 09:10 (UTC):
Hallo,
danke für die tolle Slideshow. Habe die einfachste Variante gewählt, sie funktioniert - allerdings mit einer fehlerhaften Darstellung:
Die Anzahl der verwendeten Bilder wird auf auf der linken Seite, leider mitten im Navigationsmenü, in blauer Schrift dargestellt. Zusätzlich sind die Zahlen unterstrichen.
Wie kann ich diese Zahlen verschwinden lassen? Vielen Dank für Ihre Hilfe im Voraus. Petra

Kommentar von:	26.01.2013 um 19:32 (UTC)
(gesperrter Nutzer)	Jep ist nice der Slider jetz kann ich mir die anderen Sachen suchen! Danke. MFG :D

Kommentar von:	20.08.2012 um 10:40 (UTC)
schwarzewaechter Offline	Tolles Tutorial! Aber ist es auch möglich, die Zeit zu verändern, damit die Bilder z.B. langsamer wechseln?

Kommentar von:	22.06.2012 um 20:28 (UTC)
dayclub Offline

Kommentar von:	18.01.2012 um 18:46 (UTC)
(gesperrter Nutzer)	endlich ein tutorial zu einer slideshow. ich libe sie nämlich doch es gibt so wenige die erklären wie man eine macht. danke dafür

Kommentar zu dieser Seite hinzufügen: