Slideshow mit einer HTML-Seite Teil 2

Nachdem ich gestern im ersten Teil den Aufbau der HTML-Seite und das Design mit CSS beschrieben habe, folgt nun die Programmierung das Ganzen. Es ist gar nicht so schwer wie man Denken könnte. Nur ganze 4 Funktionen brauche ich für meine einfache Slideshow.

Die gesamte Funktionalität habe ich in ein eigenes Objekt gekapselt, um eine übersichtlichere, einfach erweiterbare und flexible Programmierung zu haben. Für solchen Kapseln benutze ich fast immer Literale.

  1. var RED_Slideshow = {
  2. slides : [],
  3. current : 0,
  4. messages : {
  5. first : 'Sie sind am Anfang.',
  6. last : 'Sie sind am Ende der Präsentation.'
  7. },
  8. init : function(element) { } ,
  9. load : function() {},
  10. goto : function(d) {},
  11. create : function() {}
  12. };

Zusätzlich zu den 4 Funktion gibt es noch 3 Eigenschaften. In der Eigenschaft slides werden die anzuzeigenden Slides zwischengespeichert um sie schnell ein- und auszublenden. Die Eigenschaft current repräsentiert das aktuelle Slide welches gerade angezeigt wird und in der Eigenschaft messages existiert ein Unterobjekt welches Meldungen beinhaltet, die im Verlauf der Benutzung dem Betrachter angezeigt werden können.

Mit der Methode init wird die Anwendung gestartet. Sie sucht dabei im angegebenen Container die Slides.

  1. init : function(element)
  2. {
  3. var div = document.getElementById(element).getElementsByTagName('div');
  4. for(var i=0; i<div.length; i++)
  5. {
  6. if(div[i].className == 'slide')
  7. {
  8. this.slides.push(div[i]);
  9. }
  10. }
  11. this.load();
  12. this.create();
  13. document.getElementById('helper').onclick = function()
  14. {
  15. slideshow.goto(+1);
  16. }
  17. },

Als erstes werden die <div>-Tages innerhalb des Containers gesucht, der Klassenname überprüft und dann in die Eigenschaft slides abgelegt. Dann rufe ich die load()-Methode auf, um das aktuelle Slide anzuzeigen. Danach lasse ich über die create()-Methode die dynamische Navigation erzeugen.

Zum Schluss füge ich dem Objekt mit der ID helper einen Klick-Event hinzu. Dies soll nur verdeutlichen, wie auch ohne Buttons navigiert werden kann.

  1. load : function()
  2. {
  3. for(var i=0; i<this.slides.length; i++)
  4. {
  5. this.slides[i].style.display = 'none';
  6. }
  7. this.slides[this.current].style.display = 'block';
  8. },

Die load()-Methode ist super einfach. In ihr durchlaufe ich den Array mit den Slides und füge einen Style hinzu, der alle Slides unsichtbar schaltet. Zum Schluss wird dann das aktuelle Slide explizit auf sichtbar gesetzt.

Damit habe ich eine Methode die bei jedem Aufruf immer das aktuelle Slide anzeigt und alle anderen auf Unsichtbar setzt. So kann diese Methode später auch das Anzeigen von Slides außerhalb der Reihenfolge benutzt werden.

  1. create : function()
  2. {
  3. var form = document.createElement('form');
  4. form.setAttribute('id', 'navigation');
  5. var btn1 = document.createElement('button');
  6. btn1.setAttribute('type', 'button');
  7. btn1.setAttribute('id', 'btn_prev');
  8. btn1.appendChild(document.createTextNode('zurück'));
  9. btn1.onclick = function()
  10. {
  11. RED_Slideshow.goto(-1);
  12. }
  13. var btn2 = document.createElement('button');
  14. btn2.setAttribute('type', 'button');
  15. btn2.setAttribute('id', 'btn_next');
  16. btn2.appendChild(document.createTextNode('nächster'));
  17. btn2.onclick = function()
  18. {
  19. RED_Slideshow.goto(+1);
  20. }
  21. form.appendChild(btn1);
  22. form.appendChild(btn2);
  23. var body = document.getElementsByTagName('body')[0];
  24. var footer = document.getElementById('footer');
  25. body.insertBefore(form, footer);
  26. }

Nun zu der umfangreichsten Methode, da sie die dynamische Navigation erzeugt. Ich habe mich hier für ein kleines Formular entschieden, welches einfache Buttons beinhaltet. Ich erzeugt also zunächst den <form>-Tag und dann die 2 Buttons. Weiterhin fügt ich diesen Buttons noch Klick-Events hinzu, die wiederum eine Literal-Methode aufrufen.

Hier ist auf jeden Fall zu beachten, dass man nicht mit dem Schlüsselwort this arbeitet. Denn würde ich im Klick-Event this verwenden, dann würde sich das this auf den jeweiligen Button beziehen und nicht auf das Literal. Deshalb gehe ich den Umweg über den direkten Aufruf der Literal-Methode.

Zum Schluss setze ich das Formular vor meinen Fußbereich ein, in dem ich als erstes eine Verweis auf den <body>-Tag und dann einen Verweis auf den Fußbereich erzeuge.

  1. goto : function(d)
  2. {
  3. this.current += d;
  4. if(this.current == this.slides.length)
  5. {
  6. //alert(this.messages.last);
  7. this.current = 0;
  8. }
  9. if(this.current < 0)
  10. {
  11. //alert(this.message.first);
  12. this.current = this.slides.length-1;
  13. }
  14. this.load();
  15. },

Die letzte Methode ist für die Navigation bestimmt. Ihr wird entweder der Wert 1 oder -1 übergeben. Dieser Parameter wird zum aktuellen Zähler hinzugefügt.

Als nächstes überprüft die Methode, ob das Ende oder der Anfang der Slideshow erreicht ist und setzt dann eigenständig den Zähler auf den passenden Wert um einen Schleifen-Vorgang zu erzeugen.

Zum Schluss ruft die Methode die load()-Methode auf, um das neue Slide auch anzuzeigen.

Damit ist auch schon das gesamte Slideshow-Literal erklärt. Es fehlt nur die Einbindung dieses Scriptes in die HTML-Datei und der Aufruf der Initialisierung mit der Parameter-Übergabe wo die Slides in der HTML-Datei liegen.

  1. // JavaScript Document
  2. <script type="text/javacript" src="RED_Slideshow.js"></script>
  3. <script type="text/javascript">
  4. //<!{CDATA[
  5. window.onload = function()
  6. {
  7. RED_Slideshow.init('body');
  8. };
  9. //]]>
  10. </script>

Da wir mit der create()-Methode ein neues DOM-Objekt mit der ID navigation erzeugen, habe ich meine CSS-Datei um folgende Formatierung erweitert.

  1. #navigation {
  2. position:absolute;
  3. bottom:3em;
  4. border:1px solid;
  5. width:50%;
  6. height:2em;
  7. margin:auto;
  8. text-align:center;
  9. z-index:2;
  10. left:25%;
  11. }

Downloads

4 Kommentare

Schreib einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.