Yii Framework Forum: Fancybox Issues an Usage Discussion - Yii Framework Forum

Jump to content

  • (3 Pages)
  • +
  • 1
  • 2
  • 3
  • You cannot start a new topic
  • You cannot reply to this topic

Fancybox Issues an Usage Discussion Rate Topic: -----

#21 User is offline   hefi 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 34
  • Joined: 21-January 10
  • Location:Hungary

Posted 28 January 2011 - 11:38 AM

View PostGautam 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!
0

#22 User is offline   Gautam Mahato 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 7
  • Joined: 05-January 11
  • Location:Hof, Germany

Posted 30 January 2011 - 11:19 PM

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%',

),
)
);?>
------------

Kind Regards,

Gautam Kumar
Hof, Germany
0

#23 User is offline   herbary 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 88
  • Joined: 04-June 10

Posted 15 February 2011 - 01:41 PM

View Postsn0rcha, 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?
0

#24 User is offline   herbary 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 88
  • Joined: 04-June 10

Posted 15 February 2011 - 01:53 PM

View Posthefi, 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?
0

#25 User is offline   thiagovidal 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 147
  • Joined: 17-February 10
  • Location:Brazil, São Paulo

Posted 16 February 2011 - 08:31 AM

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!
0

#26 User is offline   sycho 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 5
  • Joined: 22-February 11

Posted 23 February 2011 - 12:39 AM

View Postthiagovidal, 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!
0

#27 User is offline   thiagovidal 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 147
  • Joined: 17-February 10
  • Location:Brazil, São Paulo

Posted 23 February 2011 - 04:59 AM

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?
1

#28 User is offline   herbary 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 88
  • Joined: 04-June 10

Posted 23 February 2011 - 10:08 AM

View Postthiagovidal, 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
1

#29 User is offline   herbary 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 88
  • Joined: 04-June 10

Posted 23 February 2011 - 10:32 AM

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...
0

#30 User is offline   thiagovidal 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 147
  • Joined: 17-February 10
  • Location:Brazil, São Paulo

Posted 23 February 2011 - 12:37 PM

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

#31 User is offline   herbary 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 88
  • Joined: 04-June 10

Posted 24 February 2011 - 12:08 PM

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)

  • Attached File  1.jpg (38.62K)
    Number of downloads: 46
  • Attached File  2.jpg (33.01K)
    Number of downloads: 48
  • Attached File  3.jpg (41.9K)
    Number of downloads: 41

0

#32 User is offline   thiagovidal 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 147
  • Joined: 17-February 10
  • Location:Brazil, São Paulo

Posted 24 February 2011 - 12:22 PM

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

View Postherbary, 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...



View Postherbary, 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
0

#33 User is offline   herbary 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 88
  • Joined: 04-June 10

Posted 24 February 2011 - 01:34 PM

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.
0

#34 User is offline   sycho 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 5
  • Joined: 22-February 11

Posted 25 February 2011 - 11:49 AM

View Postthiagovidal, 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...
0

#35 User is offline   sycho 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 5
  • Joined: 22-February 11

Posted 25 February 2011 - 11:52 AM

View Postherbary, 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...
0

#36 User is offline   thiagovidal 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 147
  • Joined: 17-February 10
  • Location:Brazil, São Paulo

Posted 25 February 2011 - 11:58 AM

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
0

#37 User is offline   thiagovidal 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 147
  • Joined: 17-February 10
  • Location:Brazil, São Paulo

Posted 25 February 2011 - 12:01 PM

View Postherbary, 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!
0

#38 User is offline   thiagovidal 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 147
  • Joined: 17-February 10
  • Location:Brazil, São Paulo

Posted 25 February 2011 - 12:03 PM

View Postsycho, 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.
0

#39 User is offline   sycho 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 5
  • Joined: 22-February 11

Posted 26 February 2011 - 12:21 PM

View Postthiagovidal, 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.
0

#40 User is offline   dfortun 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 9
  • Joined: 01-June 11

Posted 08 June 2011 - 03:56 PM

View Postthiagovidal, 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]") };'

0

Share this topic:


  • (3 Pages)
  • +
  • 1
  • 2
  • 3
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users