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

Animations

Climbing Thumbnail Diving Thumbnail Football Thumbnail Hang Glider Thumbnail Mountain Biking Thumbnail Skiing Thumbnail Snowboarding Thumbnail Surfing Thumbnail Swimming Thumbnail Yoga Thumbnail
  • Demo Configurator
  • Show/Hide Animation typeNone
  • Next/Prev Animation typeNone
  • Easing functionLinear
  • Animation speed200
  • Description positionBottom

This example demonstrates the advanced animations of RadLightBox. By using the configurator you can choose animation type, specify easing function and speed of the animation in order to manipulate the animation effect. Also the configurator provides an option to change the position of the description and the title.

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • styles.css
<%@ Page Language="vb" CodeFile="DefaultVB.aspx.vb" AutoEventWireup="false" Inherits="Telerik.LightBoxExamplesCS.Examples.Functionality.Animations.DefaultVB" %>

<%@ 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>
    <link href="styles.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container">
        <div class="row">
            <asp:Image ID="Image1" AlternateText="Climbing Thumbnail" runat="server" CssClass="gray" ImageUrl="images/ThumbnailImages/Climbing_thumbnail.jpg" />
            <asp:Image ID="Image2" AlternateText="Diving Thumbnail" runat="server" CssClass="gray" ImageUrl="images/ThumbnailImages/Diving_thumbnail.jpg" />
            <asp:Image ID="Image3" AlternateText="Football Thumbnail" runat="server" CssClass="gray" ImageUrl="images/ThumbnailImages/Football_thumbnail.jpg" />
            <asp:Image ID="Image4" AlternateText="Hang Glider Thumbnail" runat="server" CssClass="gray" ImageUrl="images/ThumbnailImages/Hang_glider_thumbnail.jpg" />
            <asp:Image ID="Image5" AlternateText="Mountain Biking Thumbnail" runat="server" CssClass="gray" ImageUrl="images/ThumbnailImages/Mountain_Biking_thumbnail.jpg" />
            <asp:Image ID="Image6" AlternateText="Skiing Thumbnail" runat="server" CssClass="gray" ImageUrl="images/ThumbnailImages/Skiing_thumbnail.jpg" />
            <asp:Image ID="Image7" AlternateText="Snowboarding Thumbnail" runat="server" CssClass="gray" ImageUrl="images/ThumbnailImages/Snowboarding_thumbnail.jpg" />
            <asp:Image ID="Image8" AlternateText="Surfing Thumbnail" runat="server" CssClass="gray" ImageUrl="images/ThumbnailImages/Surfing_thumbnail.jpg" />
            <asp:Image ID="Image9" AlternateText="Swimming Thumbnail" runat="server" CssClass="gray" ImageUrl="images/ThumbnailImages/Swimming_thumbnail.jpg" />
            <asp:Image ID="Image10" AlternateText="Yoga Thumbnail" runat="server" CssClass="gray" ImageUrl="images/ThumbnailImages/Yoga_thumbnail.jpg" />
        </div>
        <telerik:RadLightBox RenderMode="Lightweight" ID="RadLightBox1" runat="server" Modal="true" LoopItems="true" ZIndex="100000">
            <ClientSettings AllowKeyboardNavigation="true" NavigationMode="Zone">
            </ClientSettings>
            <Items>
                <telerik:RadLightBoxItem ImageUrl="images/OriginalImages/Climbing.jpg" Title="Climbing" TargetControlID="Image1">
                </telerik:RadLightBoxItem>
                <telerik:RadLightBoxItem ImageUrl="images/OriginalImages/Diving.jpg" Title="Diving" TargetControlID="Image2">
                </telerik:RadLightBoxItem>
                <telerik:RadLightBoxItem ImageUrl="images/OriginalImages/Football.jpg" Title="Football" TargetControlID="Image3">
                </telerik:RadLightBoxItem>
                <telerik:RadLightBoxItem ImageUrl="images/OriginalImages/Hang_glider.jpg" Title="Hang glider" TargetControlID="Image4">
                </telerik:RadLightBoxItem>
                <telerik:RadLightBoxItem ImageUrl="images/OriginalImages/Mountain_Biking.jpg" Title="Mountain Biking" TargetControlID="Image5">
                </telerik:RadLightBoxItem>
                <telerik:RadLightBoxItem ImageUrl="images/OriginalImages/Skiing.jpg" Title="Skiing" TargetControlID="Image6">
                </telerik:RadLightBoxItem>
                <telerik:RadLightBoxItem ImageUrl="images/OriginalImages/Snowboarding.jpg" Title="Snowboarding" TargetControlID="Image7">
                </telerik:RadLightBoxItem>
                <telerik:RadLightBoxItem ImageUrl="images/OriginalImages/Surfing.jpg" Title="Surfing" TargetControlID="Image8">
                </telerik:RadLightBoxItem>
                <telerik:RadLightBoxItem ImageUrl="images/OriginalImages/Swimming.jpg" Title="Swimming" TargetControlID="Image9">
                </telerik:RadLightBoxItem>
                <telerik:RadLightBoxItem ImageUrl="images/OriginalImages/Yoga.jpg" Title="Yoga" TargetControlID="Image10">
                </telerik:RadLightBoxItem>
            </Items>
        </telerik:RadLightBox>
    </div>
    <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <qsf:DropDownList ID="ShowHideAnimationType" runat="server" DropDownHeight="140" OnSelectedIndexChanged="ShowHideAnimationType_SelectedIndexChanged" AutoPostBack="true"
                                Label="Show/Hide Animation type" Size="Auto">
                            </qsf:DropDownList>
                        </li>
                        <li>
                            <qsf:DropDownList ID="NextPrevAnimationType" runat="server" DropDownHeight="140" OnSelectedIndexChanged="NextPrevAnimationType_SelectedIndexChanged" AutoPostBack="true"
                                Label="Next/Prev Animation type" Size="Auto">
                            </qsf:DropDownList>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <qsf:DropDownList ID="EasingFunction" runat="server" DropDownHeight="140" OnSelectedIndexChanged="EasingFunction_SelectedIndexChanged" AutoPostBack="true"
                                Label="Easing function" Size="Wide">
                            </qsf:DropDownList>
                        </li>
                        <li>
                            <qsf:DropDownList ID="AnimationSpeed" runat="server" OnSelectedIndexChanged="AnimationSpeed_SelectedIndexChanged" AutoPostBack="true"
                                Label="Animation speed" Size="Wide">
                            </qsf:DropDownList>
                        </li>
                        <li>
                            <qsf:DropDownList ID="DescriptionPosition" runat="server" OnSelectedIndexChanged="DescriptionPosition_SelectedIndexChanged" AutoPostBack="true"
                                Label="Description position" Size="Wide">
                            </qsf:DropDownList>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance