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 ¶
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
Corrupt zip
Hi, could you please upload again because zip file is corrupt.
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
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... :)
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).
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?
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?
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
TGZ file it is not recognized
It seems to be corrupted
Archive is corrupted
So I uploaded the original extension here: https://github.com/uniconstructor/JCarousel
If you have any questions, please ask in the forum instead.
Signup or Login in order to comment.