jcarousel wrapper of jcarousel jquery extension. simple gallery carousel

  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


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

6 0
2 806 downloads
Yii Version: 1.1
License: BSD-2-Clause
Category: User Interface
Developed by: nickcv
Created on: May 2, 2011
Last updated: 12 years ago


show all

Related Extensions