C1Gallery コントロールに遷移アニメーション効果を追加することによって、アプリケーションをカスタマイズできます。これらのアニメーションは、ギャラリー画像を移動する際に、ある画像が次の画像に遷移するときに表示されます。この例では、実行時にこれらのアニメーション効果を設定および変更する方法を示します。
以下の手順を実行します。
- ソースビューで、次のように
<cc1:C1Gallery>マークアップを編集します。ソースビュー コードのコピー<cc1:C1Gallery ID="C1Gallery1" runat="server" ShowTimer="True" Width="750px" Height="256px" ThumbnailOrientation="Vertical" ThumbsDisplay="3" ShowPager="false"> <Transitions> <Animated Disabled="false" Effect="slide" /> </Transitions>
<Items>
<cc1:C1GalleryItem LinkUrl="http://lorempixum.com/750/300/sports/1" ImageUrl="http://lorempixum.com/200/150/sports/1" />
<cc1:C1GalleryItem LinkUrl="http://lorempixum.com/750/300/sports/2" ImageUrl="http://lorempixum.com/200/150/sports/2" />
<cc1:C1GalleryItem LinkUrl="http://lorempixum.com/750/300/sports/3" ImageUrl="http://lorempixum.com/200/150/sports/3" />
<cc1:C1GalleryItem LinkUrl="http://lorempixum.com/750/300/sports/4" ImageUrl="http://lorempixum.com/200/150/sports/4" />
<cc1:C1GalleryItem LinkUrl="http://lorempixum.com/750/300/sports/5" ImageUrl="http://lorempixum.com/200/150/sports/5" />
<cc1:C1GalleryItem LinkUrl="http://lorempixum.com/750/300/sports/6" ImageUrl="http://lorempixum.com/200/150/sports/6" />
</Items>
</cc1:C1Gallery>これは、ギャラリーコントロールをカスタマイズし、コントロールに画像を追加します。
- 以下のマークアップをギャラリーマークアップの直下に追加します。
ソースビュー コードのコピー<label for="showingEffectTypes"> アニメーション</label>
<asp:DropDownList ID="showEffectTypes" runat="server">
<asp:ListItem Value="blind" Selected="True">Blind</asp:ListItem>
<asp:ListItem Value="clip">Clip</asp:ListItem>
<asp:ListItem Value="drop">Drop</asp:ListItem>
<asp:ListItem Value="explode">Explode</asp:ListItem>
<asp:ListItem Value="fade">Fade</asp:ListItem>
<asp:ListItem Value="fold">Fold</asp:ListItem>
<asp:ListItem Value="highlight">Highlight</asp:ListItem>
<asp:ListItem Value="puff">Puff</asp:ListItem>
<asp:ListItem Value="pulsate">Pulsate</asp:ListItem>
<asp:ListItem Value="scale">Scale</asp:ListItem>
<asp:ListItem Value="size">Size</asp:ListItem>
<asp:ListItem Value="slide">Slide</asp:ListItem>
</asp:DropDownList>これは、アニメーション遷移効果のタイプを指定するドロップダウンリストを追加します。
- 以下のマークアップを前のマークアップの直下に追加します。
ソースビュー コードのコピー<script type="text/javascript">
$(document).ready(function () {
var transitions = {
animated: "fade",
duration: 1000,
easing: null
}
$('#<%=showEffectTypes.ClientID%>').change(function () {
var ee = $("#<%=showEffectTypes.ClientID%> option:selected").val();
$.extend(transitions, { animated: ee });
$("#<%=C1Gallery1.ClientID%>").c1gallery("option", "transitions", transitions);
});
});
</script>
このスクリプトは実行時にアニメーション効果を設定します。
このトピックの作業結果
アプリケーションを実行し、実行時にドロップダウンボックスからアニメーション効果を選択します。ギャラリーで〈前へ〉または〈次へ〉ボタンをクリックして、選択した遷移アニメーション効果を表示します。別の効果を選択して、ギャラリーで画像を移動する際にどのように表示されるかを確認できます。
関連トピック