wijlightbox Step 1 of 3: Setting up the View

In this step, you'll begin by setting up the view. You'll add content to the lightbox.

Note: This step assumes that you have created a MVC Tools project. See the Creating an MVC Tools Project topicfor more information.

Complete the following steps:

Navigate to the Solution Explorer, expand the Shared folder inside the Views folder, and double-click _Layout to open the file.

Add the following markup within the <body> tags of the page, just after @RenderBody():

<div id="lightbox">
    <a href="http://lorempixum.com/600/400/sports/1" rel="wijlightbox[stock];player=img">
    <img src="http://lorempixum.com/150/125/sports/1" title="Sports 1" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit." /></a>
    <a href="http://lorempixum.com/600/400/sports/2" rel="wijlightbox[stock];player=img">
    <img src="http://lorempixum.com/150/125/sports/2" title="Sports 2" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit." /></a>
    <a href="http://lorempixum.com/600/400/sports/3" rel="wijlightbox[stock];player=img">
    <img src="http://lorempixum.com/150/125/sports/3" title="Sports 3" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit." /></a>
    <a href="http://lorempixum.com/600/400/sports/4" rel="wijlightbox[stock];player=img">
    <img src="http://lorempixum.com/150/125/sports/4" title="Sports 4" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. " /></a>
</div>

This markup will add the lightbox content to the page.

In this step, you created the View. In the next step, wijlightbox Step 2 of 3: Initializing the Widget, you'll add script to initialize the widget.