実行時の遷移アニメーションの変更

C1LightBox コントロールに遷移アニメーション効果を追加することによって、アプリケーションをカスタマイズできます。これらのアニメーションは、ライトボックス画像を移動するに際に、ある画像が次の画像に遷移するときに表示されます。以下の値を使用して TransAnimation.Animated プロパティを設定することで、アニメーションスタイルを変更できます。

None - アニメーションなし。
Slide - スライドアニメーション。
Fade - フェードアニメーション。

TransAnimation.Easing は、アニメーションのイージングスタイルを指定します。 TransAnimation.Easing は、アニメーションのタイムスパンを設定します。スライドアニメーションでは、SlideDirection プロパティを Horizontal または Vertical に設定することで、スライドの向きを変更することもできます。

この例では、実行時にこれらのアニメーション効果を設定および変更する方法を示します。

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

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

ソースビュー	コードのコピー
<cc1:C1LightBox ID="C1LightBox1" runat="server" Player="Img" TextPosition="TitleOverlay" > <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" TextPosition="TitleOverlay" >
  <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"> <!-- オプションマークアップの開始 --> <label>Animation</label><select id="animation" class='option'> <option value="fade" selected='true'>fade</option> <option value="slide">slide</option> <option value="none">none</option> </select> <label>スライドの向き</label><select id="direction" class='option'> <option value="horizontal" selected='true'>horizontal</option> <option value="vertical">vertical</option> </select> <!-- オプションマークアップの終了 --> </div>

ソースビュー

コードのコピー

<div class="demo-options">
<!-- オプションマークアップの開始 -->
  <label>Animation</label><select id="animation" class='option'>
                       <option value="fade" selected='true'>fade</option>
                       <option value="slide">slide</option>
                       <option value="none">none</option>
                </select>                   
  <label>スライドの向き</label><select id="direction" class='option'>
                       <option value="horizontal" selected='true'>horizontal</option>
                       <option value="vertical">vertical</option>
                </select>
<!-- オプションマークアップの終了 -->
</div>

これは、２つのドロップダウンリストを追加します。１つはアニメーション遷移効果を指定し、もう１つはスライドの向きを指定します。

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

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

ソースビュー

コードのコピー

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

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

このトピックの作業結果

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