実行時のテキスト位置の設定

C1LightBox コントロールでテキストを表示する位置を設定することによって、アプリケーションをカスタマイズできます。テキストセクションの位置またはスタイルを変更するには、単に TextPosition プロパティを以下の値のいずれかに変更します。

None - テキストは表示されません。
Inside - コンテンツコンテナ内にコンテンツと隣り合わせにキストの説明を表示します。
Outside - コンテンツコンテナの外側にテキストの説明を表示します。
Overlay - コンテンツコンテナ内にコンテンツに重ね合わせてテキストの説明を表示します。
TitleOverlay - コンテンツコンテナ内にタイトルのみ重ね合わせてテキストの説明を表示します。

この例では、実行時にテキスト位置を設定および変更する方法を示します。

以下の手順を実行します。

ソースビューで、次のように <cc1:C1LightBox> マークアップを編集します。

ソースビュー	コードのコピー
<cc1:C1LightBox ID="C1LightBox1" runat="server" Player="Img"> <Items> <cc1:C1LightBoxItem ID="LightBoxItem1" Title="Abstract1" Text="アブストラクト１" ImageUrl="http://lorempixum.com/120/90/abstract/1" LinkUrl="http://lorempixum.com/600/400/abstract/1" /> <cc1:C1LightBoxItem ID="LightBoxItem2" Title="Abstract2" Text="アブストラクト２" ImageUrl="http://lorempixum.com/120/90/abstract/2" LinkUrl="http://lorempixum.com/600/400/abstract/2" /> <cc1:C1LightBoxItem ID="C1LightBoxItem3" Title="Abstract3" Text="アブストラクト３" ImageUrl="http://lorempixum.com/120/90/abstract/3" LinkUrl="http://lorempixum.com/600/400/abstract/4" /> <cc1:C1LightBoxItem ID="C1LightBoxItem4" Title="Abstract4" Text="アブストラクト４" ImageUrl="http://lorempixum.com/120/90/abstract/4" LinkUrl="http://lorempixum.com/600/400/abstract/4" /> </Items> </cc1:C1LightBox>

ソースビュー

コードのコピー

<cc1:C1LightBox ID="C1LightBox1" runat="server" Player="Img">
  <Items>
         <cc1:C1LightBoxItem ID="LightBoxItem1" Title="Abstract1" Text="アブストラクト１"
                ImageUrl="http://lorempixum.com/120/90/abstract/1" 
                LinkUrl="http://lorempixum.com/600/400/abstract/1" />
         <cc1:C1LightBoxItem ID="LightBoxItem2" Title="Abstract2" Text="アブストラクト２"
                ImageUrl="http://lorempixum.com/120/90/abstract/2" 
                LinkUrl="http://lorempixum.com/600/400/abstract/2" />
         <cc1:C1LightBoxItem ID="C1LightBoxItem3" Title="Abstract3" Text="アブストラクト３"
                ImageUrl="http://lorempixum.com/120/90/abstract/3" 
                LinkUrl="http://lorempixum.com/600/400/abstract/4" />
         <cc1:C1LightBoxItem ID="C1LightBoxItem4" Title="Abstract4" Text="アブストラクト４"
                ImageUrl="http://lorempixum.com/120/90/abstract/4" 
                LinkUrl="http://lorempixum.com/600/400/abstract/4" />
  </Items>
</cc1:C1LightBox>

これは、ライトボックスコントロールをカスタマイズし、コントロールに画像を追加します。

以下のマークアップをライトボックスマークアップの直下に追加します。

ソースビュー	コードのコピー
<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 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>

これは、ユーザーが実行時にテキスト位置を選択できるようにドロップダウンリストを追加します。

以下のマークアップを前のマークアップの直下に追加します

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

このスクリプトは実行時にテキスト位置を設定します。

このトピックの作業結果

アプリケーションを実行し、実行時にドロップダウンボックスからテキスト位置を選択します。画像をクリックしてライトボックスに表示し、選択したテキスト位置を確認します。別のテキスト位置を選択し、画像をクリックして実行時に画像がどのように表示されるかを確認できます。