CMS-Experte | IT-Consultant in Berlin

jCarousel ist ein jQuery-Plugin von Jan Sorgalla, mit dem Listenelemente horizontal und vertical gescrollt werden können. Besonders gut eignet sich jCarousel zur Präsentation von Bildern.

Seit ich mich eingehender mit jQuery auseinandergesetzt habe, ist meine Aversion gegen JavaScript fast schon in Sympathie umgeschlagen. Weshalb das so ist, zeigt beispielsweise der folgende Code, mit dem ich den jCarousel-Block im Bereich Referenzen realsiert habe.

Eines der netten neuen Features von Drupal 5 ist, dass jQuery als JavaScript-Bibliothek verwendet wird. Mit der folgenden einfachen Theme-Funktion füge ich die erforderlichen JavaScript-Referenzen hinzu und erzeuge ein JavaScript-Array mit der Funktion drupal_to_js(). Als Argument übergebe ich ein PHP-Array, aus dem im JavaScript-Code Attribute für die Tags IMG und A erstellt werden.

function theme_carousel_block() {
  $path = drupal_get_path('module', 'carousel');
  drupal_add_css($path . '/carousel.css');
  drupal_add_js($path . "/js/jquery.jcarousel.pack.js");
  
  $img_dir = getcwd() . '/images/stories/Referenzen';
  foreach (file_scan_directory($img_dir, '.jpg$') as $img) {
    $img_name = str_replace('_screen', '', $img->name);
    $images[] = $img_name;
  }

  drupal_add_js('var itemList = ' . drupal_to_js($images) .';', 'inline');
  drupal_add_js($path . "/js/referenzen.js");
  return '<div id="carousel"><ul></ul></div>';
}

Der JavaScript-Code ist dank jQuery und jCarousel ebenfalls sehr übersichtlich. Durch Klick auf einen der Buttons zur Navigation im Karussell wird die Funktion loadItemHandler() aufgerufen. Die einzelnen Bilder werden mit dieser Funktion dynamisch hinzugefügt.

Die Funktion getItemHTML() erzeugt den HTML-Code aus dem jeweiligen Array-Element, das übergeben wird.

Da ich die Bilder nicht über eines der geeigneten Drupal-Module hochgeladen habe, sind sie für Drupal auch nicht mit den entsprechenden Inhalten verknüpft. Andernfalls wäre es geschickter, im PHP-Code ein assoziatives Array zu erzeugen, dessen Elemente jeweils Verweise auf Bild und Dokument enthalten, und dieses in die JavaScript-Variable itemList umzuwandeln.

Was ein Glück, dass jeweils beide zu erzeugenden URLs das übergebene Array-Element als gemeinsamen Bestandteil haben ;-)

Schließlich wird beim Laden der Seite die Funktion jcarousel() aufgerufen, die das Karrussell in den DIV-Container mit der id carousel einfügt oder beser gesagt hineinzaubert.

function loadItemHandler(carousel, start, last, available) {
    if (!available) {
        for (var i = start; i <= last; i++) {
            if (i > itemList.length) {
                break;
            }
            carousel.add(i, getItemHTML(itemList[i - 1]));
        }
    }
    // Trigger loaded
    carousel.loaded();
};

function getItemHTML(imgName) {
    var url = 'http://www.ramiro.org/images/stories/Referenzen/'+ imgName +'_screen.jpg';
    var link = 'http://www.ramiro.org/referenzen/website-projekte/'+ imgName +'.html';
    return '<a href="'+ link +'"><img src="' + url + '" width="' + 140 + '" height="' + 100 + '" alt="'+ imgName +'"/></a>';
};

// Ride the carousel...
jQuery(document).ready(function() {
    jQuery("#carousel").jcarousel({
        itemVisible: 1,
        itemScroll: 1,
        wrap: true,
        loadItemHandler: loadItemHandler
    });
});

Der Vollständigkeit halber folgt auch noch der CSS-Code, über den das Aussehen des Bilder-Karussells definiert wird. Weitere interessante Beispiele gibt es auf der jCarousel-Homepage. Viel Spaß beim Ausprobieren!

/**
 * This 
 element is wrapped by jCarousel around the list
 * and has the classname "jcarousel-scope".
 */
.jcarousel-scope {
    position: relative;
    width: 140px;
    -moz-border-radius: 10px;
    background: #242424;
    padding: 10px 40px;
}

/**
 * Similar styles will be applied by jCarousel. But we additionally
 * add it here for better displaying with browsers having
 * javascript disabled.
 */
.jcarousel-list {
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.jcarousel-list li {
    float: left;
    list-style: none;
    width: 140px;
    height: 100px;
    margin-right: 10px;
}

/**
 * The buttons are added dynamically by jCarousel before
 * the 
 list (inside the 
 described above) and
 * have the classnames "jcarousel-next" and "jcarousel-prev".
 */
.jcarousel-next {
    position: absolute;
    top: 50px;
    right: 5px;
    width: 25px;
    height: 25px;
    cursor: pointer;
    border: 1px solid #111;
    color: #800;
    background-color: #000;
    font-weight: bold;
}

.jcarousel-next-disabled {
    color: #570000;
    cursor: default;
}

.jcarousel-prev {
    position: absolute;
    top: 50px;
    left: 5px;
    width: 25px;
    height: 25px;
    cursor: pointer;
    border: 1px solid #111;
    color: #800;
    background-color: #000;
    font-weight: bold;
}

.jcarousel-prev-disabled {
    color: #570000;
    cursor: default;
}