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>Opening node content in a lightbox
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.
Open contact page body only
Looking at the last example, i see that it "will only work with node links" - is there a way to make this work for contact page forms too?
Possibly, advcontact pages as well?
Use alternative template file
My solution to remove the navigation and other side items when loading nodes into lightbox is to copy the current theme page.tpl.php, strip-out the unnecessary headers and other content around the page to just leave only what you want to display in the lightbox, and then trigger that template to be loaded by a querystring that will be added to URLs:
If the said bare-bones page template is simple.tpl.php,t hen 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:
if ($_GET["format"] == "simple") {include ('simple.tpl.php');return;}
Triggered by URLs of the format node/xx?format=simple
Let me know if you need custom instructions
-----
iDonny Productions: Drupal CMS Implementation, Theme UI/UX Design & Development, and Web Standards
Some More details on HTML
Just loaded up Lightbox and loved what it did for images. I have a block that gets two items from a view and CCK. A band next event. I have the venue listed and I wanted to make that a lightbox type popup rather than opening in a new page. After searching around a bit, seeing how someone did soemthing like it with Thickbox, I came up with a very simple method. I thought I pass this on.
In the view edit page, open up the header for the block/page and add this.
<script>$(document).ready(function() {
$(".views-field-field-beventvenue-nid > .field-content > a").each(function() {
$(this).attr("href", $(this).attr("href") + "?format=svenue");
$(this).attr("rel", "lightframe");
});
Lightbox.initList() ;
});
</script>
Make sure you allow Full HTML, and save the changes. The ?format=svenue is along the lines of what iDonny did. Next I made the changes to page.tpl.node.
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.
I could have used the /lightbox2 at the end of the URL, but it also keeps a good amount of theme header information and some menus that was just getting in the way.
I have a bit more work to do. If the venue information has a link on it, like from the location module, then that tries open in the iframe that is not sized right at this point, and you may not have scroll bars. I quickly hacked it up with a target=_parent. The problem is that target sould no longer be used. I'll have to make my "simple" view output some JS to correctly handle any links imbedded in the frame.
Please see #284840: Contact
Please see #284840: Contact form in lightbox?