New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

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
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.
  • DefaultVB.aspx
  • DefaultVB.aspx.vb
<%@ Page Language="vb" AutoEventWireup="false" Inherits="Telerik.ImageGalleryExamples.Functionality.Animations.DefaultVB"CodeFile="DefaultVB.aspx.vb"  %>

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

<!DOCTYPE html>
<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 ID="RadAjaxManager1" 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 ID="ConfiguratorColumn1" 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 ID="ConfiguratorColumn2" 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 ID="ConfiguratorColumn3" 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