ライトボックスのコンテンツの自動サイズ変更

C1LightBox コントロールは、コンテンツ画像の幅と高さに応じて自動的にサイズ変更できます。これによって、画像を正しい幅／高さの比率で表示できます。 AutoSize プロパティを True に設定することで、自動サイズ変更を有効にできます。

ResizeAnimation プロパティは、コンテナのサイズが変更されたときのアニメーション効果を指定します。 ResizeAnimation.Animated プロパティは、以下の値をサポートします。

None - アニメーションなし。
Wh - 高さの前に幅をサイズ変更します。
Hw - 幅の前に高さをサイズ変更します。
Sync - 幅と高さを同時にサイズ変更します。

自動サイズ変更機能は、画像コンテンツでのみ機能することに注意してください。

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

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

ソースビュー	コードのコピー
<cc1:C1LightBox ID="C1LightBox1" runat="server" Player="Img" TextPosition="TitleOverlay" AutoSize="true" KeyNav="true"> <Items> <cc1:C1LightBoxItem ID="LightBoxItem1" Title="Sport1" Text="スポーツ１" ImageUrl="http://lorempixum.com/120/90/sports/1" LinkUrl="http://lorempixum.com/600/400/sports/1" /> <cc1:C1LightBoxItem ID="LightBoxItem2" Title="Sport2" Text="スポーツ２" ImageUrl="http://lorempixum.com/120/90/sports/2" LinkUrl="http://lorempixum.com/800/400/sports/2" /> <cc1:C1LightBoxItem ID="C1LightBoxItem3" Title="Sport3" Text="スポーツ３" ImageUrl="http://lorempixum.com/120/90/sports/3" LinkUrl="http://lorempixum.com/300/400/sports/3" /> <cc1:C1LightBoxItem ID="C1LightBoxItem4" Title="Sport4" Text="スポーツ４" ImageUrl="http://lorempixum.com/120/90/sports/4" LinkUrl="http://lorempixum.com/600/300/sports/4" /> </Items> </cc1:C1LightBox>

ソースビュー

コードのコピー

<cc1:C1LightBox ID="C1LightBox1" runat="server" Player="Img" TextPosition="TitleOverlay" AutoSize="true" KeyNav="true">
  <Items>
         <cc1:C1LightBoxItem ID="LightBoxItem1" Title="Sport1" Text="スポーツ１" 
                ImageUrl="http://lorempixum.com/120/90/sports/1" 
                LinkUrl="http://lorempixum.com/600/400/sports/1" />
         <cc1:C1LightBoxItem ID="LightBoxItem2" Title="Sport2" Text="スポーツ２" 
                ImageUrl="http://lorempixum.com/120/90/sports/2" 
                LinkUrl="http://lorempixum.com/800/400/sports/2" />
         <cc1:C1LightBoxItem ID="C1LightBoxItem3" Title="Sport3" Text="スポーツ３" 
                ImageUrl="http://lorempixum.com/120/90/sports/3" 
                LinkUrl="http://lorempixum.com/300/400/sports/3" />
         <cc1:C1LightBoxItem ID="C1LightBoxItem4" Title="Sport4" Text="スポーツ４" 
                ImageUrl="http://lorempixum.com/120/90/sports/4" 
                LinkUrl="http://lorempixum.com/600/300/sports/4" />
  </Items>
</cc1:C1LightBox>

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

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

ソースビュー	コードのコピー
<label>アニメーション</label> <select id="animation" class='option'> <option value="sync" selected='true'>sync</option> <option value="wh">wh</option> <option value="hw">hw</option> <option value="none">none</option> </select>

ソースビュー

コードのコピー

<label>アニメーション</label>
<select id="animation" class='option'>
  <option value="sync" selected='true'>sync</option>
  <option value="wh">wh</option>
  <option value="hw">hw</option>
  <option value="none">none</option>
</select>

これは、アニメーション効果のタイプを指定するドロップダウンリストを追加します。

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

ソースビュー	コードのコピー
<script type="text/javascript"> $(function () { $('.option').change(function () { $("#<%=C1LightBox1.ClientID%>").wijlightbox('option', { resizeAnimation: { animated: $('#animation').val() } }); }); }); </script>

ソースビュー

コードのコピー

<script type="text/javascript">
  $(function () {
         $('.option').change(function () {
                $("#<%=C1LightBox1.ClientID%>").wijlightbox('option', {
                       resizeAnimation: { animated: $('#animation').val() }
                });
         });
  });
  </script>

このスクリプトは実行時にアニメーション効果を設定します。

このトピックの作業結果

アプリケーションを実行し、実行時にドロップダウンボックスからアニメーション効果を選択します。サムネイル画像をクリックしてライトボックスに画像を表示します。ライトボックスで〈前へ〉または〈次へ〉ボタンをクリックして、選択した遷移アニメーション効果を表示します。別の効果を選択して、ライトボックスで画像を移動する際にどのように表示されるかを確認できます。