Lightbox2 - How to add a lightbox to webpage links

It's possible to show webpage content in the lightbox, using iframes. In this case the "rel" attribute should be set to lightframe. Again it's possible to group the items, (e.g. lightframe[search]) but in addition to that, it's possible to control some of the iframe properties. It's possible to set the 'width', 'height' and 'scrolling' properties of the iframe. The properties are separated from the group name by a |, for example lightframe[search|width:100px;]. If no grouping is being used, then the | is still used and the format would be lightframe[|width:100px;]. The properties should all be of the format "property: value;" - note the closing semi-colon. If no iframe properties are set, then the default width and height of 400px will be used. See below for more detailed examples.

Basic example:

<a href="http://www.google.com" rel="lightframe">Search google</a>

Basic example with caption:

<a href="http://www.google.com" rel="lightframe[][my caption]">Search google</a>

Grouped example:

<a href="http://www.google.com" rel="lightframe[search]">Search google</a>
<a href="http://www.yahoo.com" rel="lightframe[search][Search Yahoo]">Search yahoo</a>

Controlling iframe property example:

<a href="http://www.google.com" rel="lightframe[|width:400px; height:300px; scrolling: auto;]">Search google</a>

Controlling iframe property when grouped example:

<a href="http://www.google.com" rel="lightframe[search|width:400px; height:300px; scrolling: auto;][Search Google]">Search google</a>
<a href="http://www.yahoo.com" rel="lightframe[search|width:400px; height:300px;]">Search yahoo</a>
<a href="http://www.yahoo.com" rel="lightframe[search|width:400px; height:300px;][Search Yahoo]">Search yahoo</a>

Disabling rel="lightframe"

By default, support for rel="lightframe" is enabled. This may not be the desired behavior - especially for untrusted users. If you wish to disable this, then you will need to enable the Disable Lightbox iframe filter filter for your input format at admin/settings/filters.

Opening node content in a lightbox

Built-in solution

Sometimes you will want to open node content in a lightbox. You can use the method described above but that will still display the sidebars, etc, within the lightbox which may not be what you want.

To overcome this, you just need to add /lightbox2 to the end of the node path. Note, this will only work with node links:

<a href="node/xxx/lightbox2" rel="lightframe[group|width:400px;][caption]">click here to see node content</a>

Drupal 5.x users will need to copy the lightbox2/page-node-lightbox2.tpl.php file to their theme's own directory and ensure it is readable. This file can be modified to suit your theme. This is not a requirement for Drupal 6.x users, but the file is provided in case you need to override the default layout.

Alternatively you could also specify the class or id of the part of the page you want to show inside of the lightbox:

<a href="/node/xxx #content-inner" rel="lightmodal[|width:700px;height:300px;]">Click to see only the content inside #content-inner</a>
// edited by Heihachi88, cause some guy messed up the code in the lines above!

Alternative solution

(Suggested by iDonny)
To have a more flexible node URL, copy page-node-lightbox2.tpl.php to your own theme directory and rename the file to simple.tpl.php. Open simple.tpl.php and delete unwanted page structure while making sure the file is still readable. Add the following to the top of your generic page.tpl.php and it will load nodes and any Drupal content without side navigation, etc, in the lightbox:

<?php
if (isset($_GET["format"])) {
  if ($_GET["format"] == "simple") {
    include ('simple.tpl.php');
    return;
  }
}
?>

Triggered by URLs of the format node/xx?format=simple
Also works with the Pathauto module as long as the referring link has "?format=simple" at the end of the link (i.e. <a href="path/alias?format=simple">).

Adding lightbox support to links created by Views

If using the link field type, it is possible to set the rel attribute in "manage field settings".

However, if you're using Views and are displaying links to the node, you may need to use the following solution suggested by jriedel.

In a node listing, where the node title links to the node page, it's possible to make the link open a lightbox type popup rather than opening in a new page.

In the view edit page, open up the header for the block/page and add this.

<script>
$(document).ready(function() {
   $(".views-field-field-nodetitle-nid > .field-content > a").each(function() {
     $(this).attr("href", $(this).attr("href") + "?format=simple");
     $(this).attr("rel", "lightframe");
     });
   Lightbox.initList() ;
});
</script>

Make sure you allow Full HTML, and save the changes.

The views-field... comes from the DIV tags that view and the theme puts in. Just look at the page source and you can find the right thing to used based on your field names.

Template Solution

A slightly alternate solution, if you don't want to add /lightbox2to the end of the node path, is to create your own custom page-[node_type].tpl.php template, and style accordingly (ie. remove the navigation, etc). All you have to do is add the template suggestion in your template.php, for example:

function mytheme_preprocess_page(&$vars, $hook) {
  $vars['template_files'][] = 'page-'. str_replace('_', '-', $vars['node']->type);
}

If you are using Drupal 7, try:

function mytheme_preprocess_page(&$variables) {
    if (isset($variables['node']->type)) {
        $variables['theme_hook_suggestions'][] = 'page__' . $variables['node']->type;
    }
}

Closing a lightbox iframe

To open links that are inside a lightbox in a new page without lightframe just add target="_top" to the link.

In the case of a login form inside of a lightbox you might want to add some javascript code to the destination page after login to make sure that page is not shown inside the lightbox iframe.

<script type="text/javascript">
  if(top != self) {
    top.location = location;
  }
</script>