blog-banner

Display Nodes with Lightbox2

  • COLORBOX
  • Drupal 7
  • Drupal Planet
  • LIGHTBOX2
  • Templates
  • Theme

Drupal Lightbox2

Lightbox is a powerful module in the Drupal arena. proved its mastery once again! I was involved in trying to find a way to display nodes in popup, the apparent module that struck my way was Colorbox-Node. Things looked as if they would be a cakewalk but went beyond what I thought. The Colorbox-Node holds the ability to display nodes in overlay effect, but it needs a huge template and jQuery-level customization. All my assay went in vein, there came Lightbox to rescue.

No prelude to Lightbox is required for Drupal developers, but for newbies., It is a Module that can produce overlay/ popup effects to your site. Let me not deviate, the following steps were followed to Load a node in Lightbox.

1. Identify the template file using devel_themer or in the case of Views use Advanced->Theme-> information.

2. In my case I was using views to display the images associated with the nodes. On clicking the images It would show the full node in the Lightbox.

3. Add '/Lightbox' to the href and 'Light frame' to the rel. It would look like

<a href= "node/<?php print $row->nid;?>/lightbox" rel="lightframe">

4. Save the Template file and clear the cache to see the node being loaded in Lightbox.

To extend further: 

I had no need to display the sidebars, and headers in the lightbox. Hence I wanted to remove these regions in the template files. Was a catch22 again because the Page-node.tpl.php was a common file. Any removal of regions will reflect in the full node view as well.

The thought to use a template based on content type struck as an idea. In my case only one content type was to be shown in lightbox, hence I moved further with my idea with no hesitation. 

Place the below-mentioned code in template.php in the themes folder and create a template file called page--content-type.tpl.php, all nodes with that type will use the new template file.

 
  1. function yourthemename_preprocess_page(&$vars) {
  2.   if (isset($vars['node']->type)) {
  3.     $vars['theme_hook_suggestions'][] = 'page__' . $vars['node']->type;
  4.   }
  5. }
  6.  
 

 

Get awesome tech content in your inbox