[SOLVED] Highslide and Fancybox not working in CGridview if Page > 1

Yii 1.1 General Discussion
1

Highslide and fancybox extension working well on page 1, but not working on the next page (2,3,…)




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

		'id'=>'loc-grid',

		'dataProvider'=>$model->search(),

		'filter'=>$model,

			array(

				'header'=>'No.',

				'value'=>'$this->grid->dataProvider->pagination->currentPage*$this->grid->dataProvider->pagination->pageSize + $row+1',       //  row is zero based

				'htmlOptions'=>array('width'=>'25','style'=>'text-align:right;'),

			),

			array('name'=>'loc_picture',

				'type'=>'html',

				'header'=>'Picture',

				'value'=> 'CHtml::link(CHtml::image(Yii::app()->request->baseUrl.$data->loc_picture, "image", array("width"=>30)), Yii::app()->request->baseUrl.$data->loc_picture, array("class"=>"highslide"))',

				'htmlOptions'=>array('width'=>'40','style'=>'text-align:center;'),

			),

			array('name'=>'loc_picture',

				'type'=>'raw',

				'header'=>'Picture',

				'value'=> 'CHtml::link(CHtml::image(Yii::app()->request->baseUrl.$data->loc_picture, "image", array("width"=>30)), Yii::app()->request->baseUrl.$data->loc_picture, array("rel"=>"myrel"))',

				'htmlOptions'=>array('width'=>'40','style'=>'text-align:center;'),

			),

		),

	)); 


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

	'target'=>'a[rel="myrel"]',

	'config'=>array(

  	'scrolling' => 'yes',

    'titleShow' => true,

		),

	)

);

Any sugestion??

2

Is the CGridView Ajax updated? That maybe the cause… in order to avoid that, use delegate or live function of jquery in order to make the fancybox to work through AJAX modified contents (you will have to modify the extension.

3

Sorry, still not understand,

Yes paging in my CGridView using AJAX (default)

so I have to modified fancybox extension??

4

Solve my problem

in CGridView add :




		'afterAjaxUpdate'=>"function(id,data){ $('a[rel=myrel]').fancybox(); }",
5

Great… I normally use livequery plugin for that so I do not need to worry about calling functions again after AJAX updates. Your solution is good. Thanks for sharing.

With livequery on your main script:




$('a[rel=myrel]') 

    .livequery(function(){ 

    // use the helper function hover to bind a mouseover and mouseout event 

        $(this).fancybox();

    });
6

Thanks for sharing too… :)

7

Thank you very much!!!

8

Thanks for the simplest tip !!!