Yii 1.1: jcarousel

wrapper of jcarousel jquery extension. simple gallery carousel

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.
    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.


$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,



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


JCarousel is released both under MIT and GPL licenses

Change Log

version 1.1
now it can handle alt and title attributes on the image

Total 9 comments

#13211 report it
__construct() at 2013/05/15 03:51am
Archive is corrupted

So I uploaded the original extension here: https://github.com/uniconstructor/JCarousel

#12358 report it
DG Esteban A. Pérez at 2013/03/15 12:59pm
TGZ file it is not recognized

It seems to be corrupted

#11470 report it
Néstor Acevedo at 2013/01/15 11:33am
IE8 bug

another thing:

the big image is not showed in IE8. i.e: i do click in the thum image setting the div id and the image is not showed but checking the source code, the img tag exists

#11456 report it
Néstor Acevedo at 2013/01/14 05:27pm
not works at all

following the example, i cannot make it works.

i'm trying to use it in another controller.

i have a post controller, but the gallery is managed from a proyecto controller. this last one is only for admin purposes but the gallery must be showed in the post view. according with thejcarousel example, i have to set a dataprovider, but this dataprovider is not linked with the proyectos dataprovider so i have to make some like:

$dataProvider=new CActiveDataProvider('Proyecto');

but else, in the seond example is set


file_name doesn't exists in my original dataprovider -post dataprovider- so in this case how works jcarousel with different dataproviders?

#11169 report it
ktwbc at 2012/12/21 10:46am
error in file?

in your jCarousel.php, I see on line 456:

if (isset($this->animation)) $options['animationa'] = $this->animation;

that should be $options['animation'], correct?

#9905 report it
deeptowncitizen at 2012/09/20 04:03pm
New wrapper

I think this is nothing. Didn't see 'extends' declaration. I made my own wrapper, because i need dynamic preload of items + custom item's containers. I'll upload it as soon as possible. It can work in static mode (like yours) and in dynamic (it preloads items when user asks).

#9898 report it
memsis at 2012/09/19 09:28pm
Using with FancyBox (and using gallery)

I had to made a little change to your wrapper so I can add a "rel" attribute to the anchor of each iamges... allowing fancybox to make gallery of images.

If you want me to commit the code, just tell me how... :)

#9582 report it
deeptowncitizen at 2012/08/25 06:07am
A little suggestion

Hi. Great work. Have a little suggestion: make function renderGalleryItems() protected to have ability subclass widget and create a custom containers from dataProvider

#6184 report it
Bman900 at 2011/12/17 04:47pm
Corrupt zip

Hi, could you please upload again because zip file is corrupt.

Leave a comment

Please to leave your comment.

Create extension