キーボードによるナビゲーションを有効にして、wijlightbox ウィジェットのアクセシビリティを向上させることができます。キーボードによるナビゲーションは keyNav オプションを使用して有効にできます。
キーボードによるナビゲーションを有効にするには、以下の手順を実行します。
- ASP.NET MVC 5 Wijmo アプリケーション を作成します。
- ソリューションエクスプローラに移動して、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="草原" alt="背景に乗用車がある草原" /></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="山" alt="山と曇った青空" /></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="橋" alt="山のある橋" /></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="建物" alt="面白い建築様式の建物" /></a> </div>
このマークアップは、４種類の画像を含む１つのライトボックスウィジェットをページに追加します。次の手順では、ライトボックスを初期化します。
- 前の手順で追加した
</div>終了タグの後に、以下の jQuery スクリプトを入力して wijlightbox ウィジェットを初期化します。ソースビュー コードのコピー<script type="text/javascript"> $(function () { $("#lightbox").wijlightbox({ textPosition:'titleOverlay', keyNav:true }).focus(); }); </script> </head>上記のスクリプトはライトボックスを初期化し、キーボードによるナビゲーションを有効にします。
このトピックの作業結果
［F5］を押してアプリケーションを実行し、サムネイル画像をクリックしてフルサイズの画像を表示します。左、右、上、下矢印キーおよび［Home］、［次へ］キーをクリックして画像をナビゲートします。