Present additional HTML content in a lightbox

Composite.Web.Html.Lightbox allows you to display HTML content in a lightbox popup when the user clicks its teaser on a page.

How to implement

  1. Edit a page.
  2. Insert the Composite.Web.Html.Lightbox function ( Insert | Function) or add the following code: 
     
<f:function name="Composite.Web.Html.Lightbox" xmlns:f="http://www.composite.net/ns/function/1.0"> 
  <f:param name="LightboxTeaser" value="&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;&#xD;   &lt;head&gt;&lt;/head&gt;&#xD;   &lt;body&gt;&#xD;     &lt;p&gt;(teaser )&lt;/p&gt;&#xD;   &lt;/body&gt;&#xD; &lt;/html&gt;" /> 
  <f:param name="LightboxContent" value="&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;&#xD;   &lt;head&gt;&lt;/head&gt;&#xD;   &lt;body&gt;&#xD;     &lt;p&gt;(content)&lt;/p&gt;&#xD;   &lt;/body&gt;&#xD; &lt;/html&gt;" /> 
  <f:param name="ContentWidth" value="500" /> 
  <f:param name="ContentHeight" value="400" /> 
</f:function>
  3. Specify these required parameters address:
    • Lightbox Teaser: Content for the teaser the user clicks to open the HTML lightbox
    • Lightbox Content: Content for the HTML lightbox
  4. Specify the optional parameters if necessary:
    • Content Width: The width of the HTML lightbox. Default is 500.
    • Content Height: The height of the HTML lightbox. Default is 400.

Requirements

Composite C1 version 2.1.1 or later

SHARE