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 Defines the width of the carousel
height Defines the height of the carousel
speed Basic speed (no mouse over the carousel). Negative values change the orientation of the rotation.
maxSpeed Mouse-over speed. The closer the mouse is to the left or right edge of the carousel the faster it turns.
perspective A higher value gives the carousel more depth.
dynamic Smoothness of the animation. A higher value is less CPU-intensiv, but the effect is less fluid. Above a value of 60 the CPU consumption decreases considerably.
showImageTitle Title of the image, corresponds to the parameter title of the image in the JSON-Script.
jsonScrpit The JSON script path. To load the images via JSON the path to the JSON script must be specified.
If no JSON should be used, all images within the carousel container are loaded aytomatically. The CSS class "carousel" must then be assigned to each image. 
 <div> id="carousel">
   <img src="images/image1.jpg" class="carousel">
   <img src="images/image2.jpg" class="carousel">
 </div>
reflection Bottom reflection. The appearance can vary depending if the browser supports canvas technology (Firefox, Safari, Chrome, Opera) or not (IE 8).
Note that enabling "reflection" increase CPU consumption. Allowed values: 0-100.
reflectionStart Size of the reflection at the front of the carousel. Allowed values: 0-100.
reflectionEnd Size of the reflection at the back of the carousel. Allowed values: 0-100.
perspective (Overlay) Overlay of color layer for images in the back of the carousel.
Note that this is not an alpha effekt
global Overlay of color layer for all images in the carousel.
Note that this is not an alpha effekt
color Color of the overlayed layer.
All parameters are optional. The values in the mask are the default values.




Note: jQueryCarousel is still in a beta-version.


jQueryCarousel is jQuery-based plugin for the 3D animation of images. To use jQueryCarousel jQuery.js must be included. The current version has been tested with jQuery version 1.4.2. jQueryCarousel is highly configurable, see the config section above. Further extensions of the configuration options are planned for the next version. Additionally in the download section a script can be downloaded to enable the display of image information upon click on an image.

jQueryCarousel uses JSON as source data provider. Access to images from within HTML is currently under development. The JSON script needs to have the following structure (see also the complete example in the download section): 


  {
    "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,..."
      }
    ]
  }

Customized functionality can be added to the click action of an image. In the following example the function "showDetails" is called upon click on an image. The full script is downloadable from the downloads section. 


  // 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 Fixed bug that occurred in connection with json.
0.9.2 Integration of buttons to manually control the carousel.
0.9.1 First version.

Comment

Name
Email*
Text


Roland Hentschel - 2010-10-15 20:31:43

Hi! Schade, daß das Script keine Transparenz unterstützt, z.B. oval freigestellte Portraits ... ( -: roland :- )


Erik - 2010-10-17 17:54:39

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.


gio - 2011-03-28 17:40:43

pro


aungphyo - 2011-05-18 10:35:45

good web designer.


William - 2011-07-18 17:04:34

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.


Andreas - 2011-09-21 00:07:36

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


Erik - 2011-09-22 17:03:31

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


Savvas - 2011-09-22 19:48:14

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?


Colin Robertson - 2011-09-23 12:09:43

Very good effects - cannot see the image TITLES and DESCRIPTIONS ?


Dylan Edwards - 2011-09-24 19:33:29

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.


Loz - 2011-09-26 02:30:52

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


Erik - 2011-10-24 23:02:44

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


Dirk - 2011-11-17 19:36:19

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


Manuel - 2012-01-27 11:10:53

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