Drupal Technical

[Drupal 6] How to load a node/add form inside a Colorbox popup?

Meera.l | | 2 min read

Colorbox is a pretty nice JQuery plugin having a lot of cool features. Recently we had worked on a Drupal project in which we had to load some content programmatically via Colorbox. To be more specific we had to load the Drupal node/add form within Colorbox before presenting it to the user. If you are facing the same scenario in your Drupal site and want to know how to load a node/add form inside a Colorbox popup then follow the steps mentioned here.

Installing the Colorbox module in drupal 6

Follow the steps below to install the Colorbox module

  1. Download the Drupal Colorbox module
  2. Next extract it to your sites/all/modules directory.
  3. You should be aware that Colorbox needs a plugin for the installation to be complete. Download the Colorbox plugin and extract it into the
    sites/all/libraries

    directory in your Drupal site.

  4. If your site is running on Drupal 6 you should have the JQuery update module 6.x-2.0-alpha version.
  5. If you have taken care of all the above steps, you should be able to use Colorbox in your Drupal site

Steps to display a node/add form inside a colorbox

Follow the steps below

  1. First create a custom menu, with the call back function as shown below
    <?php
//Implementing hook_menu
function custom_menu() {
	$items['add_node_colorbox'] = array(
		  'title' => 'Add Node in colorbox',
		  'page callback' => 'custom_add_node_colorbox',
		  'access arguments' => array('Access Content'),
		  'type' => MENU_CALLBACK,
		);
	return $items;
}

//Menu call back function
function add_node_colorbox() {
  global $user;
  module_load_include('inc', 'node', 'node.pages');
  $node = new stdClass();
  $node_type = 'content_type_name';
  $node->type = $node_type;
  $node->uid = $user->uid;
  $node->name = (isset($user->name) ? $user->name : '');
  print drupal_get_form($form_id,$node);
  exit();
}
  2. Next print this menu somewhere inside your tpl file 
    <a class='colorbox-node-add' href="/add_node_colorbox">Add Node</a&gt
  3. Now inside one of your js files, just call colorbox() function as follows. 
    $("a.colorbox-node-add").colorbox();

  4. Thats all there is to it.

Simple isn't it? This will make a node/add for render inside Colorbox in your Drupal site.

Reference:
http://stackoverflow.com/questions/5344754/drupal-7-how-to-display-node…
http://drupal.org/project/colorbox

 

 

Related Topics