Yii fancybox in linkHtmlOptions

Yii 1.1 General Discussion
1

hi, I followed the instructions here




http://fancyapps.com/fancybox/#instructions

then i included the files





Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl.'/js/jquery-1.8.0.min.js');

Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl.'/js/jquery.mousewheel-3.0.6.pack.js');  

Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl.'/js/fancybox/source/jquery.fancybox.js?v=2.1.0');  

Yii::app()->clientScript->registerCSSFile(Yii::app()->baseUrl.'/js/fancybox/source/jquery.fancybox.css?v=2.1.0');

the problem now is, when i tried to use it in a column of my CGridView,

the javascript doesn’t work, here’s what I did in my CGridView




    array(

         'class'=>'CLinkColumn',

         'linkHtmlOptions'=> array("onclick"=>"$('.fancybox').fancybox()"),

         'header'=>'Image',

         'imageUrl'=>Yii::app()->baseUrl.'/images/ico-images.gif'

       ),

here are the images that I’m trying to test with the fancybox if i can make it work in cgridview by clicking the image link and show the gallery




//css to hide them

.tago{

 display: none;

}


//code that holds the images

<div id="fancyimages">

<a class="tago fancybox" data-fancybox-group="gallery" title="computer" href="<?php Yii::app()->baseUrl.'/images/computer.jpg';?>"><img src="<?php Yii::app()->baseUrl.'/images/computer1.jpg';?>" alt="" /></a>

<a class="tago fancybox" data-fancybox-group="gallery" title="troll" href="<?php Yii::app()->baseUrl.'/images/troll.jpg';?>"><img src="<?php Yii::app()->baseUrl.'/images/troll.jpg';?>" alt="" /></a>

</div>

btw, am not using the fancy box yii extension,

any idea how to solve this problem?

2

You should initialise Fancybox like this:


<html>

...

<body>

...

<script type="text/javascript"><!--

$(document).ready(function() {

	$('.fancybox').fancybox();

});

//--></script>

</body>

</html>
3

I think I was asking how to use it in CGridView…please refer to my first post

4

How about defining a custom function:


<script type="text/javascript"><!--

function FancyBox_onClick() {

	$('.fancybox').fancybox();

}

//--></script>

And then assigning that function in htmlOptions:


'linkHtmlOptions'=> array("onclick"=>"FancyBox_onClick()"),
5

I have another question with regards to this,




    array(

         'class'=>'CLinkColumn',

         'linkHtmlOptions'=> array("onclick"=>"$('.fancybox').fancybox()"),

         'header'=>'Image',

         'imageUrl'=>Yii::app()->baseUrl.'/images/ico-images.gif'

       ),

where should I initialize or where to include this fancybox js scripts and css, if the CGridView is rewritten by extending the original CGridView class ?

6

When you write




'linkHtmlOptions'=> array("onclick"=>"$('.fancybox').fancybox()"),

what you are actually doing here is triggering the initialization of all the matched elements by the class selector ‘.fancybox’, on the ‘click’ event. Although you are doing the initialization, you are not leting fancybox manage the <a> elements’ onclick event in the proper way.

You should have




'linkHtmlOptions'=> array("onclick"=>"$('.fancybox').click()"),

and, as Roman said, put the fancybox initialization in the document.ready event. But if you insist to initialize the fancybox object in the grid, you should write




'linkHtmlOptions'=> array("onclick"=>"$('.fancybox').fancybox(); $('.fancybox').click()"),

But you may need to wait in between these two calls, would have to test it…

By the way, you are repeating the same link over and over again for every cell in the grid column. Does it make any sense? I would put the link outside the grid.

7

it should repeat, coz every row contains a different ID, what am planning to do is, get the id of each row, and then get the images that are owned by that data id…that’s how i’m thinking …but it’s still blurry at the moment…i need to make this fancybox work first, as I embedded an image in the view file to test if it will show up…before i dive in pulling the image names from the db