How To User Fancybox

hi there

i copied fancyBox to assets\fancyBox\

so added this lines to my view\layouts\main.php:




	<script type="text/javascript" src="<?php echo Yii::app()->request->baseUrl;?>/assets/fancyBox/fancyapps/lib/jquery-1.10.1.min.js"></script>


	<!-- Add fancyBox main JS and CSS files -->

	<script type="text/javascript" src="<?php echo Yii::app()->request->baseUrl;?>/assets/fancyBox/fancyapps/source/jquery.fancybox.js?v=2.1.5"></script>

	<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->request->baseUrl;?>/assets/fancyBox/fancyapps/source/jquery.fancybox.css?v=2.1.5" media="screen" />


	<!-- Add mousewheel plugin (this is optional) -->

	<script type="text/javascript" src="<?php echo Yii::app()->request->baseUrl;?>/assets/fancyBox/fancyapps/lib/jquery.mousewheel-3.0.6.pack.js"></script>


	<!-- Add Button helper (this is optional) -->

	<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->request->baseUrl;?>/assets/fancyBox/fancyapps/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" />

	<script type="text/javascript" src="<?php echo Yii::app()->request->baseUrl;?>/assets/fancyBox/fancyapps/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>


	<!-- Add Thumbnail helper (this is optional) -->

	<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->request->baseUrl;?>/assets/fancyBox/fancyapps/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" />

	<script type="text/javascript" src="<?php echo Yii::app()->request->baseUrl;?>/assets/fancyBox/fancyapps/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>


	<!-- Add Media helper (this is optional) -->

	<script type="text/javascript" src="<?php echo Yii::app()->request->baseUrl;?>/assets/fancyBox/fancyapps/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>


   <!-- Add Media helper (this is optional) -->

   

	<script type="text/javascript" src="<?php echo Yii::app()->request->baseUrl;?>/assets/fancyBox/fancyapps/fancyBox.js"></script>

	<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->request->baseUrl;?>/assets/fancyBox/fancyapps/fancyBox.css" />




fancyBox.css is contain css script in index.html in fancyBox:




<style type="text/css">

		.fancybox-custom .fancybox-skin {

			box-shadow: 0 0 50px #222;

		}


		body {

			max-width: 700px;

			margin: 0 auto;

		}

	</style>



and fancyBox.js contain js script in index.html in downloaded fancyBox

in my view file i add this line but it doesn’t work:




<p>

		<a class="fancybox" href="<?php echo Yii::app()->request->baseUrl .'/images/categories/1.jpg' ?>" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet"><img src="<?php echo Yii::app()->request->baseUrl .'/images/categories/1.jpg' ?>" alt="" /></a>

</p>



what is the problem?

i clear my layouts\main.php of js include and added these lines to view file:




$cs=Yii::app()->clientScript;  

$cs->registerScriptFile(Yii::app()->request->baseUrl.'/assets/fancyBox/fancyapps/lib/jquery-1.10.1.min.js', CClientScript::POS_HEAD); 

$cs->registerScriptFile(Yii::app()->request->baseUrl.'/assets/fancyBox/fancyapps/source/jquery.fancybox.js?v=2.1.5', CClientScript::POS_HEAD); 

$cs->registerScriptFile(Yii::app()->request->baseUrl.'/assets/fancyBox/fancyapps/lib/jquery.mousewheel-3.0.6.pack.js', CClientScript::POS_HEAD); 

$cs->registerScriptFile(Yii::app()->request->baseUrl.'/assets/fancyBox/fancyapps/source/helpers/jquery.fancybox-buttons.js?v=1.0.5', CClientScript::POS_HEAD); 

$cs->registerScriptFile(Yii::app()->request->baseUrl.'/assets/fancyBox/fancyapps/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7', CClientScript::POS_HEAD); 

$cs->registerScriptFile(Yii::app()->request->baseUrl.'/assets/fancyBox/fancyapps/source/helpers/jquery.fancybox-media.js?v=1.0.6', CClientScript::POS_HEAD); 

$cs->registerScriptFile(Yii::app()->request->baseUrl.'/assets/fancyBox/fancyapps/fancyBox.js', CClientScript::POS_HEAD); 



what is my problem, it does not work yes :(

Do you call Fancybox? Didn’t see it in your code. Something like this.




$(document).ready(function() {	

	$("a.fancybox").fancybox();

});



http://fancybox.net/howto

thanks , it worked

i used it like below in my view file




<script>

$(document).ready(function() {	

	$("a.fancybox").fancybox();

});

</script>