Adding content to the C1LightBox control is very simple and can be done in a variety of ways. In this step, you'll link to images using the ImageUrl property. The following steps assume you've completed Step 1 of 3: Adding C1LightBox to the Page topic and added a C1LightBox control to the page.

Complete the following steps to add content to the C1LightBox control:

1. In Source view, place your mouse between the <cc1:C1LightBox></cc1:C1LightBox> tags, and add the following markup to add items to the control:

   <Items></Items>
   

2. Place your mouse between the <Items></Items> tags, and add the following markup to add several C1LightBoxItems to the control:

   <cc1:C1LightBoxItem ID="C1LightBoxItem1" Title="Sport1" Text="Sport1" 
   ImageUrl="http://lorempixum.com/120/90/sports/1" LinkUrl="http://lorempixum.com/600/400/sports/1" />
   <cc1:C1LightBoxItem ID="C1LightBoxItem2" Title="Sport2" Text="Sport2" 
   ImageUrl="http://lorempixum.com/120/90/sports/2" LinkUrl="http://lorempixum.com/600/400/sports/2" />
   <cc1:C1LightBoxItem ID="C1LightBoxItem3" Title="Sport3" Text="Sport3" 
   ImageUrl="http://lorempixum.com/120/90/sports/3" LinkUrl="http://lorempixum.com/600/400/sports/3" />
   <cc1:C1LightBoxItem ID="C1LightBoxItem4" Title="Sport4" Text="Sport4" 
   ImageUrl="http://lorempixum.com/120/90/sports/4" LinkUrl="http://lorempixum.com/600/400/sports/4" />
   

   Note that you set the following properties for each C1LightBoxItem:

   • ID: The unique identifier.
   • Title: Title of the image.
   • Text: Text of the image.
   • ImageUrl: Image URL of the image.
   • LinkURL: Link URL of the image.

3. Run your application, and observe that the page now looks similar to the following image:

   

4. Click on an image and notice that the image appears larger. If you hover your mouse above the image, controls appear allowing you to navigate through the image set:

   

In this step you added content to C1LightBox control. In the next step you'll customize the appearance and behavior of the control.