201023Apr

Cloud Carousel: jQuery-Plugin für 3D-Carousels

Um Bilder oder Produkte auf einer Website zu präsentieren, bieten sich etliche Effekte und Möglichkeiten an. Ein 3D-Carousel dürfte den meisten Surfern bekannt sein. Diese Komponente wurde bisher in der Regel mit Flash realisiert — in JavaScript wurden diverse Skripte entwickelt, allerdings waren diese bisher nicht ausgereift. Bei "Professor Cloud" findet sich nun ein gutes 3D-Carousel, das als jQuery-Plugin auf einer Website integriert werden kann.

Cloud Carousel

Das "Cloud Carousel" funktioniert sehr gut und hat in der Minifed-Version eine Größe von etwa 5 KB. Mit Pfeilen lässt sich die Rotation des Carousels steuern und optional kann auch ein Zusatzttext ausgetauscht werden, sobald die Bilderreihe rotiert wird. Wie man das Plugin verwendet und welche Optionen zur Verfügung stehen, kann in der Dokumentation nachgelesen werden. Auf der Seite des Entwicklers wird das Skript mit dem Lightbox-Klon "Slimbox" verwendet. Sehr schön gelöst ist zudem die Darstellung des Carousels, falls ein Benutzer JavaScript deaktiviert haben sollte.

Kommentare

cebito schrieb am 25.04.2010 #1

Schon chic, aber es stellte mich noch nicht vollends zufrieden, also hab ich mir die http://github.com/brandonaaron/jquery-mousewheel/downloads runtergeladen und ein wheel-event integriert:

  • $(options.imgContainer)
  • .bind('mousewheel',this,function(event, delta) {
  • event.data.rotate(delta);
  • return false;
  • });

dafür muss bei den Parametern bspw. "imgContainer: $("#carousel1")" mit angegeben werden.

Was mich noch störte, wenn ich Hochformat und Querformat reinpack, sind die Hochformatigen nicht auf einer Höhe mit den anderen. Dafür hab ich die function leicht verändert und den hinteren Bildern auch noch leicht die Opazität genommen um den Eindruck von Tiefe zu verstärken.


  • if (item.imageOK)
  • {
  • var img = item.image;
  • w = img.width = item.orgWidth * scale;
  • h = img.height = item.orgHeight * scale;
  • img.style.left = x + px ;
  • img.style.top = y-h + px;
  • img.style.opacity = scale;
  • img.style.zIndex = (scale * 100)>>0;
  • if (item.reflection !== null)
  • {
  • reflHeight = options.reflHeight * scale;
  • style = item.reflection.element.style;
  • style.left = x + px;
  • style.top = y + options.reflGap * scale + px;
  • style.width = w + px;
  • if (isMSIE)
  • {
  • style.filter.finishy = (reflHeight / h * 100);
  • } else
  • {
  • style.height = reflHeight + px;
  • }
  • }
  • }

Viel Spaß damit…

Matthias schrieb am 26.04.2010 #2

Hey cebito, tolle Ideen! Der Effekt mit der Opazität unterstützt die räumliche Tiefe sehr gut. Ich denke, dieses Carousel auf jeden Fall ein Vorzeigemodell seiner Art, da es wirklich gut funktioniert. Und sinnvoll erweitern lässt sich das Plugin ja auch, wie es aussieht :-)

deos schrieb am 28.04.2010 #3

Ein ähnliches Plugin gibt es schon ne weile: http://www.fredhq.com/projects/roundabout/
Hat zwar keine Reflektion, dafür einige andere Optionen und Effekte