Last updated September 17, 2013. Created on April 28, 2008.
Edited by 3lackRos3, Heihachi88, Yaazkal, jimurl. Log in to edit this page.

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>

Looking for support? Visit the Drupal.org forums, or join #drupal-support in IRC.

Comments

moneymike’s picture

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

Please explain this code a bit more. Am I only replacing “type” for my node type which would be “gallery” in my case? And are you trying to say that you can make content without the header and footer or menus for light box to display without them by not including them in the page-[node_type].tpl.php? And that this code will display headers and footers and all that good stuff when not displayed in lightbox on the regular pages?
Forgive me if I sound off.

mnm_mike’s picture

I think I'm asking the same thing as Mike.
I've created a view with a image thumbnail and I want that to launch a photo or video slideshow.
I've got my field added called thumbnail and there are 2 options using lightbox under the format for lightbox:
Lightbox2 iframe: original->node page
and
Lightbox2 iframe

No matter what I click it brings up the entire node/page in lightbox with all the navigation, links.
I just want 3 of the fields displayed (the full image or video, the brief description and the date). It does display the navigation to cycle through the nodes as it should

So essentially Lightbox is functioning but it is bringing up the entire page. How do I get it to bring up just the 3 fields I've created in my content type?

It is likely something very simple as I've still got a lot to learn about Drupal, but I've been looking around for over 2 days and cannot find a solution.

manumilou’s picture

hi mnm_mike,

One of the solution may be to use presets from imagecache module. Many more options will appear in the views dropdown list. So you may just upload a full size image, create a thumbnail preset (like scale to 150X100 for instance) in the imagecache module configuration, and use for instance lightbox2: thumbnail->image. It will display the thumbnail in the view page and only your full size image in the ligthbox instead of the entire node page.
Hope this helped.

Manu

mnm_mike’s picture

Turns out my boss doesn't want lightbox after all, so I need to link to a node...this info helps me to have more options since I'm stuck linking to a node and displaying related images on all those pages.

Thanks! Mike

druplicate’s picture

I use Lightbox2 to display the results of clicking on a link in a view and Views automatically appends the /lightbox2 to the URL so it's never seen by the user.

I added a new field (I used the node:title field) to the view, checked "rewrite the output of this field" and placed the following in the text box:

<a href="node/[nid]/lightbox2" rel="lightframe" title="Full Node View">View</a>

Make sure you include the node id field, (nid) (and check "exclude from display") and place it before the link field above in the field list, so that the NID is passed to the URL for the lightbox.

So what this does: Views displays a list of nodes in whatever form you specify (list, table, etc). In each item you may have some fields from the main node, including the new one shown above. Clicking on the "View" link opens a light box with the full node displayed.

You still have to style lightbox2 output to present the node data the way you want using a custom tpl.php file.

Using the theme developer module I gleaned the following information from the lightbox2 view:

Template called:
    page.tpl.php
Candidate template files:
    page-node-lightbox2.tpl.php < page-node-5323.tpl.php < page-node.tpl.php < page.tpl.php

So using page-node-lightbox2.tpl.php you could specify to print the $node variable by itself without all the sidebars, etc, and style it the way you want.

csuggs4’s picture

In D7 for me, the first candidate template file had to be named page--node--lightbox2.tpl.php, with two hyphens between the words instead of one.

woop_light’s picture

Brilliantly intuitive solution -- thank you for posting it. Everything seems to be working fine except that it's not picking up on [nid] as a token so I'm getting a 404 error within the lightbox. I'm sure I'm just overlooking something. Any help would be much appreciated!

(Note that it IS listing all of my fields as tokens -- as expected.)

Edit:
Just realized a solution that should have been obvious to me. Just add the Node ID field to the view then exclude it from display and it'll become an available token.

stienman’s picture

I am currently using the Google checkout Button ( not cart) for product purchasing, but I want it to open a new page or pop up instead of redirecting people off of my site. I tried adding the rel="lightframe" but since it is a form and not a link it didn't work. Any suggestions? This is my first drupal site, so I am still learning.

nimroda1’s picture

Hi,

I want to use Lightbox2 to open Lightbox popups when a user browses through a certain page (i.e. w/o any clicking)

How can this be done?

Thanks!

nbchip’s picture

//in your html u have something like this
<a id="selector" rel="lightframe" href="www.google.com"></a>
//u can trigger it using jquery
$('#selector').triggerHandler('click');
spineless’s picture

So how do you do this exactly?

I thought it would be easy to just create a "content" block with some html code. But I cannot figure out your instructions.

Here is what I have so far.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript">
                 $(document).ready(function(){
                 $('#selector').triggerHandler('click');
             });
   </script>
<a href='/sites/default/files/videos/converted/video.flv&autostart=true' id="selector" rel='lightframe'/></a>  

texas-bronius’s picture

I am a bit confused by the line in the instructions above:

... This is not a requirement for Drupal 6.x users, but the file is provided in case you need to override the default layout.
...

If copying the out-of-box page-node-lightbox2.tpl.php to my custom theme folder is not necessary in Drupal 6 to be able to get a plain-vanilla node to show in lightbox2, then what is? Is the documentation suggesting to modify this .tpl.php in its place when in D6?

Also, I have been unsuccessful at getting the copy of the .tpl.php to register when I used a Zen subtheme unless I actually put the file under themes/zen/zen, which I believe is not the way to do it with Zen subthemes.. Has anyone else had luck with this config?

thanks!

--
http://drupaltees.com
80s themed Drupal T-Shirts

Sborsody’s picture

Oops, I didn't notice your comment before I replied. It looks like with D6 one still needs to provide a page-node-lightbox2.tpl.php file in a theme.

righi’s picture

How we can create a link using lightbox2 in a menu item?

zeezack’s picture

has anyone done this? this is the 2nd time this has been requested?

grasmash’s picture

Download and enable the Menu Attributes module.

This will let you add a rel attribute to any menu item. Add "lightframe" or one of the following rel values (as appropriate):

  • lightbox for image content
  • lightshow for image slideshows
  • lightvideo for video content
  • lightmodal for inline HTML content. Note this isn't for full web pages, just snippets of HTML content
  • lightframe for everything else, including external web pages.

See here to learn how to put the node content only into a lightbox (stripping out the sidebars, etc).

The techie formerly known as madmatter23
Grasmash.com - Drupal Tech Blog

ensignavenger’s picture

This is exactly what I need to do for a site, so I tried your method- the menu attributes module helps, but using the lightbox rel value only works on a single image, not the whole gallery! So I can show a single image in a lightbox when the menu item is clicked, but the user can't navigate through the whole gallery. Have any ideas?

Sborsody’s picture

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.

Then this article says that Drupal 5 needs a template file and implies that Drupal 6 doesn't. On Drupal 6.15, I'm just not seeing /lightbox2 doing anything without copying the template file to my custom theme and modifying it. I think I'll implement simple.tpl.php instead...

ericinwisconsin’s picture

I'm just really learning PHP, and I'm using Contemplates to create template files for my content types. I have a CCK image field that shows up on the node with this code:

print $node->field_cover[0]['view']

I'd like to resize it smaller (there's already an ImageCache size configured for it) and allow users to click on it for Lightbox2 to do its thing. Anyone know how to code it?

adrianmak’s picture

I'm using D6. I followed the built-in solution to add lightbox2 effect for internal node content
and copy the page-node-lightbox2.tpl.php to my theme folder

But it just gave me a blank page while clicking the link.

my screen cap
http://i36.photobucket.com/albums/e28/adrianmak2/Capture-9.png

Apfel007’s picture

subscribe

lwiegand’s picture

Using D6 & custom Zen theme: To get it to work, I copied my theme/page.tpl.php file, renamed it page-node-lightbox2.tpl.php and then edited the file to only print the content. At first I tried editing lightbox2's page-node-lightbox2.tpl.php file and it gave me a blank screen to. Here is what I ended up with in my theme/page-node-lightbox2.tpl.php file.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php print $language->language; ?>" lang="<?php print $language->language; ?>" dir="<?php print $language->dir; ?>">

<head>
  <title><?php print $head_title; ?></title>
  <?php print $head; ?>
  <?php print $styles; ?>
  <?php print $scripts; ?>
</head>
<body class="<?php print $body_classes; ?>" id="node-<?php print $node->type ?>">

  <div id="page"><div id="page-inner">

      <div id="content"><div id="content-inner">

            <?php if ($title): ?>
              <h1 class="title"><?php print $title; ?></h1>
            <?php endif; ?>
            <?php print $messages; ?>
           
          </div> <!-- /#content-header -->
       	
		<div id="content-area">
          <?php print $content; ?>
        </div> 

      </div></div> <!-- /#content-inner, /#content -->

</body>
</html>
tpainton’s picture

Thanks. Just what I was trying to do!

mckinleymedia’s picture

Biggest problem is you'll end up with duplicate ids with this code, and you've re-loaded all the scripts and whatnot. I stripped most of this out. Could probably par down the HTML declaration and the HEAD, but I left them.
To get this to work, I still needed to append my links with "/lightbox2".

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php print $language->language; ?>" lang="<?php print $language->language; ?>" dir="<?php print $language->dir; ?>">
<head>
</head>
<body id="lightboxnode-<?php print $node->type ?>">
     <?php if ($title): ?>
          <h1 class="title"><?php print $title; ?></h1>
     <?php endif; ?>
     <?php print $content; ?>
</body>
</html>

Another pretty big problem with this method is that it needs to fetch the data when you click on the link. Would be much better to pre-load that data on the page and just hide it like Lightbox does in views. But this was the only method I could get working that didn't kill my use of Lightbox in views.

Strutsagget’s picture

This worked great for our Drupl 6 site.

Now i just need to style it.

//PiJa Media & Management AB din apputvecklare

flaviovs’s picture

If you add "/lightbox2" manually at the end of your URLs, you will be creating links that can be followed by spiders and people with Javascript disabled. This will be bad for your ranking on the search engines and for your users experience.

The correct way of handling this issue is to use the direct link to the node on your links, and process them using Javascript to add "/lightbox2". To do this, just insert the following code on your scripts.js file:

Drupal.behaviors.fixlightboxlink = function (context) {
    $("a[rel^='light']:not(a[href$='lightbox2'], .fixlightboxlink-processed)", context)
          .addClass("fixlightboxlink-processed")
          .each(function () {
                    $(this).attr("href", $(this).attr("href") + "/lightbox2");
          });
};

FV

sp3boy’s picture

I'm putting a much extended login/registration process into an iframe using rel=lightframe. Not working too badly but I wanted to invoke a custom page template by adding a suffix to the URL that opens the lightframe... which happens to be user/login.

It took me some time to realise that using /lightbox2 as the suffix for my own purposes was a bad idea as that user/login/lightbox2 is the URL for the modal login feature (which I think is registered with hook_menu even if the feature is disabled). Hence my login link was giving me a nice modal iframe... with only the login form in it, not a bunch of other stuff I was expecting.

kiruthik51’s picture

Hi
I have a google maps iframe.How to open the iframe in lightbox.Plz give me steps..

benklocek’s picture

Built-in solution: Note, this will only work with node links.

Any thoughts for making this work with pathauto aliases?

I'd prefer not to have /node links for every lightbox, while still retaining the ability to link directly to the node and use a different template.

zeezack’s picture

how do you configue the lightbox to just show the content... if you have a lightbox rel in a menu

grasmash’s picture

Click here (it's on this page).

The techie formerly known as madmatter23
Grasmash.com - Drupal Tech Blog

Sam Straub’s picture

Does anyone have ideas on the best way to automatically add rel="lightframe" to all external 'a' links? For instance, I want to offer an external link to CNN from my site, but I want to pop it in a light box. That part is simple. Done. Now, I want to add the same light box code to 1000 links that were entered into the site already without any lightbox code. In addition, all future external links should be lightboxified automatically. Lightbox does this with images, but I'd like to do it with the iframe option.

The approaches I can think of are:
1) Hack the lightbox module to do what it does to images to the iframes
2) Add custom .js to rewrite the links similar to what was posted about adding /lightbox2 to each node link
3) Voodoo magic.

I'm close on #3, but I think #2 would be better and #1 would be the best, if done elegantly.

Thoughts?

nicostabile’s picture

Hi! to all!, I have a button done with "Button Field 6.x-1.0-beta2", this button redirects to a page ( usings triggered rules ), i want that this page when I click this button opens with lightbox2.

This is possible?, If anyone has an idea i will be very grateful!,

Best Regards,

Nicolás.

Sam Straub’s picture

Turns out there is a nifty module called external links (http://drupal.org/project/extlink) that can pop all external links into a new window. I augmented the code very simply to enable using the rel=lightframe attributes in place of target=_whatever. There was one hiccup, but I got it solved. If you are interested, look here: http://drupal.org/node/879082

Bazookatooth’s picture

<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>

I have been trying this with no results at all.

my node is linked through the view via the title. The title is "views-field-title" It's pretty simply, but i get the standard page when i click the title.

Bazookatooth’s picture

It doesn't work if the View's Style is set to "Table."

It seems to work as an HTML list. That is all i have tested.

I have a view that is a list of businesses, it has to be set up in the table style for formatting reasons. Is there a way to make this code work with Table Style?

EDIT: because it isn't a div class, it's a td class. <td class="views-field views-field-title">

amklose’s picture

Is it possible to get this to work with /node/add/... pages? I would like to put a link under my calendar that links to the node/add/event page so users can add events without leaving the calendar page. However, when I tried to do it this way, it shows the whole Add Event page including the header and sidebars. Using the instructions above, I got the page-node-lightbox2.tpl.php file working correctly, so when I visit (for example) /node/54/lightbox2, it just ouputs the page content, but that doesn't work on the node/add pages. Any way to fix this?

meshweta’s picture

I have one question that,
I have created 4 tpl.php files for views pages and added code of lightbox as given above example ' print $output; " rel="lightframe[search|width:1280px; height:768px;]" target="_blank">'. It works fine but I need download option in this lightbox, could any one helps me in this task?

Thanks a lot in advance.

beautifulmind’s picture

I want to display lighbox for node edite page with no sidebars and navigation links. Its appearing with all these links at the moment. I've added the link to open the edit page with views and I tried to hide the sidebars and links with herf="node/xxxx/edit/lightbox2" but its not working. Any help would be appreciated.

Regards.

[edit]: The link is added with custom field and not with the 'link' type

maximer’s picture

What about the user login form?
How can I open ONLY display the login form in my Lightbox without my page elements (like HEADER, SIDEBARS and FOOTER).

kaido24’s picture

Super tutorial :) I used this tutorial to get fancybox play videos on my client website :).. You can see results on http://autotransport.eu

boran’s picture

Using a path like /node/483/lightbox2 works fine, however I need the language content to be respected.

e.g. if the English node is 483 and the German node is 501, then hard linking to /node/xxx is the wrong way.

How can lightbox popup the correct translated node, depending on the language in a module window?

skclewis’s picture

This is a great module. However when I tried to use it I didn't get the results I expected. I am working on a tutoring website. A feature I want to add is to have students be able to take a quiz. I want to be able to create a number of quizzes using different formats (T&F, short answer, etc) and have them displayed in Lightbox2. I would like the quiz to show up as the only content expect for the navigation bar (which doesn't need to be there either). The effect I'd like is a quiz paper. When I followed the instructions above, I didn't get a lightbox. Instead I got directed to the quiz take page which I used in my href. Here's the code I'm using in the block I created for the quizzes:

<p>Here are some quizzes you can take to see what you know.  They are on a variety of subjects. The formats include Short Answer, Multiple Choice, and True/False.  Just select the quiz you wish to take and see how well you do.</p>
<p>
<a href="node/15/take" rel="lightframe [scrolling:auto]">Test Quiz</a>
</p>

When I click on the link I get taken to the page rather than opening a light box. I also tried the alternate solution given by iDonny which produced the same results except all formatting is eliminated. The following is the simple.tpl.php file I created:

<?php
// $Id: page-node-lightbox2.tpl.php,v 1.1.2.2 2008/06/11 22:16:38 snpower Exp $

/**
 * @file
 * Template file for displaying the node content, associated with an image, in
 * the lightbox.  It displays it without any sidebars, etc.
 */
?>
<!-- Layout -->

    <div id="wrapper">
    <div id="container" class="clear-block">


      <div id="center"><div id="squeeze"><div class="right-corner"><div class="left-corner">


<?php if ($page == 0): ?>
  <h2><a href="<?php print $node_url ?>" title="<?php print $title ?>"><?php print $title ?></a></h2>
<?php endif; ?>

    <?php print $content ?>

  <div class="clear-block clear">
    <div class="meta">
    <?php if ($taxonomy): ?>
      <div class="terms"><?php print $terms ?></div>
    <?php endif;?>
    </div>

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

</div> <!-- close container -->
</div> <!-- close wrapper -->

The test quiz is displayed but it is in the upper left corner and there is no background image or other page items. What I had expected was to have mainly the header, sidebar, and footer blocks removed so the quiz would be displayed as the only content on the page other than the menu bar.

I'm fairly new to Drupal and know enough code to make minor changes and follow what others have done. I'm still learning a lot about how Drupal works and don't know all the intricacies as yet. I'm running Drupal 6.22 for the website.

Thanks in advance for your help and advice.

marcoh182’s picture

I have a page which is opened in a lightbox. The page contains links to nodes.
When a link is pressed I would like the lightbox to be closed and the node to be openend in the browser.
Any suggestions?

dyrer’s picture

I cannot make use lightbox2 opening nodes without menus
I use D7 and lightbox2 beta1
any ideas?

aaronbauman’s picture

Has anyone done this in an iframe-free way?
Working with JS + CSS with respect to iframes is a huge PITA.
I would like to render node content in a standard lightbox.

MacaroniDuck’s picture

I'm able to get a node to display in a Lightbox in Drupal 7 utilizing Views. What I'm struggling with is getting it to display only the node information (i.e. not the full web page). I was partial to the alternative idea above proposed by iDonny, but I receive the following error: "Notice: Undefined index: format in include()............"

Is anyone successfully displaying specified node content in a Lightbox in Drupal 7? If so, how are you accomplishing it?

ahmedhanyfawzy’s picture

1) Create a new node with the desired content.
2) get the node nid by hover over the 'Edit' Link of the node.
3) Create a new page--node--nid.php.tpl and remove unnecessary content by comment all print commands for the header,footer and sidebar.
4) use the link to this node as instructed by the article.
You can see the result here : http://www.nile7.com see the links on the first and second posts.

MacaroniDuck’s picture

Ahmed, are you saying you create a new .tpl page for any node you want to display this way? That's not really translatable to other situations where people are generally dynamically displaying content.

ahmedhanyfawzy’s picture

You are right it is not transparent the new node template will always format the display of this node , but remember that you only need to do this ( create a new template ) in case you need to display the node without other regions like header,footer,sidebar ..etc , otherwise you do not need to create this special template.

Ahmed Fawzy
http://www.nile7.com
http://www.almohem.com

MacaroniDuck’s picture

I do need to display nodes without those regions. But I need it to do so dynamically. In other words, if I have an infinite number of product nodes and need each of them to display in a Lightbox, I don't want to have to create a new tpl.php file for each one. I need a way of doing this so that every node of a specific type will display the same.

ahmedhanyfawzy’s picture

You are right it is not transparent the new node template will always format the display of this node , but remember that you only need to do this ( create a new template ) in case you need to display the node without other regions like header,footer,sidebar ..etc , otherwise you do not need to create this special template.

sgurlt’s picture

How could I resize the lightbox, if I use this code?

<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>

Cant see a solution to add something like

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

Greetzz

Gastonia’s picture

Perhaps I am doing something wrong, but I cannot get ANY of these examples to work, at all. Can someone post exactly how to format the a tag for 7.10 to get content to appear in an iframe?

Rick Turner’s picture

I've been trying to get captions to appear underneath photos displayed withe Lightbox2. Neither the 'rel=lightbox[][caption text]"' or the 'rel="lightbox" title="caption text"' syntax seems to work.

I noticed that each time I display an image using lightbox2, the Apache error log receives a record like:

File does not exist: [path to web site directory]/public_html/system/lightbox2/filter-xss, referer: ...

Originally, those error messages were referring to "public_html/system" so I added the "system" directory and tried re-displaying the image. Then it griped about "lightbox2". Eventually it got to where it looked to me like some actual code or a file was not found ("filter-xss"). The referer in the log file was listed as "[sitename]/?q=node/21".

A little grepping shows that that path "system/lightbox2/filter-xss" appears in both "sites/all/modules/lightbox2/js/lightbox.js" and "sites/all/modules/lightbox2/lightbox2.module".

I tried changing the anchor tag argument fom 'rel="lightbox"' to 'rel="lightbox2"'. Again, no captions. The error messages in the Apache log still complained about not finding the "filter-xss". The referer was now shown as "[sitename]/?q=node%2F21%2Fedit&render=overlay&render=overlay".

BTW, the Apache error log messages do not seem to be directly related to my captions as they appear when displaying images where I have not specified a caption. (I seem to recall that Lightbox itself might be trying to add a default caption (image file name?).)

The only way I've been able to get the captions to display is to configure the Lightbox2 module to use "Lightbox2 Lite". (Sorry but I only tried it with the 'rel="lightbox" title="caption text"' syntax.)

The Drupal version is 7.9 and the Lightbox2 module is "7.x-1.0-beta1".

Qs: Is a newer release of the 7.x version coming out soon? Or are these error messages an indication of something not configured correctly in my installation?

makt’s picture

I'm getting the following error when I try iDonny's solution.

Notice: Undefined index: format in include() (line 2 of /../../sites/all/themes/fusion/[my-custom-theme]/page.tpl.php).

The code is:

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

with line 2 being the GET line.

The solution works perfectly besides this error message that has really been bugging me. Any help appreciated!

EDIT: Sorry this is a duplicate of http://drupal.org/node/1366788 - solution can be found on this thread.

pratip.ghosh’s picture

Hello,

I have an anchor tag like this

<a id="a_add_module_access" rel="lightframe[vid|width:1000;height:600]" href="<?php echo $GLOBALS['base_root'].'/admin/structure/product_manager/add_module_access/0'; ?>">

It works fine with the lightbox appearing perfectly.

But when I choose to open the same using JS it shows me a normal page with the content without the lightbox. The JS code :

jQuery("#a_add_module_access").attr('rel','lightframe[vid|width:1000;height:600]');
jQuery("#a_add_module_access").attr('href',"<?php echo $GLOBALS['base_root'].'/admin/structure/product_manager/add_module_access/0'; ?>");
Lightbox.initList() ;

Am I doing anything wrong?

Please help...

-- Pratip Ghosh

pratip.ghosh’s picture

Sorry guys,

Please donot bother yourselves with this issue. Actually I was adding the class also through JS which is apparently the reason for the lightbox to fail.

Thanks anyways...

However, is there any way of de-initializing an instance of the lightbox, the one we created with : Lightbox.initList() ; ??

-- Pratip Ghosh

woop_light’s picture

I'm putting article nodes in the lightbox rather than images and I'd like to make the lightbox bigger. Any suggestions for a quick, clean way to do that?

ash1010’s picture

I am using iDonny solution. But the frame still has all the page info like other blocks and the header. Can some1 show me where I am going wrong? Or an example of how they editted the simple.tpl to just show the content only?

NadiaMubashar’s picture

I used lightbox2 to load a webform when users click "Request Info" on this page: http://goo.gl/Bf2Gp. I added "lightframe" property to this link and set a width and height exactly as explained on this page. This works perfectly on Chrome (The webform loads as a lightbox). However, when using IE9, it loads as a full webpage, not a lightbox. I changed the setting from "lightframe" to "lightmodal", which seemed to work, however, it takes much longer to load, and disables the javascript features on the webform. I looked around, and haven't been able to find a solution to this problem. Any help is great!

Thanks!

OpsTao’s picture

I want to display CDN-hosted (Brightcove in my case) video from links in a View. I have one working solution for displaying such a link in Lightbox overlays. (Maybe not a very good solution but it works.) The rel=lightframe parameter is built into the Content type being displayed by the View, and each different Content item has a different video link. In the same field as the rel=lightframe are width/height numbers and a scrolling=no code. The problem is that not every video item is the same size; partly because of a mix of 4:3 and 16:9 video players, and partly because some players a multi-part video players and thus are larger to allow for the playlist display.

If I provide sizing numbers for Lightbox that are large enough to accommodate the widest & deepest instance, then there is too much empty space for the smaller video displays. And of course I don't want to have scrollbars in a space displaying a video player. >>So is there a way to vary the size of the Lightbox overlay window, according to the size of that particular content? Alternatively (as a fall-back solution), is there a way to get the video player (called up by URL) to center in the Lightbox window space?

sardbaba’s picture

There is someone who is able to use the tpl from a custom module?

erata’s picture

hi, popup video with colorbox and lightbox2 is good but when popup video we can't do anything except watching selected video. if we want watching video and making something else in site what can we do? at lynda.com there is a frame popup video and it doen not stop main site work. how can we do it with lightbox2 or colorbox or else frame popup modules?

andriyun’s picture

Very nice solution will be using modules contextphp, delta + omega theme 3.x

Contextphp condirions code:
return $_GET['format'] == 'simple';

Kristi Wachter’s picture

Here's another approach:

Create a bare-bones theme and use Themekey to use that plain theme for any pages you want to display in a Lightbox. This works for any kind of page, not just node pages.

˚ ˚ ˚ ˚ ˚
Kristi Wachter
Drupal consultant, evangelist, and enthusiast

baseball’s picture

Dear:
1.if i use www.google.com or www.yahoo.com, It can't show page in the frame.
But It can show other link in frame,where the google be blocked?
I can link to google by any browser normally.

2.i can find admin/settings/filters to disable the lightframe.
thx

3. the node/XXX will show the page(logo,menu... ) + node content
Can it show only the node content?

baseball’s picture

Dear:

IF I have a node/1,he has  <a href=" 3/lightbox2"...>  LINK to node3
1.when I in<front> page to see the node/1 show in the home artilc  list.
because, node/1 show pre text on the <front>,so I click the link , it show  no page found to link to node/3.
but, i change  <a href="node/3/lightbox2"...> ,it's OK

2.IN http://127.0.0.1/sitex/node/1 article
when I click the  <a href=" 3/lightbox2"...>,it can link to node/3
but,when i change to   <a href="3/lightbox2"...>,the  no page found.

so,how to set the  <a href="XXX 3/lightbox2"...>  to find where the page  now,and add path to link to right direct.

khairy’s picture

You are right it is not transparent the new node template will always format the display of this node , but remember that you only need to do this ( create a new template ) in case you need to display the node without other regions like header,footer,sidebar ..etc , otherwise you do not need to create this special template.
http://www.babelsoftco.com