Erstellung von Diashows (slideshow) und jQuery-Karussells in Drupal 7. Teil 2

Im vorherigen Teil der Lektion haben wir eine Diashow erstellt, bei mir war es die Anzeige von Mitarbeitern der Organisation, Sie können jedoch ein Banner als Kopfzeile der Website verwenden. Allerdings bin ich mit dieser Standardlösung nicht zufrieden und möchte für die Website Schaltflächen für das Umschalten auf die vorherige und nächste Folie erstellen. Das sieht schöner aus als einfach nur Text- oder Zahlen-Schalter.

Ich erinnere daran, dass wir bereits Views und Views_slideshow installiert haben.

Also, ich habe einige Pfeilbilder an den Artikel angehängt, lassen Sie uns diese in unsere Diashow einfügen. Zunächst müssen wir einen Text-Schalter für die Folien hinzufügen.

Unser Umschalter sollte nun mit den Beschriftungen "Next" (Weiter) und "Previous" (Zurück) wechseln.

Die Idee der Platzierung der Schaltflächen ist, mit CSS einen Hintergrund für die Links "next" und "previous" zu definieren und die Links an die gewünschten Positionen zu verschieben, ebenfalls mittels CSS.

Für die Arbeit benötigen wir ein Firefox-Add-on namens FireBug, das praktische Werkzeuge für die Arbeit mit CSS bereitstellt. So sieht der Link-Block des Umschalters in FireBug aus:

Für uns ist die ID der Elemente wichtig, da wir die CSS-Eigenschaften genau über diese IDs ansprechen werden. Außerdem benötigen wir die Bilddateien der Pfeile, diese müssen in den Ordner "images" Ihres Themes kopiert werden.

Kopieren Sie die Pfeilbilder in den Ordner "images" Ihres Themes.

Jetzt bearbeiten wir das CSS, indem wir die folgenden Zeilen zur style.css des Themes hinzufügen. Die Werte müssen Sie entsprechend an Ihr Template anpassen.

a#views_slideshow_singleframe_prev_view_slideshow-block_1 {
    background: url('images/left.png'); /* Bild unseres Pfeils */
    width: 30px; /* Breite des Pfeils */
    height: 0px; /* Höhe kann auf 0 gesetzt werden */
    padding-top: 30px; /* Abstand, gleich der Breite */
    position: relative; /* Position des Links */
    top: 0px; /* Abstand vom oberen Rand des Blocks */
    overflow: hidden;
    z-index: 5; /* Über dem Slideshow-Block positionieren */
    display: block; /* Als Block anzeigen */
}

a ist das Link-Tag, # zeigt an, dass die folgende ID angesprochen wird.

Das CSS für den "next"-Pfeil unterscheidet sich etwas:

a#views_slideshow_singleframe_next_view_slideshow-block_1 {
    background: url('images/right.png');
    width: 30px;
    height: 0px;
    padding-top: 30px;
    position: relative;
    top: 0px;
    left: 30px;
    overflow: hidden;
    z-index: 5;
    display: block;
}

Den "Pause"-Link sollten Sie komplett ausblenden:

a#views_slideshow_singleframe_playpause_view_slideshow-block_1 {
    display: none;
}

Die Werte für Padding und Position können Sie mit FireBug anpassen und dann in style.css eintragen.
Mein finales CSS sieht so aus:

#views_slideshow_singleframe_prev_view_slideshow-block_1 {
    background: url('images/left.png');
    width: 35px;
    height: 0px;
    padding-top: 26px;
    position: relative;
    top: -55px;
    overflow: hidden;
    z-index: 5;
    display: block;
}
#views_slideshow_singleframe_next_view_slideshow-block_1 {
    background: url('images/right.png');
    width: 35px;
    height: 0px;
    padding-top: 26px;
    position: relative;
    top: 0px;
    left: 0px;
    overflow: hidden;
    z-index: 5;
    display: block;
}
a#views_slideshow_singleframe_playpause_view_slideshow-block_1 {
    display: none;
}
#views_slideshow_singleframe_controls_view_slideshow-block_1 {
    height: 0px;
}

Das Banner ist fertig! Im nächsten Teil der Lektion werden wir eine jQuery-Karussell erstellen.