Weitere Downloads:
Animation Template
(Animation bei Click auf Image)
Komplettes Beispiel (Modul+AniTemplate+Images)
Carousel CSS-Datei Steuert (derzeit) das Aussehen des Titels
|
Speichere Dein eigenes jQueryUI-Theme auf jQueryUI-Themegallery, oder wähle ein Theme aus der Gallerie aus. |
|
HTML5. Webseiten innovativ und zukunftssicher |
| 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.
|
| 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({
jsonScript : 'json/images.json',
onPicClick : function(base, imageBlock, i) {
showDetails(base,imageBlock, i);
}
});
Allgemeine Syntax:
// jQuery
$('#carousel').jCarousel({
jsonScript : 'json/images.json',
onPicClick : function(base, imageBlock, i) {
// example:
// alert(base.image[i]["id"];
}
});
Changelog
| 0.9.3 | Fehler, der bei Konfiguration "kein json verwenden" auftrat beseitigt |
| 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.
Hi! Schade, daß das Script keine Transparenz unterstützt, z.B. oval freigestellte Portraits ... ( -: roland :- )
Hallo Roland, das ist richtig. Das funktioniert derzeit nur, wenn man das Overlay bei "perspective" und "global" auf null stellt. da muss ich mir mal was überlegen, um das "problem" zu lösen. Vielleicht hat ja jemand eine zündende Idee.
pro
good web designer.
I have tested my use of this script almost successfully across all current browsers. The following is a two-part question... One problem I am am encountering, at the moment is when displayed in Safari it only shows 5 out of 6 thumbnails. Where is the setting to fix this? Here is a link to the page I am testing: http://xdreamdesigns.com/IATC0711/ITC_prototype_ver1.html Also, I would like to be able to add content such as product information to appear alongside the clicked image. Thank you.
Hallo Erik, erst einmal vielen Dank für dieses großartige Script. Ich habe als Vergleichbare Alternative lediglich dieses hier gefunden: http://jquery-ui.googlecode.com/svn/branches/labs/carousel/demo/index.html Es funktioniert aber nur mit der Legacy jQuery-Variante - somit ist deines vorzuziehen. Beim Ausprobieren deines Plugins OHNE Json-Datei wurde der div für das erste Bild immer mit einer Breite von 0px versehen und dieses ist somit nicht sichtar. MIT Json-Datei funktioniert alles wunderbar. Kann es sein, dass du den Parameter zur Angabe der Json Datei irgendwann verändert hast? In der Beispiel Datei steht noch \"jsonPath\" anstatt \"jsonScript\". Viele Grüße, Andreas
Hallo Andreas, ich habe das „Komplettbeispiel“ noch einmal hochgeladen. Tatsächlich war der Parameter in der example.html falsch. Diesen hatte ich irgendwann mal geändert, aber vergessen im Beispiel nachzuziehen. Richtig ist „jsonScript“ In dem Komplettbeispiel gibt es jetzt zwei beispiel-html-dateien. Ich habe noch einmal das ganze ohne JSON mit in das Beispiel mit aufgenommen. Die Bilder werden ohne Probleme angezeigt. Schick mir doch mal Dein Beispiel. Vielleicht lässt sich das Problem so lösen. VG Erik
Awesome! How can I put a link to the text in JSON script? example: I want to put a link to the first word (Lorem) when the first image (Bild 1) appears. Any help?
Very good effects - cannot see the image TITLES and DESCRIPTIONS ?
Hi, great carousel - however I need to have each image change on rollover - there\'ll be a pop-up description in a bubble hovering above each image. I\'m therefore not wanting to use all the JSON titles and descriptions (which are easy enough to remove even for a noob like me) but I need to switch each image (there are 9 altogether) on rollover. Hope that all makes sense and any help will be greatly appreciated. Many thanks, Dylan PS I\'m surew other people have pointed this out but you need to change jsonPath to jsonScript on your example doc.
I\'m new at this, so please bear with me, I can\'t get the carousel to work. What is the basic HTML source code I should enter for the head and for the body. Thanks
Hi Loz, please take a look to the complete example. Today, I upload a new version of the example-file, so the example works now. Erik
Hallo zusammen, wirklich ein sehr gutes Skript und sehr gut programmiert. Bei mir zeigt sich jedoch ein Problem und dieses nur im Firefox. Ich zentriere das jCarousel mit align=\"center\". Hier verschiebt er mir dann aber nur im FF das Overlay und den Image Title... Hat hier jemand ne Idee? Thx
Hallo Erik, danke für das tolle Plugin. Ich bin nur auf einen Bug gestoßen. Sobald man auf ein Bild geklickt hat, funktionieren die Buttons nicht mehr. Hast du vielleicht eine Ahnung woran das liegen könnte? Ich komm leider zu keiner Lösung. Danke, Manuel
