This widget is a simple wrapper of the JCarousel jquery extension.
This widget will let you use a simple dataProvider to create your carousel
Tested on Yii 1.1.7
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.
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.
$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, ));
JCarousel is released both under MIT and GPL licenses
Change Log ¶
now it can handle alt and title attributes on the image