You can customize your application by setting where text is displayed in the C1LightBox control. To change the position or style of the text section, you would simply change the TextPosition property to one of the following values:

• None - No text is displayed.
• Inside - Displays the text description inside the content container, side by side with the content.
• Outside - Displays the text description outside the content container.
• Overlay - Displays the text description inside the content container overlaying the content.
• TitleOverlay - Displays the text description inside the content container overlaying the title only.

This example will show you how to set and change the text position at run time.

Complete the following steps:

1. In Source view, edit the <cc1:C1LightBox> markup so it appears like the following:

   <cc1:C1LightBox ID="C1LightBox1" runat="server" Player="Img">
   <Items>
           <cc1:C1LightBoxItem ID="LightBoxItem1" Title="Abstract1" Text="Abstract1"
                 ImageUrl="http://lorempixum.com/120/90/abstract/1"
                 LinkUrl="http://lorempixum.com/600/400/abstract/1" />
           <cc1:C1LightBoxItem ID="LightBoxItem2" Title="Abstract2" Text="Abstract2"
                 ImageUrl="http://lorempixum.com/120/90/abstract/2"
                 LinkUrl="http://lorempixum.com/600/400/abstract/2" />
           <cc1:C1LightBoxItem ID="C1LightBoxItem3" Title="Abstract3" Text="Abstract3"
                 ImageUrl="http://lorempixum.com/120/90/abstract/3"
                 LinkUrl="http://lorempixum.com/600/400/abstract/3" />
           <cc1:C1LightBoxItem ID="C1LightBoxItem4" Title="Abstract4" Text="Abstract4"
                 ImageUrl="http://lorempixum.com/120/90/abstract/4"
                 LinkUrl="http://lorempixum.com/600/400/abstract/4" />
   </Items>
   </cc1:C1LightBox>
   

   This customizes the lightbox control and adds images to the control.

2. Add the following markup just below the lightbox markup:

   <div class="demo-options">
   <!-- Begin options markup -->
   <h6>
           Text Position:</h6>
                 <select id="textposition">
                        <option value="inside" selected='true'>inside</option>
                        <option value="outside">outside</option>
                        <option value="overlay">overlay</option>
                        <option value="titleOverlay">titleOverlay</option>
                        <option value="none">none</option>
                 </select>
   <!-- End options markup -->
   </div>
   

   This adds a drop-down list that will allow users to select the text position at run time.

3. Add the following markup just below the previous markup:

   <script type="text/javascript">
   $(function () {
           $('#textposition').change(function () {
                 $("#<%=C1LightBox1.ClientID%>").c1lightbox('option', 'textPosition', $(this).val());
           });
   });
   </script>
   

   This script sets the text position at run time.

What You've Accomplished

Run the application and at run time choose the text position from the drop-down box. Click on an image to view it in the lightbox and view the text position you selected. You can choose another text position and click on an image to view how it appears at run time.