Node in colorbox

I'm happy that you find Colorbox module useful.

Colorbox module does not have the feature to open a node in a Colorbox, not yet. Someone with an interest in this feature could take a look how Lightbox2 does this and make a patch for Colorbox.

Relevant to interests. Subscribing.

EDIT: I have recently been toying with jQuery's .load() function to load themed drupal node content onto a page, and I think this could be used for colorbox. My guess is that you can utilize colorbox's onLoad callback function to call jQuery's .load() function. The key would be to pass the href attribute from the link that launches the colorbox to the .load() function, and then most importantly append " .node" to the href when you call .load() so only the node content is inserted into the colorbox. This of course means the content will NOT be in an iframe, and scripts may not work as expected inside the colorbox. And obviously this has little to do with the drupal colorbox module but could perhaps be useful to some looking for another solution.

If I have time to try this out myself I will post some code, otherwise please try it yourself and let me know!

Brodingo

I don't understand why colorbox doesn't have this option. Since we can call an url and open this in a iframe, then it also should be possible to open an node in a iframe and just wrap it in a template without other regions. Check out modalframe.

Was there a major change in the module since this thread was started?

It is very feasible to load a node in colorbox. I just decided to try this out a few hours ago instead of the other modules I've used in the past, am using it with Views to load nodes along with the slideshow (of nodes), and am working on some custom theme work for it.

Great module!

I saw this was open as a feature request while looking for something else - which I now have completely forgotten what that was *sigh* - and was curious. It works very nicely with Views using the option to rewrite field output and add in the class="colorbox-load" - and I'm using the size specification right there along with the template instructions in the URL created within the Views field output.

Subscribing...

Subscribe

Hey folks,

Check out this answer from SO user Philadelphia Web Design:

http://stackoverflow.com/questions/247991/displaying-a-drupal-view-witho...

I just implemented this and it works like a charm. Basically you use an argument in the URL to make template.php use a simplified page template.

In your URL:

mysite.com/node?ajax=1

In template.php:

<?php
function phptemplate_preprocess_page(&$vars) {
  if ( isset($_GET['ajax']) && $_GET['ajax'] == 1 ) {
        $vars['template_file'] = 'page-ajax';
  }
}
?>

In page-ajax.tpl.php:

<?php print $content; ?>

This is great because you can also customize the markup wrapper if you need to.

Brodingo: yeh thats exactly what i sayd...

I just tried this and it works fine! I added the code to function "mytheme_preprocess_page" in template.php (a zen derived theme), added class="colorbox" to the link to the node to be displayed in colorbox and bingo there it was.
It's not really ajax of course but it gets rid of the headers, footers and sidebars in a colorbox and that is the object of the exercise.
Thanks!

You should also include scripts and css.

Copy the contents of page.tpl.php into page-ajax.tpl.php and get rid of the bits you don't want ;-)

EDIT: hrm, i posted some code but I realized it was kind of unrelated. oops.

I just did this for a Drupal 7 site I'm working on. A few changes though:

1. Instead of checking for a get var in the request, I test to see if the http request was made via ajax. This is a better practice because if the user doesn't have javascript enabled we still want to show the full node view loaded with all the other page regions.

At the top of the template.php file:

  define('IS_AJAX', isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest');

then add the following to your theme_page() function.

  function phptemplate_page(&$vars, $hook) {
    if (IS_AJAX) {
      $vars['theme_hook_suggestions'] = array('page_ajax');
    }
  }

* Notice that in Drupal 7 the key for template suggestions has changed.

This will now have Drupal load the page-ajax.tpl.php template file when an ajax request is made for content on your site.

Here's the D6 version.

<?php
define('IS_AJAX', isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest');
function theme_preprocess_page(&$vars) {
  if ( IS_AJAX ) {
        $vars['template_file'] = 'page_ajax';
  }
}
?>

By mimicking the suggestions in the Lightbox2 workbook pages, in page.tpl.php, I added:

if ($_GET["format"] == "colorbox") {
  include ('colorbox.tpl.php');
  return;
}

Created colorbox.tpl.php

Then form my URL as: <a class="colorbox" href="my-path/my-node?format=colorbox">Link</a>

That was what I could figure out on my own, as designer rather than a coder. I have a feeling that #13 combo-ed with #14 (for D6 users - me) is a better solution, but I've had problems trying to implement it. The code for theme_page() function, where do I find this function? Maybe the name theme_page is a stand-in for my actual theme name? Just a little more clarity and I think I can get this working too.

If your using D6 don't use #13 but use #14.

The code in #14 you place in your template.php file then just add the class class="colorbox" to your link.

@#13: how do you handle messages? For example when forms do not validate?

I am not able to get this to work entirely. I am able to get the node to load in a colorbox, but it is not recognizing the template file. I am working in D6. Here is what I did.

I added the following to my template.php file

define('IS_AJAX', isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest');
function theme_preprocess_page(&$vars) {
  if ( IS_AJAX ) {
        $vars['template_file'] = 'page_ajax';
  }
}

then I created a template file page-ajax.tpl.php and added the following to it:
<?php print $content; ?>

I added a link to the teaser output of the content type I want to popup the color box:
<h2><a href="<?php print '/node/' . $node->nid ; ?>" class="colorbox">Post Title</a></h2>

Like I mentioned above, when I click on the link I am getting the colorbox to load but with the entire page contents including header, footer and navigation. It appears as thought the page-ajax.tpl.php template file is not being loaded. Anyone have any ideas why that might be?

clear your cache.

Thanks lasac. already flushed all caches few times, no change. It is just as if the template file is not being loaded.
Is there a way to check and see if the template is being recognized by Drupal?

you did change theme_ to your themename_ right?

Hi,

I'm just starting to learn how Drupal works, and am not following what I'm meant to do with the second piece of code. I've created page-ajax.tpl.php, and inserted the first piece of code into template.php, but am not sure where the second (function phptemplate_page) goes. I can't find the theme_page function anywhere, and the only D7 references I can find to it say it isn't used.

Any help would be hugely appreciated!!

Many thanks in advance!

I'm interested in this issue as well. Similar to the suggestions above, I have added a page--plain which strips out what I don't want. The page is perfect to appear in a colorbox box.
- I've enabled the colorbox load option
- I've updated the URL to include the extra options, "?width=500&height=500&iframe=true"
- I set "class=colorbox-load" on the link

and yet the node continues to load in the browser, and not in a colorbox window. Colorbox works fine on images, I just need it to work on a link to load a node...

I am using D7.

Check that Colorbox has not been disabled on the path you want it to work on, edit in configuration and look in the source html if colorbox.js is there

@hutch: Iam also facing the same problem as like #22. And colorbox.js is also loading in the page.
But page is not opening in clorobox.

Worked for me. One note: if the template is named page-ajax.tpl.php, the 5th line array should be: 'array('page-ajax');'

Using D6. I assume every theme has a theme_preprocess_page function, so how do you integrate the D6 code above with the existing function?

Existing:

function tnt_lockdown_6_preprocess_page(&$vars) {
  global $language;
  // Remove sidebars if disabled e.g., for Panels
  if (!$vars['show_blocks']) {
    $vars['sidebar_first'] = '';
    $vars['sidebar_last'] = '';
  }

My try at integrating:

define('IS_AJAX', isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest');
function tnt_lockdown_6_preprocess_page(&$vars) {
  global $language;
  // Remove sidebars if disabled e.g., for Panels
  if (!$vars['show_blocks']) {
    $vars['sidebar_first'] = '';
    $vars['sidebar_last'] = '';
  }
  if ( IS_AJAX ) {
        $vars['template_file'] = 'page_ajax';
  }

I think that may be my only problem. I have created a view with the fields [path] and [title], then I'm using "Output this field as a link" for the title field with:
Link path: [path]?iframe=true&width=500&height=500 (exactly what the colorbox module says to use for paths, right?)
Link class: colorbox-load

The list of titles the view creates bring up a colorbox when clicked, but load the entire page. All the colorbox js file are loading according to source file.

Here is another approach for node in colorbox. It works very similar to the form integration.

Usage:

// with page css
print l('Node in Colorbox', 'colorbox/node/1', array('attributes' => array('class' => 'colorbox-inline'), 'query' => array('width' => 640, 'height' => 480))); 
// without any css, wrapped in iframe
print l('Node in Colorbox', 'colorbox/node/1', array('attributes' => array('class' => 'colorbox-inline'), 'query' => array('width' => 640, 'height' => 480, 'iframe' => TRUE)));

For Drupal 7 + zen subtheme this worked for me:

enable Colorbox load and create url [path]?width=500&height=500&iframe=true&template=SOMETHING

Create new template file page--SOMETHING.tpl.php with this line (or copy page.tpl.php and remove things you don't want):

print render($page['content']);

in template.php (in your theme folder) create, uncomment or edit function THEMENAME_preprocess_page():

function THEMENAME_preprocess_page(&$variables, $hook) {
	if (isset($_GET['template']) && $_GET['template'] == 'SOMETHING') {
		$variables['theme_hook_suggestions'][] = 'page__SOMETHING';
	}
}

See more info here: http://drupal.org/node/223440, next I will check out IS_AJAX method in #13, but so far this works.

#28 works a treat ;-)
I used a template page--colorbox.tpl.php and put template=colorbox in the url querystring
I also tried removing iframe=true, works too but the dark background lingers...
So with iframe is better.

Any hints how to disable the toolbar for the template?

Ah, I found a solution, just modify and add this to template.php:

function THEMENAME_page_alter(&$page) {
  if (isset($_GET['template']) && $_GET['template'] == 'SOMETHING') {
    unset($page['page_top']['toolbar']);
  }
}

Subscribe ! Wow this is exactly what i'm looking for ! Thanks to all !

It's also possible to remove every surrounding html code which you don't need if you do real ajax loads instead of an iframe:

template.php:

function THEMENAME_preprocess_html(&$variables) {
  // Use a different html template for Ajax requests
  if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest' ) {
    $variables['theme_hook_suggestions'][] = 'html__ajax';
  }
}

function THEMENAME_preprocess_page(&$variables) {
  // Use a different page template for Ajax requests
  if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest' ) {
    $variables['theme_hook_suggestions'][] = 'page__ajax';
  }
}

Then you have to create two template files:
html--ajax.tpl.php:

<?php print $page; ?>

page--ajax.tpl.php:

<!-- use a surrounding div to close the Colorbox when clicking the onto the Colorbox -->
<div class="colorbox-ajax" onclick="jQuery.colorbox.close(); return false;">
<?php print render($page['content']); ?>
</div>

Comparing to just an image the image node loads two times slower in colorbox. Is there a way to preload it somehow?

FYI: this is what we are using

1/ copy page.tpl to page-colorbox.tpl.php and get rid off all the regions, headers, menu's

2/ add the following to template.php

function MYTHEME_preprocess_page(&$vars, $hook) {
  if (isset($_GET['colorbox']) && $_GET['colorbox'] == 'yes') {
    $vars['template_files'] = array('page-colorbox');
  }
}

3/ add colorbox=yes to your links

4/ clear all caches and reload

Man I've tried every which way and Sunday but no luck.
I have a D7 site and did this:
Added page--colorbox.tpl.php with only:

print render($page['content']);

Added:
function mayo_preprocess_page(&$variables, $hook) {
if (isset($_GET['template']) && $_GET['template'] == 'colorbox') {
$variables['theme_hook_suggestions'][] = 'page__colorbox';
}
}
to the template.php file.
Added:
colorbox-load
to the class
and added:
[path]/?width=500&height=500&iframe=true&template=colorbox
to the link.
The color box displays but always as a full page rendering with menus headers and all.

I have cleared the cache several times and even went to the theme settings page to try and get the theme to maybe pick up the new template file.

I don't know which is going first, the wall or my head!

Same problem here: I tested #28 and #34 with no success. First I added in my themes/bartik/template.php:

function bartik_preprocess_page(&$variables, $hook) {
    if (isset($_GET['template']) && $_GET['template'] == 'colorbox') {
        $variables['theme_hook_suggestions'][] = 'page__colorbox';
    }
}

then copied page.tpl.php in page--colorbox.tpl.php and eliminated headers and menus. After clearing the cache the link:
<a class="colorbox-load" href="http://MY.SITE.COM/it/node/5??width=500&height=500&iframe=true&template=colorbox">Link</a>
gives me the overlay with full theme and also Theme developer does not show the new template.

Same result if I include in themes/bartik/template.php:

function bartik_preprocess_page(&$vars, $hook) {
  if (isset($_GET['colorbox']) && $_GET['colorbox'] == 'yes') {
    $vars['template_files'] = array('page-colorbox');
  }
}

create page-colorbox.tpl.php stripping the parts I don't need, double clear the cache and open the link:
<a class="colorbox-load" href="http://MY.SITE.COM/it/node/5?colorbox=yes">Link</a>

No clue what the problem is: thanks in advance for any suggestion :)

Everybody here:

Using only the

if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest' ) {
....

method is very very bad -- as soon as you turn on page caching, then everything will break, since page caching doesn't care whether the HTTP_X_REQUESTED_WITH indicates Ajax or not. This means that whichever way the page was generated (Ajax or normal) the first time it's viewed and cached, that exact same output will be returned for that page whether you're loading the full "node/5" page or trying to load "node/5" through ajax into a colorbox.

Not good.

Another way to implement in custom module. It only work without iframe parameter.
Duplicate colorbox/js/colorbox_load.js into custom module. Change line 34-39 to

$('a, area, input', context)
      .filter('.colobox-load-portion')
      .once('init-portfolio-load-portion-processed', function () {
        var params = $.urlParams($(this).attr('href'));
        params['href'] = function() {
          var url = $(this).attr('href'); // Assume that it is <a> tag
          return url + ' .node';
        };
        $(this).colorbox($.extend({}, settings.colorbox, params));
      });

This is inspired from the jquery .load() method that can fetch only part of result.

$('#result').load('ajax/test.html #container');

That's an interesting point made in #37

As such, my implementation of this solution is as follows:

1. Create custom HTML and PAGE templates with just the bare minimum in them, as per #32 so that you can ensure scripts aren't being loaded twice (I was having some problems with this), but making the if statement check for a specific parameter, as per #28, rather than checking for AJAX. In my case this is &template=colorbox.
2. Construct the link with the additional class "colorbox-template" to avoid conflicts (optional).
2. Load the content without the iFrame so that styles are inherited from the current page (optional).
3. Rather than checking if the request is using AJAX, we can assume that it is, if javascript is enabled. So append the necessary parameters to the URL afterwards using Javascript. A simplified version is something like this:

  $(document).ready(function() {
    // loop through all links which should use a custom template file
    $('.colorbox-template').each( function() {
      // get the current URL
      var oldUrl = $(this).attr('href');
      // append the required parameters
      var newUrl = oldUrl + '&template=colorbox';
      // update the links href
      $(this).attr('href', newUrl);
    });
  });

This way, with javascript disabled, the links don't have the &template=colorbox parameter and therefore are not loaded into a custom template file. With javascript enabled, we append the neccessary parameter to the URL of all links with the class "colorbox-template" and the colorbox loads as normal.
To make it more resilient, you could check first whether the parameter exists in the URL before appending - this wasn't necesary for me as the workflow on the site ensures that this cannot happen. The jQuery BBQ would come in handy for this.

#36 @ jimmi61: I also have the Bartik theme and did the exact same stuff you did, whitout any success.
Did you find a solution yet?

I am so confused, wich one of all this options is the best ?? :s
edit: #28 worked for me but not #34

#28 I think I have everything setup right (obviously not). I'm on D7, Fusion.

Created 'page--colorbox.tpl.php', only contains this:
---------------------

 print render($page['content']); 

To page 'template.php' I added:
---------------------

function THEMENAME_preprocess_page(&$variables, $hook) {
    if (isset($_GET['template']) && $_GET['template'] == 'colorbox') {
        $variables['theme_hook_suggestions'][] = 'page__colorbox';
    }
}

'THEMENAME_preprocess_page()' did not exist in template.php before I added it.

My url is: 'url/?width=500&height=500&iframe=true&template=page--colorbox'

Is it ok if template.php and page--colorbox.tpl.php reside in sites/all/themes/theme or should they be in default? Or does it matter?

Thanks.

try template=colorbox in your URL query string since that is what $_GET is looking for ;-)

@Hutch thanks for your reply, but still nothing. :/

In D7 you might need to do something like this

function mytheme_preprocess_html(&$vars) {
  // give colorbox its own html
  if (isset($_GET['template']) && $_GET['template'] == 'colorbox') {
    $vars['theme_hook_suggestions'][] = 'html__colorbox';
  }
}

function mytheme_preprocess_page(&$vars) {
  // give colorbox its own page
  if (isset($_GET['template']) && $_GET['template'] == 'colorbox') {
    $vars['theme_hook_suggestions'][] = 'page__colorbox';
  }
}

copy 'html.tpl.php' to 'html--colorbox.tpl.php' and remove what you don't want and 'page--colorbox.tpl.php' with:

<!-- page colorbox -->
<?php 
print render($page['content']); 
?>
<!-- /page colorbox -->

The html comments are there so you can see if it's working. Remember to flush cache....

Forgot to add an example link:

A test link <a class="colorbox-load" href="[url here]?width=600&height=600&iframe=true&template=colorbox">HERE</a>

Attached patch implements #39 and the ideas it is based upon. It also defines colorbox directory as a valid path to get templates from, so the template system recognizes page-colorbox.tpl.php and people is still able to provide their own version of page-colorbox in the themes.

Thanks to all people providing vaulable info to make this issue move forward.

My js skills sucks, perhaps there's a better place to insert @carl.brown snippet.

It is for d6. It lacks some documentation. A d7 version seems straightforward to code but we need some feedback from colorbox maintainers to know what direction they want to step on.

#46 works well for me

+++ b/colorbox.moduleundefined
@@ -448,3 +448,21 @@ function colorbox_insert_content($item, $style, $widget) {
+  if (isset($_GET['template'])) {

Unless I'm missing something, this is flawed for the same reason I wrote in comment #37.

With page caching on, you're hosed. The colorbox will open showing the wrong thing.

This does the trick for D7. Not sure how others were able to make it work in D7 without this or why it breaks for me using other examples. But here it is anyhow... follow the directions in #45 except for this part:

function THEMENAME_preprocess_html(&$vars) {
  if (isset($_GET['template']) && $_GET['template'] == 'colorbox') {
    $vars['theme_hook_suggestions'][] = 'html__colorbox';
  }
}
function THEMENAME_process_page(&$vars) {
  if (isset($_GET['template']) && $_GET['template'] == 'colorbox') {
    $vars['theme_hook_suggestions'][] = 'page__colorbox';
  }
}

Notice this function uses "process_page" and not "preprocess_page"

I believe the solution to this is much simpler and doesn't require any changes to the colorbox module code (perhaps, maybe, to the module's documentation.

When creating the colorbox link use the following syntax instead of what is suggested in the the documentation:

<a href="node/<?php print $node->nid; ?>/popup?width=600&height=400" class="colorbox-load"><?php print $node->title; ?></a>

Or better yet:

<?php print l($node->title, 'node/'.$node->nid.'/popup', array('attributes' => array('class' => 'colorbox-load'), 'query' => 'width=600&height=400')); ?>

After doing that, create a page-node-popup.tpl.php file (D6) and enter whatever code you need to have the node display inside the colorbox as you see fit.

When implementing #45 do not forget to Enable the checkbox "Enable Colorbox load " in the colorbox settings on /admin/config/media/colorbox (like I did)

#45 works great for me... however, I have a select form on the colorbox page.... when submitted, it opens up the entire site in the colorbox.

How can I set this to close the colorbox upon selection of the form?

To see a demo... http://cl-t094-025cl.privatedns.com/~bl927736/ then click the country selector at the top right of the page.

Currently rules is processing a redirect upon form submission - so could I add something to that rule to target the original page?

#49 helped me, damn it drupal stop changing small things:

Notice this function uses "process_page" and not "preprocess_page" (from post #49)

#17 worked for me

I didn't read everything in this thread in detail, but most solutions seem to involve the theme layer - I needed this theme-independent in a module.

Just rendering the bare node content in a menu callback and calling this from colorbox links fits my purpose...

function mymodule_menu() {
  $items = array();

  // Callback to render only the node text for colorbox.
  $items['node/%node/colorbox'] = array(
    'page callback' => 'mymodule_view_node_colorbox',
    'page arguments' => array(1),
    'access callback' => TRUE,
  );

  return $items;
}

/**
 * Render node title and body for colorbox.
 */
function mymodule_view_node_colorbox($node) {
  $output = '<h1>' . $node->title . '</h1>';
  $output .= drupal_render(node_view($node, 'full'));
  print $output;
  exit();
}

<a href="/node/1/colorbox?width=600&height=400" class="colorbox-load">Colorbox this!</a>

Please remember that such a special URL will also be indexed by Google if you don't use rel=nofollow.

Using D6

#46 patch, implementing #39 solution, works for me too.

I agree with NicolasH about not using the theme layer as everyone seems to be suggesting. Seems like a lot of work and setup to make it work as you need it and then maintenance increases. I took the same approach as NicolasH but his method doesn't have a fallback with javascript turned off. (He might, he just didn't post that solution. carl.brown was going down the right path here: [#comment-4870846] but it still needed a little more work to have it fired correctly and once. I created a separate module that would allow you to add the css class "colorbox-node", along with your colorbox-load class that would rewrite the url by prepending 'colorbox' to the beginning of the path if JS is enabled or it just goes the the node path if its not.

Basically if you use path auto and your url is /blogs/my-example, the module will re-write it to /colorbox/blogs/my-example. In the module there is a menu item path the will load the path and parse the URL string, remove the colorbox from the beginning and then lookup the normal path which will be your "node/33" I get the node id from that and then serve up the node like NicolasH.

I have uploaded the module along with code here for review to help improve upon this.

@file: colorbox_node.module
/*
 * Implments hook_init().
 */
function colorbox_node_init() {
  drupal_add_js(drupal_get_path('module', 'colorbox_node') .'/colorbox_node.js');
}

/*
 * Implements hook_menu().
 */
function colorbox_node_menu() {
  $items['colorbox/%colorbox_node_url'] = array(
    'page callback' => 'colorbox_node_output',
    'page arguments' => array(1),
    'access arguments' => array('access content'),
    'load arguments' => array('%map'),
    'type' => MENU_CALLBACK,
  );
  return $items;
}

/*
 * Displays a node view without the page template.
 */
function colorbox_node_output($nid) {
  // If we have a node, lets display it
  if ($node = node_load($nid)) {
    print drupal_render(node_view($node));
  }
  else {
    // This isn't a node or the node failed to load.
    watchdog('colorbox_node', t('Failed to load a node while attempting to display it through a colorbox.<br />Node ID: '. $node_id));
  }
  exit();
}

/*
 * Takes a path as an array of all our arguments from the
 * url structure.  We then put that structure back together,
 * find our system path and then return the last element
 * which should be our node id.
 */
function colorbox_node_url_load($arg, $path = array()) {
  // @TODO: Add some more error checking around the path.
  // First lets remove colorbox
  array_shift($path);
  // Now lets buld our path to return our system path and
  // retrieve our node id from that.
  $system_path = drupal_get_normal_path(implode('/', $path));
  return array_pop(explode('/', $system_path));
}

Here is the js file.
@file: colorbox_node.js

(function($) {
	Drupal.behaviors.colorboxNode = {
		// Lets find our class name and change our URL to
		// our defined menu path to open in a colorbox modal.
		attach : function(context, settings) {
			$('a.colorbox-node', context).once('colorboxNode').each(function() {
				var href = $(this).attr('href');
				// Lets prepend our colorbox to the beginning of our link
				var link = '/colorbox' + href;
				$(this).attr('href', link);
			});
		}
	};
})(jQuery);

So for a link that you want to do this too, simply do this.
<a class="colorbox-load colorbox-node" href="blogs/my-example?width=600&height=600">My Example</a>

Now you don't need to manage any other template files and its theme independent.

@iLLin: Really nice!.... and no, I didn't actually have any nojs fallback, so that's definitely an improvement. My example kinda works, since node/1/colorbox still displays node/1...but yeah.

IMO this would be a good addition to the colorbox module itself, rather than a separate project, but are you planning to release it?

If so, immediate feedback would be to enable the necessary settings under admin/config/media/colorbox to make this work out of the box.

No current plans to release, up to the maintainer. One issue I would like to resolve that I haven't had time to address, I will shortly, is when the node is displayed with ajax, we need to fire the Drupal Behaviors. I'm thinking integration with ctools, but to get that to work correctly, we would need to load up the ajax libraries on every page and I believe we need to add another class to the link. It could be cumbersome to do this so ctools might not be the best approach. As soon as I figure out how to fire off the drupal behaviors, then it won't matter.

I can apply these changes to the module and with a patch if that's what the maintainer wants. Or we can include it with the module, just as a sub module that can be turned on independently? Just let me know what direction we should go. I will currently just keep it as its own module and figure out the attach behaviors and you mentioned to make it work out of the box? What do you mean here as it does, you just need to add an extra class to the link. You have to do that for colorbox anyway unless your talking views integration or display formatters?

By out-of-the-box I was referring to switching on the extra setting for colorbox (colorbox-load), since other modules appear to already do the same as well. It says "Other modules may activate this for easy Colorbox integration" in the colorbox admin. That would only be applicable if it would be its own module, of course.

@iLLin, sometimes you need to use absolute paths, such as forwarding paths to output fields in Views. In order to properly write the url in those cases too, I added a if else test to the JS. I bet there are better ways to do this, I'm not really a programmer, but it got the job done.

(function($) {
	Drupal.behaviors.colorboxNode = {
		// Lets find our class name and change our URL to
		// our defined menu path to open in a colorbox modal.
		attach : function(context, settings) {
			$('a.colorbox-node', context).once('colorboxNode').each(function() {
				var host = window.location.hostname,
				    href = $(this).attr('href'),
				    pathArray = href.split( '/' ),
				    test = pathArray[2];
				if (test == host) {
					var origin = window.location.protocol+"//"+window.location.host;
					var link = origin + '/colorbox' + (href.replace(origin,''));
					$(this).attr('href', link);
					}
				else {
				// Lets prepend our colorbox to the beginning of our link
					var link = '/colorbox' + href;
					$(this).attr('href', link);
				}
			});
		}
	};
})(jQuery);

@Krispy, do you need to maintain the absolute URL or during the re-write can it change to relative? If it doesn't matter (which i don't see why it would) we could shorten the JS to something like this:

(function($) {
	Drupal.behaviors.colorboxNode = {
		// Lets find our class name and change our URL to
		// our defined menu path to open in a colorbox modal.
		attach : function(context, settings) {
			$('a.colorbox-node', context).once('colorboxNode').each(function() {
				var href = $(this).attr('href');
				// Create an element so we can parse our a URL no matter if its internal or external.
				var parse = document.createElement('a');
				parse.href = href;				
				// Lets prepend our colorbox to the beginning of our link
				var link = '/colorbox' + parse.pathname;
				$(this).attr('href', link);
			});
		}
	};
})(jQuery);

Let me know if this works out for you.

@NicolasH, colorbox handles the attach behaviors automatically so there is no need for me to add anything extra to make sure that works. The only thing you said was missing was auto turning on the checkbox for colorbox load?

I created a colorbox_node.install file and put this in it. It should solve that issue you mentioned.

/*
 * Implements hook_install().
 */
function colorbox_node_install() {
  variable_set('colorbox_load', TRUE);
}

Attached is a new Zip with the new js and install file.

I have added this as a project here:
http://drupal.org/project/colorbox_node

I use this code:
url = ..
url = unescape(url);
$.extend($.colorbox.settings, {iframe: true, width:"400px", height:"400px");
$.colorbox({href:url});

I created a new content type, and a specific tpl.php which prints only the content of the node.

wrong issue, I reposted my post in http://drupal.org/node/940220#comment-6028882

This project handles webforms now too and all you have to do is add two classes to your link.

http://drupal.org/project/colorbox_node

With @iLLin realising the colorbox_node module I close this issue.

http://drupal.org/project/colorbox_node

sorry so new to Drupal and don't know anything about PHP.. In which file does this <a href="/node/1/colorbox?width=600&height=400" class="colorbox-load">Colorbox this!</a>go..?

Sorry I'm a programmer nono.. but where and in which file does this
create url [path]?width=500&height=500&iframe=true&template=SOMETHING go?

This shouldn't go in a file, but in the page (body) content. You should not use a plaintext format, but one among filtered html, full html and PHP.

Im trying to use colorbox node and put to my link href form instructions. I have a node mypage.com/?q=quote-3, so the link is

<a class="colorbox-node" href="?q=quote-3?width=500&height=500">Popup</a>

But it gives me an error:
An AJAX HTTP error occurred.
HTTP Result Code: 404
Debugging information follows.
Path: /colorbox/?q=quote-3?width=500&height=500
StatusText: Not Found
ResponseText:
404 Not Found
Not Found
The requested URL /colorbox/ was not found on this server.
Apache/2.2.0 (Fedora) Server at test2.adevolution.dk Port 80

Thanks!

I would suggest not to use colorbox node, but make these small changes:

In your theme template.php add the following function:

function YOURTHEME_preprocess_page(&$variables, $hook) {
  if (isset($_GET['template']) && $_GET['template'] == 'colorbox') {
    $variables['theme_hook_suggestions'][] = 'page__colorbox';
  }
}

And add a template in the root of your theme called: page--colorbox.tpl.php

<div class="in_colorbox_mode">
<?php if ($title): ?>
<h1>
  <?php print $title; ?>
</h1>
<?php endif; ?>

<div id="colorbox-main">
  <?php
  print render($page['content']); 
  ?></div>
</div>

then, when you want to load a node into a colorbox, make the link as follows:

<a href="/node/4?template=colorbox&iframe=true&width=500&height=500" class="colorbox-load">open node in colorbox</a>

By doing the solution above ^, does your attach behaviors even fire? What about any loaded javascript or css files?

The other guys issue is not having mod_rewrite turned on, on the server. That will fix his issue if he still wants to use the colorbox node module.

@GBurg yeah, I did something like this, created template for the newsletter block (actually I needed to have a newsletter block in a popup) and made a link:
<a class="colorbox" href="?q=node/25">E-mail newsletter</a></li>

@iLLin I can't unfortunately turn on mod_rewrite, something wrong with the server :/

Thanks!

Thanx @hutch #45 works well for me!

after days trying a lot of stuff, for D7 go with #45, works like a charm!! Thanks @hutch.

I edit this code:

function THEMENAME_preprocess_html(&$variables) {
  // Use a different html template for Ajax requests
  if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest' ) {
    $variables['theme_hook_suggestions'][] = 'html__ajax';
  }
}

function THEMENAME_preprocess_page(&$variables) {
  // Use a different page template for Ajax requests
  if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest' ) {
    $variables['theme_hook_suggestions'][] = 'page__ajax';
  }
}

with this:

function THEMENAME_preprocess_html(&$vars) {
  // give colorbox its own html
   if (isset($vars['node']->type)) {
    $vars['theme_hook_suggestions'][] = 'html__colorbox';
  }
}
function THEMENAME_preprocess_page(&$vars) {
  // give colorbox its own page
   if (isset($vars['node']->type)) {
    $vars['theme_hook_suggestions'][] = 'page__colorbox';
  }
}

and everything else as #45