ライトボックスでのテキスト位置の設定

wijlightbox ウィジェットにキャプションテキストを取り込み、テキストの位置と表示をカスタマイズできます。たとえば、ライトボックス画像の内側、外側、または画像に重ねてテキストを表示できます。あるいは、テキストをまったく表示しないようにできます。

実行時にテキストの位置を選択するには、以下の手順を実行します。

ASP.NET MVC 4 Wijmo アプリケーションを作成します。
ソリューションエクスプローラに移動して、Views フォルダ内の Shared フォルダを展開し、_Layout をダブルクリックしてファイルを開きます。

以下のマークアップを、@RenderBody() のすぐ後のページの >body< タグ内に追加します。

ソースビュー	コードのコピー
<div id="lightbox"> <a href="http://lorempixum.com/600/400/abstract/1" rel="wijlightbox[stock];player=img"> <img src="http://lorempixum.com/150/125/abstract/1" title="抜粋１" alt="抜粋１" /></a> <a href="http://lorempixum.com/600/400/abstract/2" rel="wijlightbox[stock];player=img"> <img src="http://lorempixum.com/150/125/abstract/2" title="抜粋２" alt="抜粋２" /></a> <a href="http://lorempixum.com/600/400/abstract/3" rel="wijlightbox[stock];player=img"> <img src="http://lorempixum.com/150/125/abstract/3" title="抜粋３" alt="抜粋３" /></a> <a href="http://lorempixum.com/600/400/abstract/4" rel="wijlightbox[stock];player=img"> <img src="http://lorempixum.com/150/125/abstract/4" title="抜粋４" alt="抜粋４" /></a> </div> <div class="demo-options"> <h6>テキスト位置：</h6> <select id="textposition"> <option value="inside" selected='true'>inside</option> <option value="outside">outside</option> <option value="overlay">overlay</option> <option value="titleOverlay">titleOverlay</option> <option value="none">none</option> </select> </div>

ソースビュー

コードのコピー

<div id="lightbox">
<a href="http://lorempixum.com/600/400/abstract/1" rel="wijlightbox[stock];player=img">
<img src="http://lorempixum.com/150/125/abstract/1" title="抜粋１" alt="抜粋１" /></a>
<a href="http://lorempixum.com/600/400/abstract/2" rel="wijlightbox[stock];player=img">
<img src="http://lorempixum.com/150/125/abstract/2" title="抜粋２" alt="抜粋２" /></a>
<a href="http://lorempixum.com/600/400/abstract/3" rel="wijlightbox[stock];player=img">
<img src="http://lorempixum.com/150/125/abstract/3" title="抜粋３" alt="抜粋３" /></a>
<a href="http://lorempixum.com/600/400/abstract/4" rel="wijlightbox[stock];player=img">
<img src="http://lorempixum.com/150/125/abstract/4" title="抜粋４" alt="抜粋４" /></a>
</div>
<div class="demo-options">
<h6>テキスト位置：</h6>
<select id="textposition">
<option value="inside" selected='true'>inside</option>
<option value="outside">outside</option>
<option value="overlay">overlay</option>
<option value="titleOverlay">titleOverlay</option>
<option value="none">none</option>
</select>
</div>

このマークアップは、４種類の画像を含む１つのライトボックスウィジェットをページに追加すると共に、実行時にテキスト位置を選択できるようにドロップダウンリストボックスを追加します。次の手順では、ライトボックスを初期化します。

前の手順で追加した >/div< 終了タグの後に、以下の jQuery スクリプトを入力して wijlightbox ウィジェットを初期化します。

ソースビュー	コードのコピー
<script type="text/javascript"> $(function () { $("#lightbox").wijlightbox(); $('#textposition').change(function () { $("#lightbox").wijlightbox('option', 'textPosition', $(this).val()); }); }); </script>

ソースビュー

コードのコピー

<script type="text/javascript">
$(function () {
$("#lightbox").wijlightbox();
$('#textposition').change(function () {
$("#lightbox").wijlightbox('option', 'textPosition', $(this).val());
});
});
</script>

上記のスクリプトはライトボックスを初期化します。

このトピックの作業結果

［F5］を押してアプリケーションを実行し、サムネイル画像をクリックしてフルサイズの画像を表示します。テキストが画像内に表示されることを確認します。テキストのドロップダウンボックスから別のオプションを選択してサムネイル画像をクリックし、テキストがどこに表示される位置を確認します。