⚠ 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

Image popup solution for FlexiGrid with FancyBox



Rymasz
  • profile picture
  • Member

Posted 31 October 2012 - 01:40 AM

First of all, I wonder if there is a better solution, than below.....

I need a simple upload field for image. Nothing complicated, so "set_upload_field_example".
On Add/Edit page FancyBox works perfectly, but on main grid when I click thumbnail, default action is opening new browser tab (target="_blank").

I've searched forum, but there is no 'trivial' solution or at least without changing core files.

So please let me know, if there is better way than this:

Controller file:


$this->grocery_crud->set_css('assets/grocery_crud/css/jquery_plugins/fancybox/jquery.fancybox.css');
$this->grocery_crud->set_js('assets/grocery_crud/js/jquery-1.8.1.min.js');
$this->grocery_crud->set_js('assets/grocery_crud/js/jquery_plugins/jquery.fancybox.pack.js');
$this->grocery_crud->set_js('../js/jquery.fancybox_grocery.js');

....

$this->grocery_crud->callback_column('image', array($this, '_callback_image_popup'));

....

public function _callback_image_popup($value, $row)
{
return '<a href="../../../upload/products/normal/'.$value.'" class="image-thumbnail">'.$value.'</a>';
}



jquery.fancybox_grocery.js


$(document).ready(function() {

$(".image-thumbnail").live("click",function(ev){
$this = $(this);
ev.preventDefault();
$.fancybox({
'href': $this.attr('href'),
'type': 'image',
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 200,
'overlayShow' : true
})
});

});

oke_cnk
  • profile picture
  • Member

Posted 31 October 2012 - 03:22 AM

you can set permissions in your controller..

Rymasz
  • profile picture
  • Member

Posted 01 November 2012 - 21:25 PM

[quote name='qaisar' timestamp='1351653755' post='4113']
you can set permissions in your controller..
[/quote]

Sorry, I don't know about what permission you're talking :(

BTW - my above example needs paths fix. Relatives don't work properly after add/edit, so "base_url()" was needed B)

Kaabi
  • profile picture
  • Member

Posted 28 January 2013 - 23:41 PM

Hello,

I faced this problem too it toke me like 3 hours to able to find how to fix this.
you need to edit file
assets\grocery_crud\themes\flexigrid\js\flexigrid.js


and then search for call_fancybox or image-thumbnail is should be by current version 1.3.3 at line 18 and add your jquery function after


$('.image-thumbnail').fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 200,
'overlayShow' : false
});


I hope if this what you was looking for

davidoster
  • profile picture
  • Member

Posted 30 January 2013 - 09:58 AM

[quote name='Kaabi' timestamp='1359416488' post='5333']
Hello,

I faced this problem too it toke me like 3 hours to able to find how to fix this.
you need to edit file
assets\grocery_crud\themes\flexigrid\js\flexigrid.js


and then search for call_fancybox or image-thumbnail is should be by current version 1.3.3 at line 18 and add your jquery function after


$('.image-thumbnail').fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 200,
'overlayShow' : false
});


I hope if this what you was looking for
[/quote]

I would change this file and not the flexigrid's file(where it applies only to flexigrid's theme), [size=3][b]assets/grocery_crud/js/jquery_plugins/config/jquery.fancybox.config.js[/b][/size]

Kaabi
  • profile picture
  • Member

Posted 31 January 2013 - 01:52 AM

[quote name='David Oster' timestamp='1359539914' post='5349']
I would change this file and not the flexigrid's file(where it applies only to flexigrid's theme), [size=3][b]assets/grocery_crud/js/jquery_plugins/config/jquery.fancybox.config.js[/b][/size]
[/quote]

I already tried to edit jquery.fancybox.config.js before i edit flexigrid and is doesn't works, the problem i think with flexigrid and datatables in order to have your fancybox works fine within the callback_column you need to edit flexigrid.js or datatables.js by this way u will have the fancybox or any jquery plugin works under flexigrid and also for [b]the pagination pages !!![/b].

as the normal way is only make jquery works only fine for 1st page only but if you go next/back your jquery will not be called

davidoster
  • profile picture
  • Member

Posted 31 January 2013 - 10:35 AM

That's very interesting! I'll check it more thoroughly when I have time to see exactly how it works!