Jump to content


[ANSWERED] How to add fancybox in Grocery Crud

fancybox

  • Please log in to reply
22 replies to this topic

#1 tofayelahmed

tofayelahmed

    Advanced Member

  • Members
  • PipPipPip
  • 63 posts

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---fancy_box.jpg .
Can you please help me.
Thanks again for the library.

#2 pinmouse

pinmouse

    Newbie

  • Members
  • Pip
  • 4 posts

Posted 23 April 2012 - 11: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!

#3 pinmouse

pinmouse

    Newbie

  • Members
  • Pip
  • 4 posts

Posted 23 April 2012 - 11:22 PM

At the very least how to use it with the codeigniter build in anchor_popup


Thanks again!



#4 KaBaDaBrA

KaBaDaBrA

    grocery CRUD magician

  • Members
  • PipPipPip
  • 57 posts

Posted 25 April 2012 - 04: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

capture.PNG

Voila! Should all work :D
Grocery CRUD - Categories and Subcategories - Demo and Step by Step here: http://demo.edynamic..._management/add

#5 KaBaDaBrA

KaBaDaBrA

    grocery CRUD magician

  • Members
  • PipPipPip
  • 57 posts

Posted 25 April 2012 - 04: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

Attached Thumbnails

  • popup.PNG

Grocery CRUD - Categories and Subcategories - Demo and Step by Step here: http://demo.edynamic..._management/add

#6 KaBaDaBrA

KaBaDaBrA

    grocery CRUD magician

  • Members
  • PipPipPip
  • 57 posts

Posted 25 April 2012 - 04:48 PM

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

1. Ok edit "assets > grocery_crud > themes > flexigrid > list_template.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() {
$(".various").fancybox();
});
</script>


3. Around line 45 - change the class from class="add-anchor" to class="various fancybox.ajax"

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


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

test.PNG

I did all the above examples very quickly, but you can go further and customise various things im sure.... Coolios!!!!
Grocery CRUD - Categories and Subcategories - Demo and Step by Step here: http://demo.edynamic..._management/add

#7 web-johnny

web-johnny

    grocery CRUD Author

  • Administrators
  • 1,099 posts
  • LocationLondon

Posted 25 April 2012 - 06:15 PM

Repect respect-064.gif

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

#8 KaBaDaBrA

KaBaDaBrA

    grocery CRUD magician

  • Members
  • PipPipPip
  • 57 posts

Posted 25 April 2012 - 06: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
Grocery CRUD - Categories and Subcategories - Demo and Step by Step here: http://demo.edynamic..._management/add

#9 pinmouse

pinmouse

    Newbie

  • Members
  • Pip
  • 4 posts

Posted 25 April 2012 - 11:57 PM

Thanks guys! You rock! :)

#10 tofayelahmed

tofayelahmed

    Advanced Member

  • Members
  • PipPipPip
  • 63 posts

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.

#11 KaBaDaBrA

KaBaDaBrA

    grocery CRUD magician

  • Members
  • PipPipPip
  • 57 posts

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)
Grocery CRUD - Categories and Subcategories - Demo and Step by Step here: http://demo.edynamic..._management/add

#12 vnt

vnt

    Advanced Member

  • Members
  • PipPipPip
  • 54 posts

Posted 03 May 2012 - 03: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?

void add_action( string $label,  string $image_url , string $link_url , string $css_class ,  mixed $url_callback)
  • $css_class: 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.

Thanks a lot,
D.

#13 web-johnny

web-johnny

    grocery CRUD Author

  • Administrators
  • 1,099 posts
  • LocationLondon

Posted 08 May 2012 - 06: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 KaBaDaBrA and it will work for the action too.
Posted Image

#14 vnt

vnt

    Advanced Member

  • Members
  • PipPipPip
  • 54 posts

Posted 12 May 2012 - 06:43 AM

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 KaBaDaBrA and it will work for the action too.

There is a problem because the button add_action not function!

#15 web-johnny

web-johnny

    grocery CRUD Author

  • Administrators
  • 1,099 posts
  • LocationLondon

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.
Posted Image

#16 casachit

casachit

    Advanced Member

  • Members
  • PipPipPip
  • 33 posts

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.

#17 casachit

casachit

    Advanced Member

  • Members
  • PipPipPip
  • 33 posts

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

#18 noskov

noskov

    grocery CRUD Guru

  • Advanced Member
  • PipPipPip
  • 175 posts
  • LocationKiev

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~%.:_\-';


#19 Raboo

Raboo

    Member

  • Members
  • PipPip
  • 29 posts

Posted 17 September 2012 - 01: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.

Attached Files



#20 Collins Rahl

Collins Rahl

    Newbie

  • Members
  • Pip
  • 2 posts

Posted 28 March 2013 - 01: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







Also tagged with one or more of these keywords: fancybox

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users