Lightbox2 - How to add inline content
It's possible to show HTML snippets in the lightbox as long as they are on the same domain. In this case the rel attribute should be set to lightmodal. Again it's possible to group the content, (e.g. lightmodal[search]) but in addition to that, it's possible to control some of the inline / modal properties. It's possible to set the 'width', 'height' and 'scrolling' properties of the inline content. The properties are separated from the group name by a |, for example lightmodal[search|width:100px;] and lightmodal[search|width:100px;][my caption]. If no grouping is being used, then the | is still used and the format would be lightmodal[|width:100px;]. The properties should all be of the format "property: value;" - note the closing semi-colon. If no properties are set, then the default width and height of 400px will be used. See below for more detailed examples.
Basic example:
<a href="search.php" rel="lightmodal">Search</a>Basic example with caption:
<a href="search.php" rel="lightmodal[][my caption]">Search</a>Grouped example:
<a href="search.php" rel="lightmodal[search]">Search</a>
<a href="search.php?status=1" rel="lightmodal[search][published]">Search published content</a>Controlling modal property example:
<a href="search.php" rel="lightmodal[|width:400px; height:300px; scrolling: auto;]">Search</a>Controlling modal property when grouped example:
<a href="search.php" rel="lightmodal[search|width:400px; height:300px; scrolling: auto;]">Search</a>
<a href="search.php?status=1" rel="lightmodal[search|width:400px; height:300px;][Search published]">Search published content</a>
<a href="search.php?status=0" rel="lightmodal[search|width:400px; height:300px;][Search Unpublished]">Search unpublished content</a>
Hi, for me all the code with
Hi,
for me all the code with brackets doesnt work.
Example:
rel="lightbox[gruppennamen]" title="Bildunterschrift1" >>>works
rel="lightbox[roadtrip][caption 2]" >>>>doenst work.
Thats the same for all lightbox commands.
Modify for Ajaxing Nodes using rel="lightmodal"
Stella,
Just set up a page to explain how to lightbox nodes with the lightmodal function. The technique just adds an id to the node.tpl around the $content div then uses the jQuery .load(src + " #myDivId"); to grab only that content. Works great but took a few sites to figure it out.
Full example:
http://www.erikhedin.com/web-design/drupal-tips/Easy-Ajax-Nodes-Lightbox...