fancybox Follow @yiiframework

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.

Resources ¶

Donate ¶

Documentation ¶

Requirements ¶

Yii 1.0 or above

Installation ¶

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

Usage ¶

See the following code example:

$this->widget('application.extensions.fancybox.EFancyBox', array(
    'target'=>'a[rel=gallery]',
    'config'=>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

#13028

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:

<?php
      $config = array(
      );
 
      $this->widget('application.extensions.fancybox.EFancyBox', array(
        'target'=>'#testing',
        'config'=>$config,));
 
        //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

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

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

hoplayann at 2012/11/22 04:54am

FIX for IE browsers

Hello,

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'); }

Cheers,

Yann

#9132

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(
        'target'=>'a#fancy-link',
        'config'=>array(),));  
?>  
 
//use nested div structure as below
<div style="display:none">
<div id="data">
<p>Contents of this div appear in fancybox</p>
</div>
</div>

#6832

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

H.G.Chavda at 2012/02/04 02:18am

fancy box problem

Hi,

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

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

Pentium10 at 2011/12/14 09:32am

Fancybox2

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

#3102

thiagovidal at 2011/03/16 08:37am

Thanks guys...

Just fixed the bugs!

#3100

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))
            $this->id=$this->getId();

#2845

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

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

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

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

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

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

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, "
            $('$this->target').fancybox($config);
        ");
    }

#121

Gary131 at 2010/09/06 04:25pm

one suggestion

great extension! Only one suggestion to add some parameter like unique Id to options because for multiple usage on site

#284

nasrul at 2010/07/21 02:41am

simplest way to attach popup box(es).

thank you @thiagovidal, i love this widget.

i just only put this on my page view. <?php echo CHtml::link("tes","#data", array('id'=>'inline')); ?> <div style="display:none"> <div id="data"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> </div> <?php $this->widget('application.extensions.fancybox.CFancyBox', array( 'target'=>'a#inline', 'config'=>array( 'scrolling' => 'yes', 'titleShow' => true, ), ) ); ?>

Please login to leave your comment.