Yii 1.1: jcolorbox

ColorBox jQuery plugin

ColorBox is a light-weight, customizable lightbox plugin for jQuery 1.3, 1.4, and 1.5.

This extension sets up the necessary javascript codes to display content with ColorBox jQuery plugin.


This was built with Yii 1.1.7. but should work with all versions from 1.0


Copy the unzipped contents of the extension into your application's protected/extensions folder.

//Create an instance of ColorBox
$colorbox = $this->widget('application.extensions.colorpowered.JColorBox');
//Call addInstance (chainable) from the widget generated.
    ->addInstance('.colorbox', array('maxHeight'=>'80%', 'maxWidth'=>'90%'))
    ->addInstance('.colorbox1', array('iframe'=>true, 'width'=>'80%', 'height'=>'80%'))
<a href="myimage.jpg" class="colorbox"><img src="myimage.jpg" alt="" /></a>
<a href="http://www.google.com" class="colorbox1">Open Google</a>
<a href="slide1.jpg" rel="example1" title="Slide Number One">
    <img src="thumb1.jpg" alt="" />
<a href="slide2.jpg" rel="example1" title="Slide Number Two">
    <img src="thumb2.jpg" alt="" />
<a href="slide3.jpg" rel="example1" title="Slide Number Three">
    <img src="thumb3.jpg" alt="" />

You can also customize ColorBox's appearance by specifying cssFile in the widget options

//Create an instance of ColorBox with cuztomized appearance
$colorbox = $this->widget('application.extensions.colorpowered.JColorBox', array('cssFile'=>'/path/to/css'));

Total 11 comments

#19107 report it
Trejder at 2015/03/18 10:25am
Colorbox not grouping images

Can you take a look at this forum thread? Maybe you have a solution for this problem?

#18597 report it
Jordan Sipahutar at 2014/11/26 03:23am
Run but error by firebug

TypeError: $(...).next(...).html(...) is undefined

if ($(this).next().html().trim()!='')

Can you give the solution for this problem..

Thank you

#14340 report it
Narender Negi at 2013/08/05 07:02am
Good work

Thanks for colorbox extension.Its good

#12604 report it
mshakeel at 2013/04/01 03:51am
Re: Problem with ClistView & jcolorbox

Did you use 'afterAjaxUpdate' method of CListView, we need to reassign the colorbox event after ajax update (i.e. Sort or Paginate).

Add following property to CListView:

'afterAjaxUpdate'=>'js: updateGrid',

Add following JS to your view:

function updateGrid()
        $(".colorBox").colorbox({iframe:true, width:"800", height:"400"});
#12581 report it
v_bogdan at 2013/03/29 01:06pm
Problem with ClistView & jcolorbox

There is a problem with ClistView & jcolorbox. When i'm using sorting in ClistView - jcolorbox stops working. How can i fix this bug?

#12294 report it
venuk at 2013/03/11 07:22pm
Image from database

image reading from controller, can only be displayed in tag, so thumbnails are working fine but since the main image is part of href, image is loading as binary data. any idea how to do it ?

#11749 report it
mshakeel at 2013/02/01 04:38am
Problem With Grid Ajax Calls Within Colorbox, It Posts Back

The colorbox works perfectly fine to show the grid within itself but when we sort the grid which triggers an ajax call to load it again, the page is completely posts back and grid does not being refreshed within colorbox. Here is the link for for more details.

Fixed (Solution):
This is achieved by setting iframe property of colorbox to true. Following is the code:

$colorbox->addInstance('.colorBox', array('iframe'=>true, 'width'=>'80%', 'height'=>'80%'));
// Just set iframe property to true
#5159 report it
bitmatix at 2011/09/20 11:28am

please change line 23:

if($this->cssFile == NULL)
      $this->cssFile = '/colorbox.css';


if($this->cssFile == NULL)
      $this->cssFile = $this->scriptUrl.'/colorbox.css';

and line 35 to:


so that you can put your own css file under e.g. "css" in "htdocs"

#3935 report it
ATI at 2011/05/23 01:26am
$colorbox->addInstance("a[rel='example1']"); // don't work
$colorbox->addInstance('a[rel="example1"]'); // work
#3934 report it
ATI at 2011/05/23 01:24am
its ok

colorbox is good, thx.

#3911 report it
PixoiD at 2011/05/20 04:00am

I'm sorry! Cool worjing!

Leave a comment

Please to leave your comment.

Create extension