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>
Help improve this page
You can:
- Log in, click Edit, and edit this page
- Log in, click Discuss, update the Page status value, and suggest an improvement
- Log in and create a Documentation issue with your suggestion