Anzeige
Tutorialbeschreibung

jQuery-Cycle-Slider mit Dreamweaver

jQuery-Cycle-Slider mit Dreamweaver

jQuery ist ein freies, umfangreiches JavaScript-Framework, das komfortable Funktionen zur DOM-Manipulation (Document Object Model) und -Navigation zur Verfügung stellt. jQuery ist die meistverwendete JavaScript-Bibliothek.

Dieses Tutorial zeigt, wie ihr ohne Flash einen interessanten Bildübergang in vielerlei Varianten durch jQuery ermöglichen könnt. Hierbei ist kein Download der Javascript-Dateien notwendig, da der Quellcode online unter http://jquery.malsup.com/cycle/ auf die entsprechenden Daten zugreift.

Übergangsmöglichkeiten sind zum Beispiel eine Überblende, ein Verschieben von rechts nach links, oben und unten, ein Wechsel, eine Drehung etc.


01.

Öffnet in Dreamweaver ein neues HTML-Dokument.


02.

Tragt nun nach Belieben in den title ein, was später oben im Explorer stehen soll; zum Beispiel:
<title>Meine_Cycle-Slider</title>

03.

Fügt nun darunter den folgenden Quelltext unter dem title ein:
<style type="text/css">
     .slideshow img { padding: 2px; border: 1px solid #000; background-color: #fff; }    <!--  padding und border (Rahmen) eurer Bilder  -->

</style>
<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.74.js"></script>

<!--  initialize the slideshow when the DOM is ready -->
<script type="text/javascript">
$(document).ready(function() {
     $('.slideshow').cycle({

          fx: 'fade' // Wählt hier einen Übergang, zB: fade, shuffle, zoom, turnDown, curtainX, etc.

     });
});
</script>

Padding und Border, die den Bilderrahmen angeben, müssen nicht unbedingt sein und können auch gelöscht oder auf 0 gestellt werden.

Bei fx könnt ihr den Übergang nach Belieben verstellen, indem ihr die entsprechenden Worte einsetzt, wie z.B.: fade, shuffle, zoom, turnDown, curtainX, etc.


04.

In den Body fügt ihr folgenden Text ein:
<div class="slideshow">
     <img src="img/01.jpg" width="720" height="225"/>
     <img src="img/02.jpg" width="720" height="225"/>
     <img src="img/03.jpg" width="720" height="225"/>
     <img src="img/04.jpg" width="720" height="225"/>
</div>

Setzt hier die Links der Bilder hinein, die in eurer Slideshow vorkommen sollen. Die Anzahl der Bilder ist beliebig und auch die Größe ist definierbar. Passt diese Werte euren Bildern und Contents an.

Euer Ergebnis müsste (je nach Bild und Formatwahl) nun so aussehen und überblenden:

Bilder



 

05.

Auf diese Art und Weise könnt ihr entweder einen Banner mit überblendenden Bildern erstellen oder mehrere Bilder in einer Slideshow auf wenig Platz unterbringen.

Bilder



 

06.

Es gibt viele verschiedene Möglichkeiten, Übergänge zu gestalten. Hier sind einige Beispiele:

Setzt in den folgenden Bereich nach fx statt dem xxx eine der vielen Varianten:
$('.slideshow').cycle({
     fx: 'xxx'
});

• Überblende:
fx: 'fade'
Bilder



• Nach unten klappen:
fx: 'turnDown'
oder
fx: 'turnUp'
oder
fx: 'turnLeft'

oder
fx: 'turnRight'

Bilder



 
• Drehen:
fx: 'curtainX'
oder
fx: 'curtainY'

Bilder



X/Y beschreibt die Achse, in der sich das Bild drehen soll.
"X"= waagerecht
"Y"= senkrecht

 
• Scrollen:
fx: 'scrollRight'
oder
fx: 'scrollLeft'
oder
fx: 'scrollUp'
oder
fx: 'scrollDown'

Bilder



Right /Left /Up /Down beschreibt die Richtung, in der sich die Bilder bewegen sollen.

 

• Zoomen:
fx: 'zoom'

Bilder



• Hinten einordnen:
fx: 'shuffle'

Bilder



 

• Einblende:
fx: 'blindX'
oder
fx: 'blindY'
oder
fx: 'blindZ'

Bilder



"X" = waagerecht
"Y" = senkrecht
"Z" = diagonal


• Zoomen mit Überblende:
fx: 'fadeZoom'

Bilder



 
• Wechsel:
fx: 'uncover'

Bilder



• Diagonaler Wechsel:
fx: 'wipe'
Bilder



07.

Ihr könnt auch eine beliebige Schnelligkeit des Wechsels wählen, indem ihr einfach eine Zeile unter „fx“ mit der Geschwindigkeit schreibt. Z. B.:
fx:    'fade', 
speed:  2500

So dauert die Animation beispielsweise insgesamt 2,5 Sekunden.


 

08.

Ihr könnt auch die Zeit einzeln definieren, in der das entsprechende Bild ohne Übergang gezeigt wird, indem ihr ein Timeout zusätzlich einsetzt.
fx:    'fade',
speed:    300,
timeout:  2000

So läuft die Animation - hier fade - sehr schnell ab, und das Bild bleibt eine längere Zeit sichtbar.


09.

Nun könnt ihr eine Pause einfügen, wenn der Cursor sich über dem Bild befindet, indem ihr in einer neuen Zeile einfach eine Pause hinzufügt. Dabei ist es egal, ob ihr eigene Einstellungen in Schnelligkeit etc. vorgenommen habt.
fx:    'fade',
pause:  1,
speed:    300,
timeout:  2000

Wichtig ist nur, dass hinter jeder Aufzählung ein Komma steht, sonst funktioniert dies alles nicht.


10.

Ihr könnt die Bilder auch in Random-Einstellung wechseln lassen, wenn sie keine feste Ordnung besitzen sollen.

fx:    'fade',
random:  1


11.

Die Entfernung von der shuffle-Einstellung kann natürlich auch geändert werden:
fx:   'shuffle',
shuffle: {
top:  -230,
left:  230 }

So kann eine bestimmte Richtung und Entfernung nach Wunsch eingehalten werden.


 

12.

Wenn die Bildabfolge durch Klick gewechselt werden soll, benötigt ihr folgende Einstellung:
fx:     'fade',
speed:  300,
next:   '.slideshow',
timeout: 0   

13.

fx:     'fade', 
speed:   300, 
timeout: 3000, 
next:   '.slideshow', 
pause:   1 

Auch eine Pause ist möglich, wenn der Cursor sich auf dem Bild befindet.


14.

Jedes Element des <div>-Containers bekommt diesen Effekt. Daher funktioniert dies auch mit Text oder Text/Bild-Blöcken.

Bilder



 

15.

Wichtig ist bei mehreren Bildergalerien auf einer Seite, dass ihr eine entsprechende Benennung einsetzt.

Die verschiedenen Slideshows müssen entsprechend mit beispielsweise s1 und s2 gekennzeichnet sein.
<script type="text/javascript">
$(document).ready(function() {
     $('.s1').cycle({
          fx: 'fade'
     });
     $('.s2').cycle({
          fx: 'zoom'
     });
});
</script>

Bei der Definierung des borders und paddings z. B.:
<style type="text/css">
.s1 img { padding: 15px; border: 1px solid #fff; background-color: #000; }
.s2 img { padding: 20px; border: 2px solid #ccc; background-color: #eee; }

Und natürlich müssen auch die entsprechenden Bilder- oder Text-Container zugewiesen werden. Z. B.:
<div class="s1">
     <img src="img/01.jpg" width="720" height="225"/>
     <img src="img/02.jpg" width="720" height="225"/>
     <img src="img/03.jpg" width="720" height="225"/>
</div>
<div class="s2">
     <img src="img/04.jpg" width="720" height="225"/>
     <img src="img/05.jpg" width="720" height="225"/>
     <img src="img/06.jpg" width="720" height="225"/>
</div>

Ich bedanke mich für das Interesse an diesem Tutorial und wünsche viel Spaß beim Ausprobieren.

DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von hannanass
  • 16.10.2012 - 11:08

Super TUT :-) genau das was ich brauche ;-)

Portrait von FrauFlamme
  • 15.08.2011 - 19:14

Gefällt mir auch total gut und sieht auch schick aus im Firefox. Aber leider nicht im IE. Hast Du noch einen Tipp, wie man das auch für den IE hinbekommt? Danke!

Portrait von Lordi
  • 29.06.2011 - 04:54

Danke für dieses doch recht ausführliche tut. Die 10 Punkte haben sich gelohnt.

Portrait von dmoritz
  • 28.02.2011 - 11:50

Danke für dieses Tutorial.
Ich hab schon das Ein-Oder-Andere mit jQuery probiert, das war allerdings nicht soo von Erfolg gekrönt. Aber ich denke ich sollte mich da mal genauer einlesen, das scheint äußerst effektiv.
Und funktioniert obendrein auch noch in allen gängigen Browsern (inklusive iPad).
Sehr schön.

Portrait von Tragg0r
  • 10.02.2011 - 11:30

Hi,

sry für den Doppelpost aber ich hab Angst das der Eintrag sonst unter geht:

Ich bin noch nicht wirklich fit in Sachen außerhalb von HTML und CSS:

Eingebunden wird hier dieses schöne Teil bzw. die Bilder per <div> und dann die Auflistung der einzelnen Bilder </div>...
Ich möchte auf meine Homepage öfter mal neue Bilder einbinden und hab dann kein Lust da jedesmal im Code rummzufuschen, kann ich mir da nicht was auf Basis von Php + Datenbank basteln?

Also das in dem <div> nicht die Bilder aufgelistet werden, sondern im <div> php mittels include eingebunden wird und ich dann mittels einer Adminoberfläche Bilder hochlade.

Oder funktioniert dann der jQuery-Slider nicht mehr?

Wäre der Aufwand groß eine Bilderdatenbank und die dazugehörige Adminoberfläche zu basteln?

Wäre euch Dankbar für ein paar Infos ob das generell möglich ist, dann würde ich mich da mal dran versuchen!!

Portrait von Tragg0r
  • 08.02.2011 - 16:05

Richtig geil! Danke für das Tutorial.

Portrait von Talisac
  • 28.01.2011 - 07:44

Echt Klasse ich bin hin und weg!!!
gleich mal wo rein bringen

Portrait von MeiSeed
  • 26.01.2011 - 11:45

Sehr Schönes Tutorial, danach habe ich schon gesucht.

Portrait von nellynelly
  • 23.01.2011 - 20:11

Danke für dieses Tutorial. Werde ich auch ausprobieren.

Portrait von chaoskurt
  • 22.01.2011 - 21:30

Danke für dieses Tutorial ! Werde mal testen ob sich das auch in Joomla anwenden lässt.

Portrait von s-worx
  • 21.01.2011 - 12:36

Danke für das Turorial! Durch die Beschreibung sehr einfach einzupflegen ;)

Portrait von romox
  • 16.01.2011 - 19:47

Habe ich etwas übersehen, oder fehlt hier eine Live-Demo?
Beim nächsten Mal unbedingt beachten ;-)

Portrait von akpotosufredrick
Portrait von energie95
  • 15.01.2011 - 16:02

Super Tutorial! Sofort auf meine Seite eingebaut - Prima, Danke!

Portrait von jackmacneill
  • 14.01.2011 - 21:48

Dieses Tutorial gefällt mir! Danke!

Portrait von ArnoPl
  • 12.01.2011 - 13:24

Die show ist gut, aber ich habe sie eingebaut aber sie funst nicht im IE!
Was könnte das denn sein!? Im firefox läuft sie Klasse!

VG Arno

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 10.01.2011 - 12:20

Sehr schönes Tutorial, werde ich mal ausprobieren.
Danke

x
×
×