1. Requirements
2. Usage
3. Properties explanation
4. Resources
5. Disclaimer
6. License
7. Change Log

This widget is a simple wrapper of the JCarousel jquery extension.

This widget will let you use a simple dataProvider to create your carousel

Requirements ¶

Tested on Yii 1.1.7

Usage ¶

Just put the extension inside your application extension directory and then you can easily use this widget

$this->widget('ext.JCarousel.JCarousel', array(
    'dataProvider' => $dataProvider,
    'thumbUrl' => '"/galleria/thumbs/thumb_".$data->file_name',
    'imageUrl' => '"/galleria/".$data->file_name',
    'target' => 'big-gallery-item',
));

Properties explanation ¶

Standard Properties ¶

• thumbUrl - the src attribute of the image in the carousel
• imageUrl - the url of the big image
• target - the div id where the big image will be loaded

Additional Properties ¶

• altText - php expression that will be evaluated to fill the image alt attribute both on the carousel and on the imageElement generated by default when clicking on the thumbnail
• titleText - the same of altText but for the title attribute. If you won't use this property the title attribute will have the same value of alt. If you set it to boolean false no title attribute will be displayed.
• skin - the carousel will be wrapped inside a div with a class jcarousel-skin-tango. If you want to change tango to your own skin name use this property.
• linkClass - this is a PHP expression that will be evaluated to give a class name to each link inside your carousel
• clickCallback - is the js code that will be executed when someone click on one of the carousel images.
  If you won't set this property the default behaviour is to load the big image inside the target div.
  If you want to set this property you have the following javascript variables that you can use inside:
  itemSrc = the src value of the link
  itemClass = the class value of the link
  itemAlt = the alt attribute text
  itemTitle = the title attribute text
  target = the target id. You can use it like this $(target).html("whatever");
  imageElement = the image tag with the src attribute setted correctly
• cssFile - the URL of the CSS file used by this JCarousel. Defaults to null, meaning using the integrated CSS file.
  If this is set false, you are responsible to explicitly include the necessary CSS file in your page.

JCarousel Properties ¶

JCarousel properties are explained in the official documentation linked below.
You can use them just like any other property.

ie:

$this->widget('ext.JCarousel.JCarousel', array(
    'dataProvider' => $dataProvider,
    'thumbUrl' => '"/galleria/thumbs/thumb_".$data->file_name',
    'imageUrl' => '"/galleria/".$data->file_name',
    'target' => 'big-gallery-item',
    'vertical' => true,
));

Resources ¶

• JCarousel Project Page
• JCarousel Documentation
• JCarousel Demos

Disclaimer ¶

I just made the wrapper, i don't take any responsibility about any possible bug of the JCarousel javascript code.

License ¶

JCarousel is released both under MIT and GPL licenses

Change Log ¶

5-19-2011
version 1.1
now it can handle alt and title attributes on the image