この手順では、最初にビューを設定します。コンテンツをライトボックスに追加します。
 |
注意: この手順では、MVC ツールバープロジェクトを作成済みであることを前提にしています。詳細については、「MVC Classic プロジェクトの作成」トピックを参照してください。 |
以下の手順を実行します。
- ソリューションエクスプローラに移動して、Views フォルダ内の Shared フォルダを展開し、_Layout をダブルクリックしてファイルを開きます。
- 以下のマークアップを、
@RenderBody()のすぐ後のページの<body>タグ内に追加します。ソースビュー コードのコピー<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>このマークアップはライトボックスのコンテンツをページに追加します。
この手順では、ビューを作成しました。次の手順 「手順 2：ウィジェットの初期化」 では、ウィジェットを初期化するスクリプトを追加します。