fancybox

Yii Framework Extensions

Createnew extension

Popular Tags

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.
Donate
Documentation
Try others combinations. See configuration parameters bellow.
Parameters you could set on EFancyBox
Goto Fancy Box website to check fancy box jquery plugin configuration parameters.
Change Log

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.

41 0

54 followers

12 020 downloads

Yii Version: 1.1

License: GPL-3.0

Category: User Interface

Tags:

Developed by: thiagovidal

Created on: Jul 16, 2010

Last updated: 13 years ago

Downloads

show all

User Contributed Notes 22

#121

0 0

one suggestion

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

Gary131 at Sep 6, 2010, 8:25:12 PM

#284

1 0

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')); ?>
&lt;div style="display:none"&gt;
    &lt;div id="data"&gt;
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    &lt;/div&gt;
&lt;/div&gt;
<?php $this->widget('application.extensions.fancybox.CFancyBox', array(
    'target'=>'a#inline',
    'config'=>array(
        'scrolling'		=> 'yes',
        'titleShow'		=> true,
    ),
    )
);
?>

nasrul at Jul 21, 2010, 6:41:51 AM

#2248

1 1

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

hefi at Dec 1, 2010, 2:26:32 PM

#2266

0 0

update the doc

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

igorsantos07 at Dec 5, 2010, 6:04:37 AM

#2267

0 0

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.

igorsantos07 at Dec 5, 2010, 6:15:18 AM

#2409

0 0

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

bayramchik at Dec 26, 2010, 9:09:18 PM

#2410

0 0

Help needed

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

bayramchik at Dec 26, 2010, 9:10:57 PM

#2746

0 0

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

Antonio Ramirez at Feb 4, 2011, 1:23:18 PM

#2845

0 0

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///

herbary at Feb 16, 2011, 5:58:47 AM

#3100

0 0

$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();

abajja at Mar 16, 2011, 11:33:57 AM

#3102

0 0

Thanks guys...

Just fixed the bugs!

thiagovidal at Mar 16, 2011, 12:37:23 PM

#6123

0 0

Fancybox2

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

Pentium10 at Dec 14, 2011, 2:32:46 PM

#6604

0 0

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?

Hindol at Jan 20, 2012, 2:40:32 PM

#6774

0 0

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

H.G.Chavda at Feb 4, 2012, 7:18:52 AM

#6832

1 0

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

marcovtwout at Feb 8, 2012, 10:47:08 AM

#9132

1 0

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>

rix.rix. at Jul 23, 2012, 8:53:56 AM

#10763

2 0

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
~~~
[css]
.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

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

```

and line 352-359 :


```php
.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

hoplayann at Nov 22, 2012, 9:54:04 AM

#12010

1 0

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 ?

samilo at Feb 20, 2013, 2:08:33 PM

#12122

0 0

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

ram87 at Feb 28, 2013, 5:55:30 AM

#13028

0 0

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.

Scott Deagan at Apr 29, 2013, 10:26:22 AM

#13833

0 0

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.

Priyranjan Singh at Jun 30, 2013, 5:10:16 AM

#14268

2 0

Deprecated

This extension is deprecated and needs to update.

papryk at Jul 31, 2013, 8:43:51 AM

Categories