Yii 1.1: fancybox

FancyBox is a tool for displaying images, html content and multi-media in a Mac-style "lightbox" that floats overtop of web page

Version 1.6 avaliable for download.

Yii version of fancybox extension.





  • Yii 1.0 or above


  • Extract the release file under protected/extensions
  • Put the below code into your views


See the following code example:

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

Try others combinations. See configuration parameters bellow.

Parameters you could set on EFancyBox

id = @string, the id of the widget.
target          =   @string, the target objects, user jquery notation.
easingEnabled   =   @boolean, whether to enable mouse interations. Defauts set to true.
mouseEnabled    =   @boolean, whether to insert jquery easing plugin to expand transitions effects. Check http://gsgd.co.uk/sandbox/jquery/easing/. Defaults set to false.
config          =   @array, configuration parameters of fancy box plugin. Defaults set to basic fancy box configuration.

Goto Fancy Box website to check fancy box jquery plugin configuration parameters.

Change Log

July 16, 2010

  • Initial release.

August 5, 2010

  • CFancyBox changed to EFancyBox to prevent incompatibility with Yii core classes.
  • Class core code rewrited.
  • Added JQuery Easing Plugin.

February 16, 2011

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

March 16, 2011

*Fixed bug, $this->add to $this->id. *Fixed link on extension description.

Total 20 comments

#14268 report it
papryk at 2013/07/31 04:43am

This extension is deprecated and needs to update.

#13833 report it
Priyranjan Singh at 2013/06/30 01:10am
using the callback function

I am unable to use any callback function while using the 1.6 version of this extension. If anybody has the solution then plz help.

#13028 report it
Scott Deagan at 2013/04/29 06:26am
Is it possible to use a button instead of CHtml::link?

Hi, love the FancyBox extension. Works beautifully. I just have one question:

Is it possible to invoke the extension using a button (either CHtml::button or CHtml::ajaxButton) instead of using a link? I have tried the following:

      $config = array(
      $this->widget('application.extensions.fancybox.EFancyBox', array(
        //echo CHtml::link('TESTING',array('site/map'),array('id'=>'testing'));
        echo CHtml::ajaxButton('TESTING', array('//site/map'), null, array('id' => 'testing'));

The CHtml::link works, but the CHtml::ajaxButton does not, and just displays:

The requested content cannot be loaded. Please try again later.

Please help.

#12122 report it
ram87 at 2013/02/28 12:55am
exampel of funcy box
<?php $config = array( ); $this->widget('application.extensions.fancybox.EFancyBox', array( 'target'=>'#getaction', 'config'=>$config,)); echo CHtml::link('Create Bank Account',array('RRegister/create'),array('id'=>'getaction')); ?>
#12010 report it
samilo at 2013/02/20 09:08am
problem with fancybox / gridview

Thank you first

I added it in grid view to image column and it was worked in perfect way in first page results , but when i go to next page fanceybox not worked ?! How to fix it ?

#10763 report it
hoplayann at 2012/11/22 04:54am
FIX for IE browsers


Images are not found in IE. Please find thoses lines and edit the src path, by removing "fancybox/"

Here is the fix :

Line 327-335

.fancybox-ie6 #fancybox-close { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancy_close.png', sizingMethod='scale'); }
.fancybox-ie6 #fancybox-left-ico { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancy_nav_left.png', sizingMethod='scale'); }
.fancybox-ie6 #fancybox-right-ico { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancy_nav_right.png', sizingMethod='scale'); }
.fancybox-ie6 #fancybox-title-over { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancy_title_over.png', sizingMethod='scale'); zoom: 1; }
.fancybox-ie6 #fancybox-title-float-left { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancy_title_left.png', sizingMethod='scale'); }
.fancybox-ie6 #fancybox-title-float-main { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancy_title_main.png', sizingMethod='scale'); }
.fancybox-ie6 #fancybox-title-float-right { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancy_title_right.png', sizingMethod='scale'); }

Line 346

#fancybox-loading.fancybox-ie6 div  { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancy_loading.png', sizingMethod='scale'); }

and line 352-359 :

.fancybox-ie #fancybox-bg-n { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancy_shadow_n.png', sizingMethod='scale'); }
.fancybox-ie #fancybox-bg-ne { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancy_shadow_ne.png', sizingMethod='scale'); }
.fancybox-ie #fancybox-bg-e { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancy_shadow_e.png', sizingMethod='scale'); }
.fancybox-ie #fancybox-bg-se { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancy_shadow_se.png', sizingMethod='scale'); }
.fancybox-ie #fancybox-bg-s { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancy_shadow_s.png', sizingMethod='scale'); }
.fancybox-ie #fancybox-bg-sw { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancy_shadow_sw.png', sizingMethod='scale'); }
.fancybox-ie #fancybox-bg-w { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancy_shadow_w.png', sizingMethod='scale'); }
.fancybox-ie #fancybox-bg-nw { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancy_shadow_nw.png', sizingMethod='scale'); }



#9132 report it
rix.rix. at 2012/07/23 04:53am
Simple fancybox example

Nice plugin, thanks!

For a simple fancybox example to get up to speed see below:

//create a link
echo  CHtml::link('link text goes here',"#data", array("id"=>"fancy-link")); 
//put fancybox on page
$this->widget('application.modules.admin.extensions.fancybox.EFancyBox', array(
//use nested div structure as below
<div style="display:none">
<div id="data">
<p>Contents of this div appear in fancybox</p>
#6832 report it
marcovtwout at 2012/02/08 05:47am
Re: Fancybox2

Fancybox2 would require a separate extension because the license has changed (Creative Commons Attribution-NonCommercial 3.0).

Thanks for the extension, it has the minimum options required and luckily no more, very straight-forward. I would like to see proper PHPDoc use for the properties and functions though ;)

#6774 report it
H.G.Chavda at 2012/02/04 02:18am
fancy box problem


I have use fancy box new release but it not work any box not load on screen.

my code....

<?php echo CHtml::link("tes","#data", array('id'=>'inline')); ?>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<?php $this->widget('application.extensions.fancybox.CFancyBox', array( 'target'=>'a#inline', 'config'=>array( 'scrolling' => 'yes', 'titleShow' => true, ), ) ); ?>

but not work. give reply

Thanks in advance

#6604 report it
Hindol at 2012/01/20 09:40am
Fancybox Mousewheel Based Navigation Bug

This might be a problem in fancybox sources itself, but in my laptop scrolling both up and down with my mouse loads the next image (so, I cannot go to the previous image). This is kind of bugging me. Can you please check?

#6123 report it
Pentium10 at 2011/12/14 09:32am

Is this based on FancyBox 1 or 2? Do you consider to build a separate one for FancyBox version 2?

#3102 report it
thiagovidal at 2011/03/16 08:37am
Thanks guys...

Just fixed the bugs!

#3100 report it
abajja at 2011/03/16 07:33am
$this->add or $this->id?

just download this extension and saw

// function to init the widget
    public function init()
        // if not informed will generate Yii defaut generated id, since version 1.6
        if(!isset($this->add)) // Maybe you want to mean  if(!isset($this->id))
#2845 report it
herbary at 2011/02/16 12:58am
js error occur like this 'u is udefinited'

i have few links on page to load custom galley. to load each galleries i use ajax with renderPartial method. if i click first link - first gallery loaded work ok, but second and all other galleries laded but does not work - js error occur like this 'u is undefinited'. Need solution///

#2746 report it
Antonio Ramirez at 2011/02/04 08:23am
Something to take into account for IE Users

For some the 'X' (Close button) image wont show on IE, in order to solve that Issue please see the following article: http://www.seemly.co.uk/blog/fancybox-close-button-not-showing-in-internet-explorer

#2410 report it
bayramchik at 2010/12/26 04:10pm
Help needed

How to use fancybox for example if I have an image under /images/img01.jpg . thank you very much

#2409 report it
bayramchik at 2010/12/26 04:09pm
thumbnail links

Hi everyone! Can anyone give me example how to use fancybox with thumbnails. For example I have an image under /images/image1.jpg and I want it to be displayed as thumbnail after I click it'd use fancybox. Thank you for your help

#2267 report it
Igoru-san at 2010/12/05 01:15am
update the doc

[you could delete those comments after read them xD] the "fancybox" link that asks ppl to go to their site to see config params is broken... its .net, not .com.

#2266 report it
Igoru-san at 2010/12/05 01:04am
update the doc

Nice extension! :D But one tip: update the block of code from the documentation above. It still shows "CFancyBox".

#2248 report it
hefi at 2010/12/01 09:26am
reply to Gary131

Yes, Gary's right! Unique Id'd be pretty useful. Here's a simple patch for v1.5:

--- EFancyBox.php   2010-08-05 09:49:44.000000000 +0200
+++ EFancyBox.php-new   2010-12-01 15:25:22.000000000 +0100
@@ -33,6 +33,7 @@
 class EFancyBox extends CWidget
+   public $name;
    public $target;
    public $easingEnabled=false;
    public $mouseEnabled=true;
@@ -46,7 +47,7 @@
     public function run()
        $config = CJavaScript::encode($this->config);
-       Yii::app()->clientScript->registerScript(__CLASS__, "
+       Yii::app()->clientScript->registerScript($this->name, "

Leave a comment

Please to leave your comment.

Create extension