1. Requirements
2. 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'));