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 behaviour - 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.
Alternative solution
(Suggested by iDonny)
If the said bare-bones page template is simple.tpl.php (similar to page-node-lightbox2.tpl.php above), then adding the following at the top of your generic page.tpl.php will load nodes and any Drupal content without side navigation, etc, in the lightbox:
<?php
if ($_GET["format"] == "simple") {
include ('simple.tpl.php');
return;
}
?>Triggered by URLs of the format node/xx?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);
}
function mytheme_preprocess_page?
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.
Same question
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.
Re: Same question
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
Thanks Manu
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
I use Lightbox2 to display
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.
Using Lightbox with a Google Checkout Button
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.
----------
Moving in southeast Michigan? Buy my house: http://ubasics.com/house/
Interested in electronics? Check out the projects at http://ubasics.com
Building your own house? Check out http://ubasics.com/home/
how do I make the frame open w/o a click?
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!
Use Jquery
//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');