If you go to a facebook page and click 'See all' on the friends section a dialog opens that shows all the friends of the user. I want to know if colorbox can do the same thing by putting a view inside the colorbox? I don't mind that the colorbox view would be modal whereas the facebook one isn't. So is it possible to put a view in a colorbox?

Comments

frjo’s picture

You can open more or less anything in a Colorbox. See the examples at the Colorbox plugin site, http://colorpowered.com/colorbox/.

The Colorbox module does not have built in support for opening pages/views/nodes in a Colorbox, not yet at least.

If you come up with a nice solution please post it back here, I sure other users would appreciate it.

ltwinner’s picture

Hi mate, I've been looking colorbox module to see about adding support for views. I've been stepping through the colorbox/form code to see how that works. I have some questions for you so I can write the views support correctly.

1. One thing I noticed is that I put breakpoints on _colorbox_form_page_access() and colorbox_form_page() but when the colorbox form link was clicked the debugger only stopped at colorbox_form_page(), it seems _colorbox_form_page_access() was not run. Shouldn't this access function be called here?

2. Why have you got two page arguments and access arguments for $items['colorbox/form']? Both colorbox_form_page and _colorbox_form_page_access only take one argument, the form_id so how come you have set two arguments for them in hook menu?

frjo’s picture

1. _colorbox_form_page_access() is run via hook_menu(). Try to access e.g. "colorbox/form/aaa" and you will get an access denied.

2. The "array(2)" part does not indicate two arguments, it stands for argument number two. Drupal automatically converts the parts of the patch in to arguments starting with arg(0). The path "colorbox/form/contact_mail_page" e.g. becomes arg(0) = colorbox, arg(1) = form and arg(2) = contact_mail_page.

3. Here is a good Overview of JavaScript, AJAX, AHAH API in Drupal.

ltwinner’s picture

I am printing a page containing a view into a colorbox and then in the onComplete() function for the color box I am replacing the body tag of the iframe with just the view iself. So tha way only the view is displayed in the color box as opposed to the entire page.

onComplete:function(){
  var view = $('#colorbox iframe').contents().find('.view');
  $('#colorbox iframe').contents().find('body').html(view);
} 

If I step through using firebug it works and the body gets replaced with just the view. However if I let the colorbox load normally, ie not stepping through with firebug, the view gets put in the colorbox first and then the page gets written over it. The onComplete function is firing before the content has actually finished loading. I can literally see the content that was placed in the colorbox by the onComplete function being replaced half a second later with the page itself. Any ideas on how to get around this?

Any help is appreciated, once this problem is solved it will be able to replicate the facebook friends dialog no problem.

EDIT: I've just gone with the method of creating a custom page.tpl.php file that will only display the view and nothing else apart from the stuff in the tag

walker2238’s picture

One problem with creating a page.tpl with only the content is that if a user has JS turned off it produces a less than desirable experience.

arisaves’s picture

I am interesting to know how you configured your custom tpl.php file. I am trying to do the same thing, more or less. For example, is it a poor practice to print only the $content?

walker2238’s picture

@arisaves, I'm not saying it's poor practice. I'm just saying it's not a very friendly way to do things because if a user have JS off then they will see the page with only the content.

I've used colorbox before but not this module and if you look at the docs you'll see examples on how to pull only content within a certain div for example. So if you only want to display the content then you can use this by adding that div to your colorbox call.

Heres a quick example that I found in my Modx dev.

$("a.login").colorbox({href:"login div.login-form-container", title:"Login", fixed:"true", transition:"none", opacity:0.80});

There key part is "div.login-form-container". Which is the container div that holds my login form.

lsolesen’s picture

Status: Active » Fixed

Marking as fixed as there seems to be an answer.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.