jQuery Carousel

Download

Version: 0.9.2 beta

Weitere Downloads:
Animation Template
(Animation bei Click auf Image)

Complete Example (beeinhaltet Version 0.9.1) (Modul+AniTemplate+Images)

Carousel CSS-Datei Steuert (derzeit) das Aussehen des Titels

jCarousel im Web

jCarousel Buchtip

HTML5. Webseiten innovativ und zukunftssicher

Promo

General Settings

width:(px)
height:(px)
speed:
maxSpeed:
perspective:
dynamic:

Other Settings

showImageTitle:
JSON:
showButtons:

Reflection

reflection:(%)
reflectionStart:
reflectionEnd:

Overlay

perspect.:(%)
global:(%)
color:

Values

width	Bestimmt die Breite des Carousel-Containers
height	Bestimmt die Höhe des Carousel-Containers
speed	Grundgeschwindigkeit, wenn kein MouseOver. Negative Werte ändern die Drehrichtung.
maxSpeed	Geschwindigkeit bei MouseOver. Je höher der Wert, desto stärker nimmt die Geschwindigkeit zu, wenn der Curser zum linken oder rechten Rand bewegt wird.
perspective	Je höher der Wert, desto weiter weg erscheinen die Bilder im Hintergrund.
dynamic	Je höher der Wert, desto mehr ruckelt jQueryCarousel. Dafür sinkt die CPU-Last. Ab einem Wert von 60 nimmt die CPU-Last deutlich ab.
showImageTitle	Titel, der im JSON-Script als "title"-parameter für das bild hinterlegt ist
json	Um die Bilder per JSON zu laden, muss der Pfad zum JSON-Script angegen werden. Soll kein JSON verwendet werden, werden automatisch alle Bilder, die sich innerhalb des jQueryCarousel-Containers befinden geladen. Die Bilder müssen dann die CSS-Klasse "carousel" zugewiesen bekommen. `<div> id="carousel"> <img src="images/image1.jpg" class="carousel"> <img src="images/image2.jpg" class="carousel"> </div>`
reflection	Bodenreflektion. Das Erscheinungsbild der Reflection kann sich bei Browsern mit "Canvas-Unterstützung" (Firefox, Safari, Chrome, Opera) und Browsern ohne "Canvas-Unterstützung" (IE) abweichen. Hinweis: Das Anschalten von "reflection" erzeugt erhöhte CPU-Last. (Values: 0-100)
reflectionStart	Bestimmt die Stärke des Effektes am Anfang der Reflektion (Values: 0-100)
reflectionEnd	Bestimmt die Stärke des Effektes am Ende der Reflektion (Values: 0-100)
perspective (Overlay)	Stärke der Überlagerung bei den Bildern im Hintergrund. Hinweis: es handelt sich um keinen Alphaeffekt
global	Stärke der Überlagerung bei allen Bildern
color	Farbe der Überlagerung
Alle Parameter sind optional. Die vorgegeben Werte sind die Standardwerte.

Hinweis: Die aktuellen Version von jQueryCarousel ist eine Beta-Version.

jQueryCarousel ist ein Plug-In für jQuery zur 3D-Animation von Bildern. Die aktuelle Version wurde unter der jQuery - Version 1.4.2 getestet. Um das jQuery - Carousel nutzen zu können muss jQuery im Script includiert sein. Derzeit können mehrere Parameter (siehe ConfigBereich) geändert werden. Mit den nächsten Versionen wird der Umfang an änderbaren Parametern erweitert. Im Downloadbereich kann zusätzlich zu der Basiskomponente ein Script heruntergeldaen werden, die es ermöglicht, bei Klick auf ein Bild, Detailinformationen anzuzeigen.

jQueryCarousel nutzt als Datenquelle JSON (Weitere Informationen zu JSON). Der Zugriff auf Bilder innerhalb des HTML-Scriptes befindet sich derzeit noch in der Entwicklung. Das JSON-Script muss folgende Struktur haben (unter Downloads kann auch hierzu ein komplettes Beispiel heruntergeladen werden):


  {
    "items": 
    [
      {
        "id": "1",
        "bez": "img1",
        "src": "images/img1.jpg",
        "title" : "Bild 1",
        "description" : "Lorem ipsum dolor sit amet, jQuery Carousel elitr,..."
      },
      {
        "id": "2",
        "bez": "img2",
        "src": "images/img2.jpg",
        "title" : "Bild 2",
        "description" : "Lorem ipsum dolor sit amet, jQueryCarousel elitr,..."
      }
    ]
  }

Um eigene Funktionalitäten bei Click auf ein Bild zu hinterlegen, kann dies über die Konfiguration gesteuert werden. Folgendes Beispiel ruft die Funktion "showDetails" auf. Bei Click auf ein Bild, werden die Details zu dem Bild angezeigt. (das Script dazu kann unter "downloads" heruntergeladen werden)


  // jQuery             
  $('#carousel').jCarousel({
    jsonPath : 'json/images.json',
    onPicClick  : function(base, imageBlock, i) {
      showDetails(base,imageBlock, i);
    }
  });
      
  Allgemeine Syntax:
  
  // jQuery
  $('#carousel').jCarousel({
    jsonPath : 'json/images.json',
    onPicClick  : function(base, imageBlock, i) {
      // example:
      // alert(base.image[i]["id"];
    }
  });

Changelog

0.9.2	Integration von Buttons zur manuellen Steuerung des jquery - Carousels.
0.9.1	Erstellt

HTML5 ist die aktuelle Version der HypertextMarkupLanguage (HTML). jCarousel und auch diese Website verwenden HTML5 (Hinweis: nicht alle Browser unterstützen HTML5. Deshalb werden zum Beispiel nur in den aktuellen Versionen von Chrome, Safari und Opera die Slider zum Konfigurieren von jCarousel angezeigt) Mehr Informationen zu HTML5 ist in einschlägiger Literatur nachzulesen.

Name:
Email*
Text