ImageGallery - Animations

  • 10sunflower
  • 12ladybug
  • 14pine
  • 15shells
  • 1wheat
  • 2corn
  • 3growth2
  • 4pumpkin
  • 5dandelion
  • 6leaves
  • 7cones
  • 8water
  • 8watermelon
  • 9hazelnut
Main Image
Item 1 of 14
 

Demo Configurator

  • Prev animation
    Random
  • Prev easing
    Random
  • Next animation
    Random
  • Next easing
    Random
Animations timespan
1.5s
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB
The current ASP.NET Image Gallery example demonstrates the different animations and easing types which provide a great user experience when changing images. From the drop downs in the configurator you can select an animation used for navigation to the next or previous image. Additionally you can set a timespan which controls the time for which the animation will be performed.
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="c#" Inherits="Telerik.ImageGalleryExamples.Functionality.Animations.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <style type="text/css">
        .InfoTable td {
            padding-left: 20px;
            border-spacing: 0;
        }

        .demo-container {
            width: 900px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadAjaxManager runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ConfiguratorPanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="ConfiguratorPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="RadImageGallery1" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server"></telerik:RadAjaxLoadingPanel>
    <div class="demo-container">
        <telerik:RadImageGallery RenderMode="Lightweight" ID="RadImageGallery1" Width="900px" ImagesFolderPath="Images" runat="server" Height="450px">
            <ClientSettings>
                <AnimationSettings>
                    <NextImagesAnimation Type="Random" Easing="Random" Speed="1500" />
                    <PrevImagesAnimation Type="Random" Easing="Random" Speed="1500" />
                </AnimationSettings>
            </ClientSettings>
            <ThumbnailsAreaSettings Position="Left" Width="100px" ScrollOrientation="Vertical" />
            <ImageAreaSettings ShowDescriptionBox="false" NavigationMode="Zone" Height="100%" />
        </telerik:RadImageGallery>
    </div>
    <qsf:ConfiguratorPanel ID="ConfiguratorPanel1" runat="server">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li>Prev animation
                            <qsf:DropDownList ID="PrevAnimationsList" AutoPostBack="true" OnSelectedIndexChanged="Animation_SelectedIndexChanged" runat="server">
                            </qsf:DropDownList>
                        </li>
                        <li>Prev easing
                            <qsf:DropDownList ID="PrevEasingList" runat="server" DropDownHeight="160px" AutoPostBack="true" OnSelectedIndexChanged="PrevEasingList_SelectedIndexChanged">
                            </qsf:DropDownList>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li>Next animation
                            <qsf:DropDownList ID="NextAnimationsList" AutoPostBack="true" OnSelectedIndexChanged="Animation_SelectedIndexChanged" runat="server">
                            </qsf:DropDownList>
                        </li>
                        <li class="fb-group">Next easing
                            <qsf:DropDownList ID="NextEasingList" runat="server" DropDownHeight="160px" AutoPostBack="true" OnSelectedIndexChanged="PrevEasingList_SelectedIndexChanged">
                            </qsf:DropDownList>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn runat="server" Size="Medium">
                    Animations timespan
                    <qsf:DropDownList ID="TimesList" runat="server" AutoPostBack="true" OnSelectedIndexChanged="TimesList_SelectedIndexChanged">
                        <Items>
                            <telerik:DropDownListItem Text="1.5s" Value="1500" />
                            <telerik:DropDownListItem Text="2s" Value="2000" />
                            <telerik:DropDownListItem Text="2.5s" Value="2500" />
                            <telerik:DropDownListItem Text="3s" Value="3000" />
                            <telerik:DropDownListItem Text="3.5s" Value="3000" />
                        </Items>
                    </qsf:DropDownList>
                </qsf:ConfiguratorColumn>
                <div style="float: left;">
                    <table class="InfoTable">
                        <tr>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td style="padding-top: 30px;"></td>
                            <td style="padding-top: 30px;"></td>
                        </tr>
                    </table>
                </div>
                <div style="float: left; margin-left: 20px;">
                </div>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?