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

Templates

0:00 / 0:00

Item 1 of 6
 
  • ImageGallery-Template-Pic1
  • ImageGallery-Template-Pic2
  • ImageGallery-Template-Pic3
  • ImageGallery-Template-Pic4
  • ImageGallery-Template-Pic5
The current ASP.NET Image Gallery example demonstrates the Template Item that can be added to the Image Gallery control.

The Template Item can be used for adding other control different than the pictures you have stored in the local image folder or the DataBase. This demo demonstrates how MediaPlayer control which plays a video can be added to the ImageGallery control via the new Template Item.
  • DefaultCS.aspx
<%@ Page Language="c#"  %>

<%@ 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">
        .rigToolbar {
            display: none;
        }
    </style>
</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" style="width: 690px">
        <telerik:RadImageGallery RenderMode="Lightweight" ID="RadImageGallery1" runat="server">
            <Items>
                <telerik:ImageGalleryTemplateItem PreventDefaultGestures="true" ThumbnailUrl="Thumbnails/ImageGallery-Template-Video_th.jpg">
                    <ContentTemplate>
                        <telerik:RadMediaPlayer RenderMode="Lightweight" runat="server" Source="~/Image-Gallery/Examples/Functionality/Templates/Images/CostaRica.mp4"
                            Height="389px" Width="690px" ID="RadMediaPlayer1">
                        </telerik:RadMediaPlayer>
                    </ContentTemplate>
                </telerik:ImageGalleryTemplateItem>
                <telerik:ImageGalleryItem  ImageUrl="Images/ImageGallery-Template-Pic1.jpg" ThumbnailUrl="Thumbnails/ImageGallery-Template-Pic1_th.jpg" />
                <telerik:ImageGalleryItem ImageUrl="Images/ImageGallery-Template-Pic2.jpg" ThumbnailUrl="Thumbnails/ImageGallery-Template-Pic2_th.jpg" />
                <telerik:ImageGalleryItem ImageUrl="Images/ImageGallery-Template-Pic3.jpg" ThumbnailUrl="Thumbnails/ImageGallery-Template-Pic3_th.jpg" />
                <telerik:ImageGalleryItem ImageUrl="Images/ImageGallery-Template-Pic4.jpg" ThumbnailUrl="Thumbnails/ImageGallery-Template-Pic4_th.jpg" />
                <telerik:ImageGalleryItem ImageUrl="Images/ImageGallery-Template-Pic5.jpg" ThumbnailUrl="Thumbnails/ImageGallery-Template-Pic5_th.jpg" />
            </Items>
            <ThumbnailsAreaSettings ThumbnailWidth="115px" ThumbnailHeight="65px" Height="65px" />
            <ImageAreaSettings Height="389px" ResizeMode="Fill" />
        </telerik:RadImageGallery>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance