[hefi]

Gautam Mahato, on 28 January 2011 - 03:04 AM, said:

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

Please read the comments of Fancybox. I posted a patch there for the multiple instance problem!

[Gautam Mahato]

class EFancyBox extends CWidget
{
public $name;
public $target;
public $easingEnabled=false;
public $mouseEnabled=true;

public function run()
{
$config = CJavaScript::encode($this->config);
Yii::app()->clientScript->registerScript(__CLASS__, "
Yii::app()->clientScript->registerScript($this->name, "
$('$this->target').fancybox($config);
");
}

I have used the above code but getting syntax error in firebug as
jQuery(function($) {

Yii::app()->clientScript->registerScript(,
$('a#inline197').fancybox({'scrolling':'yes','titleShow':true,'height':'100%','width':'100%'});
)

I think i am getting error due to $this->name. By the way what this->name refer to in the code. My view code is as
<?php echo CHtml::link("test","#data".$data['wallPostDetailId'], array('id'=>'inline'.$data['wallPostDetailId'])); ?>
<div style="display:none"><div id="data<?php echo $data['wallPostDetailId']?>"><?php echo CHtml::image("newsfeed_image/newsfeed_photo/rr_".$data['share']); ?></div></div>
<?php $this->widget('application.extensions.fancybox.EFancyBox', array(
'target'=>'a#inline'.$data['wallPostDetailId'],
'config'=>array(
'scrolling' => 'yes',
'titleShow' => true,
'height' =>'100%',
'width' =>'100%',

),
)
);?>

[herbary]

sn0rcha, on 07 October 2010 - 01:58 AM, said:

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 have same problem. can somebody with solution?

[herbary]

hefi, on 28 January 2011 - 11:38 AM, said:

Please read the comments of Fancybox. I posted a patch there for the multiple instance problem!

as recomended i replace '_CLASS_' to '$this->name'. but 500 CException error occur white try upload ajax block with gallery. can you help?

[thiagovidal]

Sorry folks. I was quite busy.

Extension updated.
* Fancybox assets updated to last version 1.3.4
* Implemented solution for multiple instances of fancybox on page.
* Code commented

To use with ajax please read last topics... I posted one solution.

Thanks!

[sycho]

thiagovidal, on 16 February 2011 - 08:31 AM, said:

Sorry folks. I was quite busy.

Extension updated.
* Fancybox assets updated to last version 1.3.4
* Implemented solution for multiple instances of fancybox on page.
* Code commented

To use with ajax please read last topics... I posted one solution.

Thanks!

Hi, firstly great extension!
But I am confused, you say, that to use with ajax(your solution) we should read last topic, what do you mean by that, can you paste the link or anything? I have troubles with ajax(concretely with default yii pager) where on page 2 and further fancy box doesn't work and picture opens in blak page. I am curious if your post about ajax solves this.

Thanks in advance!

[thiagovidal]

Initiate the extension on your page.

Create a new javascript function like this

function fancyboxRearm(target){
$(target).fancybox();
}

or

function fancyboxRearm(){
$(the target).fancybox();
}

on CGridView or CListView or any that have afterAjaxUpdate

afterAjaxUpdate='fancyboxRearm(the target)' //put the target selector...

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

got it?

[herbary]

thiagovidal, on 23 February 2011 - 04:59 AM, said:

Initiate the extension on your page.

Create a new javascript function like this

function fancyboxRearm(target){
$(target).fancybox();
}

or

function fancyboxRearm(){
$(the target).fancybox();
}

on CGridView or CListView or any that have afterAjaxUpdate

afterAjaxUpdate='fancyboxRearm(the target)' //put the target selector...

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

got it?

CGridView or CListView is the way to output some number of items. in my case 5 items on page. each item have custom gallery which loaded on page with ajax-request by click items link 'see gallery'. And i must create this fancyboxRearm function:

function fancyboxRearm(){
$(the target 1).fancybox();
$(the target 2).fancybox();
...
$(the target 5).fancybox();
}
?

very need help

[herbary]

this is my code. main view file:

<?php
$this->widget('zii.widgets.CListView', array(
	'dataProvider'=>$dataProvider,
	'itemView'=>'_view',
	'template'=>'{pager}{sorter}{items}{pager}',
	//'afterAjaxUpdate'=>"fancyboxRearm('a[rel=gallery1]')",
	'sortableAttributes'=>array(
			'gname',
			'gmodified',
			'grnomenclature',
	),
	'sorterHeader'=>'сортировать по',
	'pager'=>array(
		'header'=>'<span class=pager_label>листать: </span>',
		'nextPageLabel'=>'&gt;',
		'prevPageLabel'=>'&lt;',
		'firstPageLabel'=>'&lt;&lt;',
		'lastPageLabel'=>'&gt;&gt;',
		'cssFile'=>'/css/nv_pager_grid.css',
	),
)); ?>

fragment of '_view' file - to output ccustom item

	<?php if (!empty($data->gimage_map)) { ?>
		<div class='goods_address'>
			<?php echo 'see gallery';?>
			<span class='manage_button left_buttom'>
			<?php
			echo CHtml::ajaxLink(  
					'<img width=20 height=20 src=images/buttons/more.gif>',
					CHtml::normalizeUrl(array('goods/ajaxgallery','id'=>$data->gid)),
					array ('update' => '#_ayax_gallery_'.$data->gid
					));
			?>
			</span>
		</div>
	<?php } ?>	
	<div id='_ayax_gallery_<?php echo $data->gid; ?>'>
	
	</div>

and view file of gallery '_gallery':

<?php

	$this->widget('application.extensions.fancybox.EFancyBox', array(
		'target'=>'a[rel=item_'.$currentid.']',
		'config'=>array(
			'transitionIn'=>'elastic',
			'transitionOut'=>'elastic',
			'titlePosition'=>'outside'
		),
		)
	);
	
	echo $currentid;
	
	echo CHtmlNv::openRoundWrap($sufclass='r'); 
	
	foreach ($oimage_map as $item) {
		if (!empty($item))
		echo CHtml::link(  
			CHtml::image($item, $item, array (
				'width'=>110,
				'height'=>80,
				'style'=>'margin: 5px; border: 10px solid white;',
				)),
			$item,
			array ( 
				'class'=>'single_image', 
				'rel'=>'item_'.$currentid,
				'title'=>'the title'.$currentid,
			));
	}
	
	echo CHtmlNv::closeRoundWrap($sufclass='r');
	
?>

sorry my stupid but i does not get? with this code only first loaded gallery works fine...

[thiagovidal]

could you send an image of the page just to i see all together in my mind.

[herbary]

1.jpg - this is clistview of items
2.jpg - gallery of item 1 loaded with ayax
3.jpg - gallery of item 2 loaded with ayax

first open gallary work fine. another does not.


and after click pager or sorter - when clistview returns new list of items - no one item gallery work at all.

Attached File(s)

•  1.jpg (38.62K)
  Number of downloads: 39
•  2.jpg (33.01K)
  Number of downloads: 40
•  3.jpg (41.9K)
  Number of downloads: 35

[thiagovidal]

try //'afterAjaxUpdate'=>"fancyboxRearm('a[rel=gallery1]')", here you must specify the a[rel=item_'.$currentid.'] for the function works...

herbary, on 23 February 2011 - 10:32 AM, said:

this is my code. main view file:

<?php
$this->widget('zii.widgets.CListView', array(
	'dataProvider'=>$dataProvider,
	'itemView'=>'_view',
	'template'=>'{pager}{sorter}{items}{pager}',
	//'afterAjaxUpdate'=>"fancyboxRearm('a[rel=gallery1]')", here you must specify the a[rel=item_'.$currentid.']
	'sortableAttributes'=>array(
			'gname',
			'gmodified',
			'grnomenclature',
	),
	'sorterHeader'=>'сортировать по',
	'pager'=>array(
		'header'=>'<span class=pager_label>листать: </span>',
		'nextPageLabel'=>'&gt;',
		'prevPageLabel'=>'&lt;',
		'firstPageLabel'=>'&lt;&lt;',
		'lastPageLabel'=>'&gt;&gt;',
		'cssFile'=>'/css/nv_pager_grid.css',
	),
)); ?>

fragment of '_view' file - to output ccustom item

	<?php if (!empty($data->gimage_map)) { ?>
		<div class='goods_address'>
			<?php echo 'see gallery';?>
			<span class='manage_button left_buttom'>
			<?php
			echo CHtml::ajaxLink(  
					'<img width=20 height=20 src=images/buttons/more.gif>',
					CHtml::normalizeUrl(array('goods/ajaxgallery','id'=>$data->gid)),
					array ('update' => '#_ayax_gallery_'.$data->gid
					));
			?>
			</span>
		</div>
	<?php } ?>	
	<div id='_ayax_gallery_<?php echo $data->gid; ?>'>
	
	</div>

and view file of gallery '_gallery':

<?php

	$this->widget('application.extensions.fancybox.EFancyBox', array(
		'target'=>'a[rel=item_'.$currentid.']',
		'config'=>array(
			'transitionIn'=>'elastic',
			'transitionOut'=>'elastic',
			'titlePosition'=>'outside'
		),
		)
	);
	
	echo $currentid;
	
	echo CHtmlNv::openRoundWrap($sufclass='r'); 
	
	foreach ($oimage_map as $item) {
		if (!empty($item))
		echo CHtml::link(  
			CHtml::image($item, $item, array (
				'width'=>110,
				'height'=>80,
				'style'=>'margin: 5px; border: 10px solid white;',
				)),
			$item,
			array ( 
				'class'=>'single_image', 
				'rel'=>'item_'.$currentid,
				'title'=>'the title'.$currentid,
			));
	}
	
	echo CHtmlNv::closeRoundWrap($sufclass='r');
	
?>

sorry my stupid but i does not get? with this code only first loaded gallery works fine...

herbary, on 24 February 2011 - 12:08 PM, said:

1.jpg - this is clistview of items
2.jpg - gallery of item 1 loaded with ayax
3.jpg - gallery of item 2 loaded with ayax

first open gallary work fine. another does not.

on fancybox

[herbary]

strange. i load full page (page 1 of pager) and loadin galary 1 then gallery 2 and more. i dont reload content of widget - by pager or sorter - galeries dont work on FIRST page. i think afterayaxupdate occur only when i reload content of widget.

[sycho]

thiagovidal, on 23 February 2011 - 04:59 AM, said:

Initiate the extension on your page.

Create a new javascript function like this

function fancyboxRearm(target){
$(target).fancybox();
}

or

function fancyboxRearm(){
$(the target).fancybox();
}

on CGridView or CListView or any that have afterAjaxUpdate

afterAjaxUpdate='fancyboxRearm(the target)' //put the target selector...

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

got it?

thanks, I think I got it , but it sadly doesn't solve my problem. Here are my findings
1. to clistview add afterAjaxUpdate=>fbRearm()
2. creating fction fbRearm()
3. to the function add "alert("anything")"

this is what I did after day of tweaking out with this. I found that alert is showing ONLY when I initialy click on link of the whole galery(not ajax link). When I click on ajax links(next pages of galery in pager) then alert isn't showing.
I looked to the generated code and in the bottom of the page is script(where is also $(some_picture_on_first_page_id).fancybox([]), which are pictures on fisrt page of galery), which is whole in jQuery(document).ready(function(){....}). I found somewhere, that ready fction is called only once, when is initially loaded page. If that is true, than is meaningless whole concept of afterAjaxUpdate, which is inside of this function...

At the end I'd like to say, that I can program in several languages on various levels, but in javascript I am TOTAL newbie so am I missing something important?

Any help out of this would be appreceated...

[sycho]

herbary, on 24 February 2011 - 01:34 PM, said:

strange. i load full page (page 1 of pager) and loadin galary 1 then gallery 2 and more. i dont reload content of widget - by pager or sorter - galeries dont work on FIRST page. i think afterayaxupdate occur only when i reload content of widget.

Hi,
I believe, that you suffer from similar problem as I did. When I was playing around sometimes stayed in address also GET parameters, that aren't there with ajax use and are visible only when hovering over the link in status bar. Then it looked like it works on another page then first...

[thiagovidal]

try {

on view => don`t forget to set the correct clientScript id otherwise won`t work.

Yii::app()->clientScript->registerClientScript(__FILE__,"
function fancyboxRearm(target){
$(target).fancybox();
};
");

put this on CGridView or CListView settings
'afterAjaxUpdate'=>'function(id, data){fancyboxRearm("a[rel=imageSrc]")};', //provide the correct target!!!

}

By the way you should initiate the extension normaly

[thiagovidal]

herbary, on 24 February 2011 - 01:34 PM, said:

strange. i load full page (page 1 of pager) and loadin galary 1 then gallery 2 and more. i dont reload content of widget - by pager or sorter - galeries dont work on FIRST page. i think afterayaxupdate occur only when i reload content of widget.

Dude. I know it works. You may losing something!

[thiagovidal]

sycho, on 25 February 2011 - 11:52 AM, said:

Hi,
I believe, that you suffer from similar problem as I did. When I was playing around sometimes stayed in address also GET parameters, that aren't there with ajax use and are visible only when hovering over the link in status bar. Then it looked like it works on another page then first...

I don't think its causing the bug.

[sycho]

thiagovidal, on 25 February 2011 - 11:58 AM, said:

'afterAjaxUpdate'=>'function(id, data){fancyboxRearm("a[rel=imageSrc]")};', //provide the correct target!!!

This is exactly the piece of code I needed, thx a lot!, before I used wrong as:
'afterAjaxUpdate'=>'fancyboxRearm(something)'

I wouldn't get solved this out without you, so thanks a lot one more time .

So here is my solution for future generations:
First file is view, where is clistview:

echo "<script type=\"text/javascript\">
		js:function fancyboxRearm(class){ 
			$(class).fancybox();
		}
      </script>";

-this is for rearming after ajax gets next page, could be in separate file, but its quite small, so I put it here.

$this->widget('application.extensions.fancybox.EFancyBox', array(
				'target'=>'a.imgClass',
				'config'=>array(),
				)
	);

-this is initiation of fancybox, as you can see I use class of pictures, not id, the trick is, that if it is here, it'l be called only once for all pictures in this galery, so it uses class, which is loaded only once

$this->widget('zii.widgets.CListView', array(
		'dataProvider'=>$photoDataProvider,
		'itemView'=>'_viewPhoto',
		'afterAjaxUpdate'=>'function(id, data){fancyboxRearm("a.imgClass")}',
	));

-this is initiation of CListView
Next file is _viewPhoto as set up in CListView

Among other things is important, how to setup the picture. Here is concrete piece of code.

echo CHtml::link('<img id="thumb_'.$data->idPhoto.'" src="'.Yii::app()->request->baseUrl.'/db_images/truhlarna/thumb_'.$data->filename.'" alt="'.$data->altDesc.'" />',
			Yii::app()->request->baseUrl.'/db_images/truhlarna/'.$data->filename, array('id'=>'linkid_'.$data->idPhoto, 'class'=>'imgClass')
		);

Its an old trick to create anchor and as a text it gets the img tag. The importat thing is, that in anchor is link to big picture and in img there is link to thumbnail. So, that's probably all. Now it works for one file at a time in a gallery so I am gonna tweak some more, so in one page could be switched all pictures in fancybox not manually.

[dfortun]

thiagovidal, on 25 February 2011 - 11:58 AM, said:

try {

on view => don`t forget to set the correct clientScript id otherwise won`t work.

Yii::app()->clientScript->registerClientScript(__FILE__,"
function fancyboxRearm(target){
$(target).fancybox();
};
");

put this on CGridView or CListView settings
'afterAjaxUpdate'=>'function(id, data){fancyboxRearm("a[rel=imageSrc]")};', //provide the correct target!!!

}

By the way you should initiate the extension normaly

This code works great. I had to make one stupid change "backspaces" on between the {}

'afterAjaxUpdate'=>'function(id, data){ fancyboxRearm("a[rel=imageSrc]") };'