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:
<Items></Items>
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:
Run your application, and observe that the page now looks similar to the following image:
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.