Using fancybox in yii without extension

There are several guides that help you use fancybox in yii, e.g. http://www.yiiframework.com/extension/fancybox/  or http://www.yiiframework.com/wiki/357/how-to-render-a-view-in-fancybox-using-ajax/ . But if you prefer a direct way, here's how to use fancybox in yii.

1. Download fancybox from http://fancyapps.com/fancybox/. Extract in your base application directory, e.g. /fancybox
2. Insert the following code in any view files:

Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl.'/fancybox/source/jquery.fancybox.pack.js');
Yii::app()->clientScript->registerCssFile(Yii::app()->baseUrl.'/fancybox/source/jquery.fancybox.css');

3. And add your image html code like:

CHtml::link('', 'big.jpg', array('class'=>'myphotos', 'rel'=>'group1'));

4. Finally

<? php
// in case you have not loaded jquery
Yii::app()->clientScript->registerCoreScript("jquery");

?>
$(document).ready(function() {

 /* This is basic - uses default settings */
 
 $("a.myphotos").fancybox();
 
 /* Using custom settings */
 
 $("a#inline").fancybox({
  'hideOnContentClick': true
 });

 /* Apply fancybox to multiple items */
 
 $("a.group").fancybox({
  'transitionIn' : 'elastic',
  'transitionOut' : 'elastic',
  'speedIn'  : 600, 
  'speedOut'  : 200, 
  'overlayShow' : false
 });
 
});