Fancybox Issues an Usage Discussion

Just relesed the Fancybox extension.

would you please describe how to use it.

i add these on my view page, but nothing appear




<div style="display:none"><div id="data">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></div>

<?php $this->widget('application.extensions.fancybox.CFancyBox', array(

	'target'=>'data',

	'config'=>array(

		'scrolling'		=> 'no',

		'titleShow'		=> false,

	),

	)

);

?>



what should ‘target’ refer to?

solved


<?php echo CHtml::link("tes","#data", array('id'=>'inline')); ?>

<div style="display:none"><div id="data">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></div>

<?php $this->widget('application.extensions.fancybox.CFancyBox', array(

	'target'=>'a#inline',

	'config'=>array(

		'scrolling'		=> 'yes',

		'titleShow'		=> true,

	),

	)

);

?>

Yes you need a link to fancybox work.

Thanks for making this extension. I’m having a problem where I can’t configure any of the event keys for the extension (onStart, onCancel, etc). The problem occurs when I try and place a function within a value for the configuration. For example, in my configuration array I have:

‘config’ => array(

            'onStart'=&gt;&quot;function(){console.log('it works'');}&quot;,


            'onClosed'=&gt;&quot;function(){alert('it closes');}&quot;


        ),

However, when Yii generates the script it comes out as:

{

‘onStart’:‘function(){console.log(\‘it works\’\’);}’,

‘onClosed’:‘function(){alert(\‘it works\’);}’

});

It seems as if Yii is putting quote marks around the function. Is there anyway around this?

Thanks for your help.

Yes dude. I got this issue on one of my projects…

Try use ‘js:…’ at the beginning of the functions like folow

‘onStart’:‘js:function(){console.log(\‘it works\’\’);}’,

‘onClosed’:‘js:function(){alert(\‘it works\’);}’

Thanks a lot. Your solution worked like a charm.

Thanks. I’m glad that this work properly.

I want to close fancybox from other element. I wonder why the $.fancybox.close() doesn’t take any effect? The error said “$.fancybox is undefined”. Do you know why?

Could you post your code?

This is the view where I put the fancybox


<script type="text/javascript">

    <?php


/*

 * The javascript for calling ajax

 *

*/        

echo CHtml::ajax(array('update'=>'#dialog_ground', 'url'=>Yii::app()->createUrl('/Barang/cari',

                array('inputField'=>'MutasiBarangDet_barang_id'))));

    ?>

</script>




<div class="row">

            <?php echo $form->textField($model,'barang_id'); ?>

            <?php echo CHtml::link('Pilih Barang','#dialog_ground',array('id'=>'tampilbarang'));  ?>

            <div class="hidden"><div id="dialog_ground" ></div></div>

          

	</div>

        <?php $this->widget('application.extensions.fancybox.CFancyBox', array(

                'target'=>'a#tampilbarang',

                'config'=>array(

                        'scrolling'=> 'yes',


                ),

                )

        );?>

This is the ajax page that I called, it’s view


<?php


      $dp = $model->search();

      $dp->keyAttribute='id';

      $this->widget('zii.widgets.grid.CGridView', array(

        'id'=>'barang-grid',

        'dataProvider'=>$dp,

        'filter'=>$model,

        'columns'=>array(

                array(

                  'name'=>'id',

                  'value'=>'$data->id',

                ),

                'nama',

        ),

));?>


<div class="row button" align="right">

<?php

/* Klik Ok! and it will close the fancybox */

echo CHtml::ajaxButton('Ok!','',

        array('success'=>'js:function() {

            var p_sel = $.fn.yiiGridView.getSelection("barang-grid");

            if ( p_sel != "") {

                $("#'.$inputField.'").val(p_sel);

                $.fancybox.close(); //<--- I want to close at here. but it said "$.fancybox is undefined" 

            }

        }'),array('id'=>'selectButton'));

?>

</div>

I’ve found the solution…

I need to put the widget to the ajax page become like this :




<?php $this->widget('application.extensions.fancybox.CFancyBox', array(

                'target'=>'a#tampilbarang',

                'config'=>array(

                        'scrolling'=> 'yes',


                ),

                )

        );?>


<?php

      $dp = $model->search();

      $dp->keyAttribute='id';

      $this->widget('zii.widgets.grid.CGridView', array(

        'id'=>'barang-grid',

        'dataProvider'=>$dp,

        'filter'=>$model,

        'columns'=>array(

                array(

                  'name'=>'id',

                  'value'=>'$data->id',

                ),

                'nama',

        ),

));?>


<div class="row button" align="right">

<?php

/* Klik Ok! and it will close the fancybox */

echo CHtml::ajaxButton('Ok!','',

        array('success'=>'js:function() {

            var p_sel = $.fn.yiiGridView.getSelection("barang-grid");

            if ( p_sel != "") {

                $("#'.$inputField.'").val(p_sel);

                $.fancybox.close(); 

            }

        }'),array('id'=>'selectButton'));

?>

</div>

By changing this, the fancybox is becomed recognized and it closed successfully

Thanks :)

I’m having a problem with 1.5. In IE the close and navigation graphics don’t show up. It is something with the paths with the AlphaImageLoader. I think it needs an absolute path but with the asset manager, I’m not sure how to do this. Does anyone have a fix?

has anyone been able to get fancybox to work after you render a page with ajax?

Using this extension i get the following javascript error;

"u is undefined"

Any ideas?

I’ve put the widget in the view getting rendered.

I’ve got the same problem.

The fancybox link:




                            <?=CHtml::link("jelentem", array('/report/create',

                                'sid'=>$comment->commentId,

                                'objtype'=>Report::OBJTYPE_CMT), array('id'=>'reportlink'))?>


<?php $this->widget('application.extensions.fancybox.EFancyBox', array(

        'target'=>'a#reportlink',

        'config'=>array(

                'scrolling'=>'no',

                'titleShow'=>true),

        )

);

?>



fancybox content:




<?

...

$script=<<<EOD

$('#cancellink').click(function() {

    $.fancybox.close();

});

EOD;

Yii::app()->clientScript->registerScript('fclose',$script);

?>


<a href="#" onClick="return false;" title="Close window" id="cancellink">mégsem</a>



If I click on cancellink I’ll get ‘$.fancybox is undefined’ error message :(

in order make $.fancybox be recognized, you must put the widget declaration in the same file with the $.fancybox.close().

Currently your closing fancybox code :


$.fancybox.close() 

must be in different file with this code


<?php $this->widget('application.extensions.fancybox.EFancyBox', array(

        'target'=>'a#reportlink',

        'config'=>array(

                'scrolling'=>'no',

                'titleShow'=>true),

        )

);

?>

isn’t it?

Hi there,

I have a hyperlink as a column value in zii.widgets.grid.CGridView which

has a class activated by fancybox. Works great but when you do a search through

CGridView the fancybox gets destroyed from the hyperlinks in the column value.

Do you know how I can reactivate fancybox after the search returns?

Cheers!

Spiro

create a new javascript function like this

function fancyboxRearm(target){

$(target).fancybox();

}

or

function fancyboxRearm(){

$(the target).fancybox();

}

on CGridView

afterAjaxUp //put the target selector…

remember to pass the config parameters again if you have setted on fancybox widget.

got it?

To close fancybox from a link inside an iframe:

parent.$.fancybox.close();

I am getting error when starting with multiple instance of fancybox. Do u have any suggestion please reply me.