[tofayelahmed]

Thanx Johnny for a wonderful library.

I'm trying to add fancybox in grocery crud.
My concept is , when I click the "add" or "edit" button on flexigrid, then opens a fancybox(jquery).
Like---[attachment=121:fancy_box.jpg].
Can you please help me.
Thanks again for the library.

[pinmouse]

I would love to know how to do this too... also for "add_action"

Thanks and hope to get a reply to this soon!

[pinmouse]

[left]At the very least how to use it with the codeigniter build in anchor_popup[/left]

[left]Thanks again![/left]

[KaBaDaBrA]

Aloha!

Quickly tested something and it worked hehe...

1. Ok edit "assets > grocery_crud > themes > flexigrid > list.php"
2. Add the following to the top: (change your url's as needed)

<link rel="stylesheet" href="<?=base_url()?>assets/plugins/fancybox/jquery.fancybox.css?v=2.0.6" type="text/css" media="screen" />

<script type="text/javascript" src="<?=base_url()?>assets/plugins/fancybox/jquery.fancybox.pack.js?v=2.0.6"></script>

<script type="text/javascript">

$(document).ready(function() {

$(".fancybox").fancybox();

});

</script>

3. Add the callback to you controller function

$crud->callback_column('phone', array($this, '_callback_phone'));

4. Add the callback function

//FANCYBOX TEST

public function _callback_phone($value, $row)

{

  return "<a href='http://www.grocerycrud.com/assets/themes/default/images/logo.png' class='fancybox'>$value</a>";

}

5. I added my fancybox files under "assets > plugins > fancybox" - you can put yours wherever you want to I guess

[attachment=124:capture.PNG]

Voila! Should all work

[KaBaDaBrA]

@pinmouse - codeigniter anchor popup example:

1. You callback

$crud->callback_column('customerName', array($this, '_callback_name'));

2. Your functions

function test_content()

{

  echo 'BLARRRRP!!';



}



public function _callback_name($value, $row)

{

  $atts = array(

'width'	  => '500',

'height'	 => '500',

'scrollbars' => 'yes',

'status'	 => 'yes',

'resizable'  => 'yes',

'screenx'	=> '0',

'screeny'	=> '0'

);



return anchor_popup('examples/test_content', $value, $atts);

}

VOILA!!!!

[KaBaDaBrA]

To make it so that when you click "add" to popup in fancybox

[color=#282828][font=helvetica, arial, sans-serif]1. Ok edit "assets > grocery_crud > themes > flexigrid > list_template.php"[/font][/color]

[color=#282828][font=helvetica, arial, sans-serif]2. Add the following to the top: (change your url's as needed)[/font][/color]

[color=#282828][font=helvetica, arial, sans-serif]

<link rel="stylesheet" href="<?=base_url()?>assets/plugins/fancybox/jquery.fancybox.css?v=2.0.6" type="text/css" media="screen" />

<script type="text/javascript" src="<?=base_url()?>assets/plugins/fancybox/jquery.fancybox.pack.js?v=2.0.6"></script>

<script type="text/javascript">

$(document).ready(function() {

$(".various").fancybox();

});

</script>

[/font][/color]

[color=#282828][font=helvetica, arial, sans-serif]3. Around line 45 - change the class from class="add-anchor" to class="various fancybox.ajax"[/font][/color]

[color=#282828][font=helvetica, arial, sans-serif]

<a href='<?php echo $add_url?>' title='<?php echo $this->l('list_add'); ?> <?php echo $subject?>' class='various fancybox.ajax'>

[/font][/color]

[color=#282828][font=helvetica, arial, sans-serif]4. I added my fancybox files under "assets > plugins > fancybox" - you can put yours wherever you want to I guess[/font][/color]

[attachment=126:test.PNG]

I did all the above examples very quickly, but you can go further and customise various things im sure.... Coolios!!!!

[web-johnny]

Repect [attachment=128:respect-064.gif]

I officially changed your status from advance member to "grocery CRUD magician"

[KaBaDaBrA]

Hahaha thanks John... I need to sit sometime and make a few good tutorials, been so hectic with work lately... But mostly respect goes to you man! Grocery CRUD amazing piece of work!!!!

[pinmouse]

Thanks guys! You rock!

[tofayelahmed]

Thanx the magician for your code magic.
Here i faces some problem.
Here the validation message shows the back of the fancybox that means the list page.

Another problem.This is my code

//home.php

<div id="container">

<?php $this->load->view("header"); ?>

<div id="wrapper">

  <?php $this->load->view($view); ?>

</div>

<?php $this->load->view("footer"); ?>

</div>



//output.php ($view variable contain the file name output.php)

<div style="width:950px; margin:0 auto;min-height:450px;">

<?php echo $output ; ?>

</div>

When click the add button in the list page, the whole file(home.php) is open in thae fancybox. but i need only the output.php file is open.
Thanx again the magician.

[KaBaDaBrA]

The first problem I can help you with...

change the class from

class='various fancybox.ajax'

to

class='various' data-fancybox-type="iframe"

Think that will work. Sorry im new to Fancybox so dont know all their code stuffs.

For the second problem maybe try this

Add #wrapper to the end of the href

href='<?php echo $add_url?>#wrapper'

and leave the class only as

class='various'

Nothing else and dont think it will work with iframe mode (I think)

[vnt]

What can I do to add a fancybox at add_action?

<link rel="stylesheet" href="<?=base_url()?>assets/plugins/fancybox/jquery.fancybox.css?v=2.0.6" type="text/css" media="screen" />

<script type="text/javascript" src="<?=base_url()?>assets/plugins/fancybox/jquery.fancybox.pack.js?v=2.0.6"></script>

<script type="text/javascript">

$(document).ready(function() {

$(".fancybox").fancybox();

});

$(document).ready(function() {

$(".various").fancybox({

  maxWidth : 800,

  maxHeight : 600,

  fitToView : false,

  width  : '70%',

  height  : '70%',

  autoSize : false,

  closeClick : false,

  openEffect : 'none',

  closeEffect : 'none'

});

});

</script>

    $crud->add_action('More', '', 'demo/action_more','ui-icon-plus varius fancybox.iframe ');

The fourth parameter ($css_class) not working properly?

[quote]

void add_action( string $label,  string $image_url , string $link_url , string $css_class ,  mixed $url_callback)

[list]
[*][color=#0000FF]$css_class: [/color]add a CSS class. Remember that at the theme of datatables a CSS class includes images , for example : ui-icon-image, ui-icon-plus, e.t.c.
[/list]
[/quote]
Thanks a lot,
D.

[web-johnny]

Your add_action is wrong the right one is:

    $crud->add_action('More', '', 'demo/action_more','ui-icon-plus various');

and not "varius fancybox.iframe". Follow the instructions of [member='KaBaDaBrA'] and it will work for the action too.

[vnt]

[quote name='web-johnny' timestamp='1336502286' post='1670'] Your add_action is wrong the right one is:

 $crud->add_action('More', '', 'demo/action_more','ui-icon-plus various'); 

and not "varius fancybox.iframe". Follow the instructions of [member='KaBaDaBrA'] and it will work for the action too. [/quote]
There is a problem because the button add_action not function!

[web-johnny]

I am sorry vnt but can you upload an image of what it is appearing at your list? Also can you copy the full function? Just to understand the problem.

[casachit]

i love the way of implementation of fancybox in grocery crud. but form didn't get validates. I have more than 5 fields to be validate. Only some gets validates other not. without fancybox everything works fine.

[casachit]

okay i found error from my side... .... but i can't implement fancybox in edit field... Unwanted character in url error shows up.. any workaround for this issue??

[noskov.biz]

Hi, casachit!

And what characters appear in the url? Is everything work well when you add those characters to ./application/config/config.php file at the line?

$config['permitted_uri_chars'] = 'a-z 0-9~%.:_\-';

[Raboo]

I've made the necessary changes for datatables(gc 1.3.1) and uploaded a patch.
just go to codeigniter root and run patch -p0 < fancybox.patch

web-johnny, how about including fancybox classes as default in the code?
Then the only thing people need to do is to download fancybox to their installation.

[Collins Rahl]

Hi guys

I've tried to implement it but it's not working with the new crud...or is there anyone who can send a working demo of the fancybox add.

 

Thanks