MVC Classic ウィジェット > Wijlightbox > Wijlightbox チュートリアル > 手順 1:ビューの設定 |
この手順では、最初にビューを設定します。コンテンツをライトボックスに追加します。
注意: この手順では、MVC Classicバープロジェクトを作成済みであることを前提にしています。詳細については、「MVC Classic プロジェクトの作成」トピックを参照してください。 |
以下の手順を実行します。
@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:ウィジェットの初期化」では、ウィジェットを初期化するスクリプトを追加します。