jcolorbox Follow @yiiframework

ColorBox jQuery plugin

Requirements

Usage

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

#12604

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

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

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

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

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

ATI at 2011/05/23 01:26am

rel

$colorbox->addInstance("a[rel='example1']"); // don't work
$colorbox->addInstance('a[rel="example1"]'); // work

#3934

ATI at 2011/05/23 01:24am

its ok

colorbox is good, thx.

#3911

PixoiD at 2011/05/20 04:00am

I'm sorry! Cool worjing!

Please login to leave your comment.

jcolorbox Follow @yiiframework

Requirements ¶

Usage ¶

Total 8 comments

Leave a comment

Yii Supporters