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.
- Download fancybox from http://fancyapps.com/fancybox/. Extract in your base application directory, e.g. /fancybox
- 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');
- And add your image html code like:
CHtml::link('', 'big.jpg', array('class'=>'myphotos', 'rel'=>'group1'));
- 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
});
});
Tidak ada komentar:
Posting Komentar