⚠ In case you've missed it, we have migrated to our new website, with a brand new forum. For more details about the migration you can read our blog post for website migration. This is an archived forum. ⚠

  •     

profile picture

[ANSWERED] How to add fancybox in Grocery Crud



tofayelahmed

tofayelahmed
  • profile picture
  • Member

Posted 23 April 2012 - 12:07 PM

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

pinmouse
  • profile picture
  • Member

Posted 23 April 2012 - 23:20 PM

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

pinmouse
  • profile picture
  • Member

Posted 23 April 2012 - 23:22 PM

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

[left]Thanks again![/left]

KaBaDaBrA

KaBaDaBrA
  • profile picture
  • Member

Posted 25 April 2012 - 16:28 PM

Aloha! :D

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 :D

KaBaDaBrA

KaBaDaBrA
  • profile picture
  • Member

Posted 25 April 2012 - 16:40 PM

@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!!!! :D

KaBaDaBrA

KaBaDaBrA
  • profile picture
  • Member

Posted 25 April 2012 - 16:48 PM

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

web-johnny
  • profile picture
  • Administrator
  • 1,166 posts

Posted 25 April 2012 - 18:15 PM

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

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

KaBaDaBrA

KaBaDaBrA
  • profile picture
  • Member

Posted 25 April 2012 - 18:22 PM

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!!!! :P

pinmouse

pinmouse
  • profile picture
  • Member

Posted 25 April 2012 - 23:57 PM

Thanks guys! You rock! :)

tofayelahmed

tofayelahmed
  • profile picture
  • Member

Posted 26 April 2012 - 09:07 AM

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

KaBaDaBrA
  • profile picture
  • Member

Posted 26 April 2012 - 10:42 AM

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

vnt
  • profile picture
  • Member

Posted 03 May 2012 - 15:05 PM

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

web-johnny
  • profile picture
  • Administrator
  • 1,166 posts

Posted 08 May 2012 - 18:38 PM

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

vnt
  • profile picture
  • Member

Posted 12 May 2012 - 06:43 AM

[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

web-johnny
  • profile picture
  • Administrator
  • 1,166 posts

Posted 12 May 2012 - 08:18 AM

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

casachit
  • profile picture
  • Member

Posted 17 July 2012 - 08:04 AM

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

casachit
  • profile picture
  • Member

Posted 18 July 2012 - 05:58 AM

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

noskov.biz

noskov.biz
  • profile picture
  • Member

Posted 18 July 2012 - 06:13 AM

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

Raboo
  • profile picture
  • Member

Posted 17 September 2012 - 13:41 PM

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

Collins Rahl
  • profile picture
  • Member

Posted 28 March 2013 - 13:35 PM

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