Please read the comments of Fancybox. I posted a patch there for the multiple instance problem!
Please read the comments of Fancybox. I posted a patch there for the multiple instance problem!
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%',
),
)
);?>
i have same problem. can somebody with solution?
as recomended i replace ‘CLASS’ to ‘$this->name’. but 500 CException error occur white try upload ajax block with gallery. can you help?
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!
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
afterAjaxUp //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
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'=>'>',
'prevPageLabel'=>'<',
'firstPageLabel'=>'<<',
'lastPageLabel'=>'>>',
'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…
could you send an image of the page just to i see all together in my mind.
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.
try //‘afterAjaxUpdate’=>“fancyboxRearm(‘a[rel=gallery1]’)”, here you must specify the a[rel=item_’.$currentid.’] for the function works…
on fancybox
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.
thanks, I think I got it 
, but it sadly doesn’t solve my problem. Here are my findings
to clistview add afterAjaxUpdate=>fbRearm()
creating fction fbRearm()
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…
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…
try {
on view => dont forget to set the correct clientScript id otherwise wont 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
Dude. I know it works. You may losing something!
I don’t think its causing the bug.
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.
This code works great. I had to make one stupid change "backspaces" on between the {}
'afterAjaxUpdate'=>'function(id, data){ fancyboxRearm("a[rel=imageSrc]") };'