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

WebForms LightBox Overview

Header Image
Mountain Pine Cones Gray Thumbnail Girl Holding Dandelions Gray Thumbnail Butterfly Gray Thumbnail Ladybug Gray Thumbnail Air Balloons Gray Thumbnail Fireworks Gray Thumbnail Young Girl Gray Thumbnail Forest Gray Thumbnail Lake Gray Thumbnail
Mountain Pine Cones Thumbnail Ladybug Thumbnail Young Girl Thumbnail
Girl Holding Dandelions Thumbnail Air Balloons Thumbnail Forest Thumbnail
Butterfly Thumbnail Fireworks Thumbnail Lake Thumbnail
  • Demo Configurator
  • General
  • Buttons
Navigation ModeZone

This RadLightBox example demonstrates its most popular features in a portfolio scenario. By using the provided configuration settings you could modify the appearance of the light box completely on the client side. You can choose between two type of navigation: Zone and Button. Zone navigation mode allows you to navigate between the images by clicking on the left or right area of the RadLightBox, while the Button navigation is performing only by clicking on the arrow buttons. When the last image has been reached, the slideshow will begin from the first image if the Looping items option is turned on.

About RadLightBox for ASP.NET AJAX

Telerik’s ASP.NET LightBox is a lightweight control providing you with an easy way to display images and template content, such as HTML elements, iFrames, Flash, YouTube videos and more in a popup window. The component resizes automatically in accordance with the content size and allows users to navigate items with the keyboard arrows. You can set the LightBox to either overlay the content of the page or render as a modal window.

RadLightBox and 120+ other controls are part of UI for ASP.NET AJAX, a comprehensive toolset taking care of the common functionality of your application, while leaving you with more time to work on its business logic.

Key Features

  • Flexible client-side API.
  • Keyboard navigation.
  • Animation.
  • Auto-resize functionality.
  • Server-side databinding.
  • Templates.
  • Visual Appeal - ships with rich set of skins for easy and consistent styling.
More about LightBox for ASP.NET AJAX
  • DefaultVB.aspx
  • scripts.js
  • styles.css
<%@ Page Language="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>
    <link href="styles.css" rel="stylesheet" />
    <script type="text/javascript" src="scripts.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <script type="text/javascript">
        //<![CDATA[
        window.$ = $telerik.$;
        Sys.Application.add_load(function () {
            demo.lightBox = $find("<%=RadLightBox1.ClientID %>");
            demo.modality = $get("<%= ToggleModality.ClientID %>");
            demo.closeButton = $get("<%= ToggleCloseButton.ClientID %>");
            demo.initialize();
        });
        //]]>
    </script>
    <div class="demo-container no-bg">
        <asp:Image ID="Header" runat="server" AlternateText="Header Image" ImageUrl="~/LightBox/Examples/Overview/images/header.png" />
        <div class="hiddenImages">
            <asp:Image ID="Image1Hidden" CssClass="hiddenImage" AlternateText="Mountain Pine Cones Gray Thumbnail" runat="server" ImageUrl="~/LightBox/Examples/Overview/images/thumb1-gray.png" />
            <asp:Image ID="Image2Hidden" CssClass="hiddenImage" AlternateText="Girl Holding Dandelions Gray Thumbnail" runat="server" ImageUrl="~/LightBox/Examples/Overview/images/thumb2-gray.png" />
            <asp:Image ID="Image3Hidden" CssClass="hiddenImage" AlternateText="Butterfly Gray Thumbnail" runat="server" ImageUrl="~/LightBox/Examples/Overview/images/thumb3-gray.png" />
            <asp:Image ID="Image4Hidden" CssClass="hiddenImage" AlternateText="Ladybug Gray Thumbnail" runat="server" ImageUrl="~/LightBox/Examples/Overview/images/thumb4-gray.png" />
            <asp:Image ID="Image5Hidden" CssClass="hiddenImage" AlternateText="Air Balloons Gray Thumbnail" runat="server" ImageUrl="~/LightBox/Examples/Overview/images/thumb5-gray.png" />
            <asp:Image ID="Image6Hidden" CssClass="hiddenImage" AlternateText="Fireworks Gray Thumbnail" runat="server" ImageUrl="~/LightBox/Examples/Overview/images/thumb6-gray.png" />
            <asp:Image ID="Image7Hidden" CssClass="hiddenImage" AlternateText="Young Girl Gray Thumbnail" runat="server" ImageUrl="~/LightBox/Examples/Overview/images/thumb7-gray.png" />
            <asp:Image ID="Image8Hidden" CssClass="hiddenImage" AlternateText="Forest Gray Thumbnail" runat="server" ImageUrl="~/LightBox/Examples/Overview/images/thumb8-gray.png" />
            <asp:Image ID="Image9Hidden" CssClass="hiddenImage" AlternateText="Lake Gray Thumbnail" runat="server" ImageUrl="~/LightBox/Examples/Overview/images/thumb9-gray.png" />
        </div>
        <div class="wrapper">
            <div class="column">
                <asp:Image ID="Image1" AlternateText="Mountain Pine Cones Thumbnail" runat="server" CssClass="gray" ImageUrl="~/LightBox/Examples/Overview/images/thumb1.png" />
                <asp:Image ID="Image4" AlternateText="Ladybug Thumbnail" runat="server" CssClass="gray" ImageUrl="~/LightBox/Examples/Overview/images/thumb4.png" />
                <asp:Image ID="Image7" AlternateText="Young Girl Thumbnail" runat="server" CssClass="gray" ImageUrl="~/LightBox/Examples/Overview/images/thumb7.png" />
            </div>
            <div class="column">
                <asp:Image ID="Image2" AlternateText="Girl Holding Dandelions Thumbnail" runat="server" CssClass="gray" ImageUrl="~/LightBox/Examples/Overview/images/thumb2.png" />
                <asp:Image ID="Image5" AlternateText="Air Balloons Thumbnail" runat="server" CssClass="gray" ImageUrl="~/LightBox/Examples/Overview/images/thumb5.png" />
                <asp:Image ID="Image8" AlternateText="Forest Thumbnail" runat="server" CssClass="gray" ImageUrl="~/LightBox/Examples/Overview/images/thumb8.png" />
            </div>
            <div class="column">
                <asp:Image ID="Image3" AlternateText="Butterfly Thumbnail" runat="server" CssClass="gray" ImageUrl="~/LightBox/Examples/Overview/images/thumb3.png" />
                <asp:Image ID="Image6" AlternateText="Fireworks Thumbnail" runat="server" CssClass="gray" ImageUrl="~/LightBox/Examples/Overview/images/thumb6.png" />
                <asp:Image ID="Image9" AlternateText="Lake Thumbnail" runat="server" CssClass="gray" ImageUrl="~/LightBox/Examples/Overview/images/thumb9.png" />
            </div>
        </div>
        <telerik:RadLightBox RenderMode="Lightweight" ID="RadLightBox1" runat="server" Modal="true" LoopItems="true" ZIndex="100000">
            <ClientSettings AllowKeyboardNavigation="true" NavigationMode="Zone">
                <AnimationSettings HideAnimation="Fade" NextAnimation="Fade" PrevAnimation="Fade" ShowAnimation="Fade" />
            </ClientSettings>
            <Items>
                <telerik:RadLightBoxItem ImageUrl="~/LightBox/Examples/Overview/images/1.png" Title="Mountain Pine Cones" TargetControlID="Image1"
                    Description="You can find these little treasures amidst the pine branches, deep in the green summer mountain.<br/><em>2013, solo exhibition 'nature and its wonders', Berlinische Galerie, Berlin, Germany</em>">
                </telerik:RadLightBoxItem>
                <telerik:RadLightBoxItem ImageUrl="~/LightBox/Examples/Overview/images/2.png" Title="Girl Holding Dandelions" TargetControlID="Image2"
                    Description="A thousand wishes.<br/><em>2011, solo exhibition 'lifestyle', Kowasa Gallery, Barcelona, Spain</em>">
                </telerik:RadLightBoxItem>
                <telerik:RadLightBoxItem ImageUrl="~/LightBox/Examples/Overview/images/3.png" Title="Butterfly" TargetControlID="Image3"
                    Description="Just when the caterpillar thought the world was over, it turned into a butterfly.<br/><em>2012, solo exhibition 'microworld', Atlas Gallery, London, UK</em>">
                </telerik:RadLightBoxItem>
                <telerik:RadLightBoxItem ImageUrl="~/LightBox/Examples/Overview/images/4.png" Title="Ladybug" TargetControlID="Image4"
                    Description="Rumor has it if a ladybug lands on you, something wonderful will happen to you.<br/><em>2012, solo exhibition 'microworld', Atlas Gallery, London, UK</em>">
                </telerik:RadLightBoxItem>
                <telerik:RadLightBoxItem ImageUrl="~/LightBox/Examples/Overview/images/5.png" Title="Air Balloons" TargetControlID="Image5"
                    Description="Fairy tale in the sky.<br/><em>2011, solo exhibition 'lifestyle', Kowasa Gallery, Barcelona, Spain</em>">
                </telerik:RadLightBoxItem>
                <telerik:RadLightBoxItem ImageUrl="~/LightBox/Examples/Overview/images/6.png" Title="Fireworks" TargetControlID="Image6"
                    Description="Rain of light.<br/><em>2011, solo exhibition 'lifestyle', Kowasa Gallery, Barcelona, Spain</em>">
                </telerik:RadLightBoxItem>
                <telerik:RadLightBoxItem ImageUrl="~/LightBox/Examples/Overview/images/7.png" Title="Young Girl" TargetControlID="Image7"
                    Description="Innocence.<br/><em>2011, solo exhibition 'lifestyle', Kowasa Gallery, Barcelona, Spain</em>">
                </telerik:RadLightBoxItem>
                <telerik:RadLightBoxItem ImageUrl="~/LightBox/Examples/Overview/images/8.png" Title="Forest" TargetControlID="Image8"
                    Description="The golden hues of the fall trees merge in one living organism.<br/><em>2013, solo exhibition 'nature and its wonders', Berlinische Galerie, Berlin, Germany</em>">
                </telerik:RadLightBoxItem>
                <telerik:RadLightBoxItem ImageUrl="~/LightBox/Examples/Overview/images/9.png" Title="Lake" TargetControlID="Image9"
                    Description="The crystal beauty of the winter and magical wonderland it creates.<br/><em>2013, solo exhibition 'nature and its wonders', Berlinische Galerie, Berlin, Germany</em>">
                </telerik:RadLightBoxItem>
            </Items>
        </telerik:RadLightBox>
        <div style="clear: both;"></div>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance