Yii 1.1: jcolorbox

ColorBox jQuery plugin
22 followers

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.

Requirements

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

Usage

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.
$colorbox
    ->addInstance('.colorbox', array('maxHeight'=>'80%', 'maxWidth'=>'90%'))
    ->addInstance('.colorbox1', array('iframe'=>true, 'width'=>'80%', 'height'=>'80%'))
    ->addInstance("a[rel='example1']");
<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>
<a href="slide2.jpg" rel="example1" title="Slide Number Two">
    <img src="thumb2.jpg" alt="" />
</a>
<a href="slide3.jpg" rel="example1" title="Slide Number Three">
    <img src="thumb3.jpg" alt="" />
</a>

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 9 comments

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

UPDATE:
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
cssFile

please change line 23:

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

to:

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

and line 35 to:

$cs->registerCssFile($this->cssFile);

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
rel
$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
hm

I'm sorry! Cool worjing!

Leave a comment

Please to leave your comment.

Create extension
Downloads