MVC5 Classic
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 an MVC Classic project. See the Creating an MVC Classic Project topicfor more information.

Complete the following steps:

  1. Navigate to the Solution Explorer, expand the Shared folder inside the Views folder, and double-click _Layout to open the file.
  2. 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.

 

 


Copyright (c) GrapeCity, inc. All rights reserved.

Product Support Forum |  Documentation Feedback