LightBox for ASP.NET Web Forms
手順 3:コントロールの外観と動作のカスタマイズ
クイックスタート > 手順 3:コントロールの外観と動作のカスタマイズ

C1LightBox の外観と動作を簡単にカスタマイズできます。次の手順では、コントロールの動作と外観を設定します。以下は、「手順 2:コントロールへのコンテンツの追加」トピックを完了していることを前提にしています。

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

  1. ソースビューで、<cc1:C1LightBox> タグを編集して、AutoPlay="True" ShowTimer="True" を追加します。
    ソースビュー
    コードのコピー
     <cc1:C1LightBox runat="server" AutoPlay="True" ShowTimer="True">
    

    コントロールが自動的に画像を繰り返し表示し、画像が次の画像に切り替わるまでの残り時間を示すプログレスバーが表示されるようになります。

  2. ソースビューで、<cc1:C1LightBox> タグを編集して、Loop="False" SlideDirection="Vertical" を追加します。
    ソースビュー
    コードのコピー
     <cc1:C1LightBox runat="server" AutoPlay="True" ShowTimer="True" Loop="False" SlideDirection="Vertical"">
    

    コントロールは画像をループしなくなり、一連の最後の画像が表示された後に最初の画像に戻らなくなります。画像は垂直方向(水平方向ではなく)に遷移するようにもなります。

  3. ソースビューで、<cc1:C1LightBox> タグを編集して、TextPosition="Outside" ControlsPosition="Outside" を追加します。
    ソースビュー
    コードのコピー
     <cc1:C1LightBox runat="server" AutoPlay="True" ShowTimer="True" Loop="False" SlideDirection="Vertical" TextPosition="Outside" ControlsPosition="Outside">
    

    コントロールのナビゲーションコントロールと画像のキャプションテキストが、オーバーレイではなく画像の外側に表示されるようになります。

  4. ソースビューで、<cc1:C1LightBox> タグを編集して、TextPosition="Outside" ControlsPosition="Outside" を追加します。
    ソースビュー
    コードのコピー
     <cc1:C1LightBox runat="server" AutoPlay="True" ShowTimer="True" Loop="False" SlideDirection="Vertical" TextPosition="Outside" ControlsPosition="Outside">
    

    コントロールのナビゲーションコントロールと画像のキャプションテキストが、オーバーレイではなく画像の外側に表示されるようになります。

  5. ソースビューで、<cc1:C1LightBox> タグを編集して、KeyNav="True" を追加します。
    ソースビュー
    コードのコピー
     <cc1:C1LightBox runat="server" AutoPlay="True" ShowTimer="True" Loop="False" SlideDirection="Vertical" TextPosition="Outside" ControlsPosition="Outside" KeyNav="True">
    

    キーボードによるナビゲーションがコントロールで有効になっています。実行時に矢印キーを押して画像を移動できます。

  6. アプリケーションを実行して、コントロールに変更内容が表示されることを確認します。

    タイマープログレスバーは、画像が自動再生されると変更されるコントロールの上に表示されます。テキストとコントロールは画像の外側に表示されます。

  7. 画像の再生が完了したら、キーボードの左向き矢印ボタンを押して画像をナビゲートします。

    この手順では、コントロールの外観と動作をカスタマイズしました。おめでとうございます。このクイックスタートは完了しました。

関連トピック