LightBox

Controls

All Controls

LightBox

Rate this demo

Thank you for your post!
Submit a support ticket
If you have an active license or trial, you have access to dedicated support from Telerik’s developers. Response time is 24h for active licenses and 72h for trials, Mon-Fri.
Post in the forums
If you don’t have access to support or would like to help other people by sharing your problem, reach out to our active community in the forums.

RadLightBox - Telerik's ASP.NET LightBox

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
Configurator











Zone

tlrk.it/18aM34E To test the behavior of our controls on mobile devices, scan the QR code.

tlrk.it/18aM34E

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 80+ 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.

About This Demo

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.


Get Started

  • Use Telerik’s Visual Studio Extensions (which you have installed together with the Telerik controls) to quickly create, upgrade and configure your Telerik UI projects. Save time by using the ready-to-use Visual Studio templates that cover common application scenarios.
  • Find the controls in need in your VS toolbox and use the Design-time surface and rich wizards to configure them quickly.
  • If you’d like to learn more about how to best implement the controls, browse the Telerik folder in your Start menu and use the shortcuts there to access the local demos, online documentation or open the sample examples app in Visual Studio.
  • If you like this particular LightBox demo, you can use the following path to find it in the sample website application:
lightbox/examples/overview

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.

Resources

C# VB
Show code in new window Demo isolation steps
<%@ Page Language="c#"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register Src="~/LightBox/Examples/Overview/Info.ascx" TagName="Info" TagPrefix="qsf" %>
<%@ 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>ASP.NET Light Box Demos | LightBox control</title>
    <link href="LightBoxDemoStyles.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="QsfSkinManager" runat="server" ShowChooser="true" />
    <script type="text/javascript">
        //<![CDATA[
        function pageLoad() {
            $(".wrapper").mouseleave(function () {
                for (var i = 1; i <= 9; i++) {
                    var image = $telerik.findElement(document, "Image" + i);
                    image.src = image.src.replace("-gray", "");
                }
            });

            $(".gray").mouseenter(function () {
                setTimeout(function () {

                });
                for (var i = 1; i <= 9; i++) {
                    var image = $telerik.findElement(document, "Image" + i);
                    if (image == this) {
                        image.src = image.src.replace("-gray", "");
                    }
                    else if (image.src.indexOf("-gray") < 0) {
                        image.src = image.src.replace(".png", "-gray.png");
                    }
                }
            });
        }

        function toggleModality() {
            var lightBox = $find('<%= RadLightBox1.ClientID %>');
            lightBox.set_modal(!lightBox.get_modal());
            var closeButton = $get("<%= ToggleCloseButton.ClientID %>");
            if (!lightBox.get_modal() && !closeButton.checked) {
                closeButton.checked = true;
                lightBox.showCloseButton(true);
            }
        }

        function togglePreviousButton(sender) {
            var lightBox = $find('<%= RadLightBox1.ClientID %>');
            lightBox.showPrevButton(sender.checked);
        }

        function toggleNextButton(sender) {
            var lightBox = $find('<%= RadLightBox1.ClientID %>');
            lightBox.showNextButton(sender.checked);
        }

        function toggleCloseButton(sender) {
            var lightBox = $find('<%= RadLightBox1.ClientID %>');
            lightBox.showCloseButton(sender.checked);
            var modality = $get("<%= ToggleModality.ClientID %>");

            if (!modality.checked && !sender.checked) {
                modality.checked = true;
                lightBox.set_modal(true);
            }
        }

        function toggleLoopItems() {
            var lightBox = $find('<%= RadLightBox1.ClientID %>');
            lightBox.set_loopItems(!lightBox.get_loopItems());
        }

        function changeNavigationMode(sender, args) {
            var lightBox = $find('<%= RadLightBox1.ClientID %>');
            lightBox.set_navigationMode(parseInt(sender.get_selectedItem().get_value()));
        }
        //]]>
    </script>
    
    <asp:Image ID="Header" runat="server" AlternateText="Header Image" ImageUrl="~/LightBox/Examples/Overview/img/header.png" />
    <div class="hiddenImages">
        <asp:Image ID="Image1Hidden" CssClass="hiddenImage" AlternateText="Mountain Pine Cones Gray Thumbnail" runat="server" ImageUrl="~/LightBox/Examples/Overview/img/thumb1-gray.png" />
        <asp:Image ID="Image2Hidden" CssClass="hiddenImage" AlternateText="Girl Holding Dandelions Gray Thumbnail" runat="server" ImageUrl="~/LightBox/Examples/Overview/img/thumb2-gray.png" />
        <asp:Image ID="Image3Hidden" CssClass="hiddenImage" AlternateText="Butterfly Gray Thumbnail" runat="server" ImageUrl="~/LightBox/Examples/Overview/img/thumb3-gray.png" />
        <asp:Image ID="Image4Hidden" CssClass="hiddenImage" AlternateText="Ladybug Gray Thumbnail" runat="server" ImageUrl="~/LightBox/Examples/Overview/img/thumb4-gray.png" />
        <asp:Image ID="Image5Hidden" CssClass="hiddenImage" AlternateText="Air Balloons Gray Thumbnail" runat="server" ImageUrl="~/LightBox/Examples/Overview/img/thumb5-gray.png" />
        <asp:Image ID="Image6Hidden" CssClass="hiddenImage" AlternateText="Fireworks Gray Thumbnail" runat="server" ImageUrl="~/LightBox/Examples/Overview/img/thumb6-gray.png" />
        <asp:Image ID="Image7Hidden" CssClass="hiddenImage" AlternateText="Young Girl Gray Thumbnail" runat="server" ImageUrl="~/LightBox/Examples/Overview/img/thumb7-gray.png" />
        <asp:Image ID="Image8Hidden" CssClass="hiddenImage" AlternateText="Forest Gray Thumbnail" runat="server" ImageUrl="~/LightBox/Examples/Overview/img/thumb8-gray.png" />
        <asp:Image ID="Image9Hidden" CssClass="hiddenImage" AlternateText="Lake Gray Thumbnail" runat="server" ImageUrl="~/LightBox/Examples/Overview/img/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/img/thumb1.png" />
            <asp:Image ID="Image4" AlternateText="Ladybug Thumbnail" runat="server" CssClass="gray" ImageUrl="~/LightBox/Examples/Overview/img/thumb4.png" />
            <asp:Image ID="Image7" AlternateText="Young Girl Thumbnail" runat="server" CssClass="gray" ImageUrl="~/LightBox/Examples/Overview/img/thumb7.png" />
        </div>
        <div class="column">
            <asp:Image ID="Image2" AlternateText="Girl Holding Dandelions Thumbnail" runat="server" CssClass="gray" ImageUrl="~/LightBox/Examples/Overview/img/thumb2.png" />
            <asp:Image ID="Image5" AlternateText="Air Balloons Thumbnail" runat="server" CssClass="gray" ImageUrl="~/LightBox/Examples/Overview/img/thumb5.png" />
            <asp:Image ID="Image8" AlternateText="Forest Thumbnail" runat="server" CssClass="gray" ImageUrl="~/LightBox/Examples/Overview/img/thumb8.png" />
        </div>
        <div class="column">
            <asp:Image ID="Image3" AlternateText="Butterfly Thumbnail" runat="server" CssClass="gray" ImageUrl="~/LightBox/Examples/Overview/img/thumb3.png" />
            <asp:Image ID="Image6" AlternateText="Fireworks Thumbnail" runat="server" CssClass="gray" ImageUrl="~/LightBox/Examples/Overview/img/thumb6.png" />
            <asp:Image ID="Image9" AlternateText="Lake Thumbnail" runat="server" CssClass="gray" ImageUrl="~/LightBox/Examples/Overview/img/thumb9.png" />
        </div>
    </div>
    <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Title="Configurator"
        Expanded="true" CssClass="configurationWrapper">
        <asp:CheckBox ID="ToggleCloseButton" runat="server" Text="Show Close Button" Checked="true"
            onclick="toggleCloseButton(this)"></asp:CheckBox><br />
        <br />
        <asp:CheckBox ID="ToggleNextButton" runat="server" Text="Show Next Button" Checked="true"
            onclick="toggleNextButton(this)"></asp:CheckBox><br />
        <br />
        <asp:CheckBox ID="TogglePreviousButton" runat="server" Text="Show Previous Button" Checked="true"
            onclick="togglePreviousButton(this)"></asp:CheckBox><br />
        <br />
        <asp:CheckBox ID="LoopItems" runat="server" Text="Turn On Looping Items" Checked="true"
            onclick="toggleLoopItems()"></asp:CheckBox><br />
        <br />
        <asp:CheckBox ID="ToggleModality" runat="server" Text="Turn On Modality" Checked="true"
            onclick="toggleModality()"></asp:CheckBox><br />
        <br />
        <label>Navigation mode:</label><br />
        <telerik:RadDropDownList ID="NavigationMode" runat="server" OnClientItemSelected="changeNavigationMode">
            <Items>
                <telerik:DropDownListItem Text="Zone" Value="0" />
                <telerik:DropDownListItem Text="Button" Value="1" />
            </Items>
        </telerik:RadDropDownList>
    </qsf:ConfiguratorPanel>
    <telerik:RadLightBox ID="RadLightBox1" runat="server" Modal="true" LoopItems="true" ZIndex="3005">
        <ClientSettings AllowKeyboardNavigation="true" NavigationMode="Zone">
            <AnimationSettings HideAnimation="Fade" NextAnimation="Fade" PrevAnimation="Fade" ShowAnimation="Fade" />
        </ClientSettings>
        <Items>
            <telerik:RadLightBoxItem ImageUrl="~/LightBox/Examples/Overview/img/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/img/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/img/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/img/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/img/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/img/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/img/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/img/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/img/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 class="qsf-overview-qr" style="clear: both;">
        <p>
            <asp:Image ID="Image10" runat="server" ImageUrl="~/Common/Images/QrCodesOverview/LightBox.png" AlternateText="tlrk.it/18aM34E" />
            To test the behavior of our controls on mobile devices, scan the QR code.
        </p>
        <a href="http://tlrk.it/18aM34E">tlrk.it/18aM34E</a>
    </div>
    </form>
</body>
</html>