ImageGallery - Templates

0:00 / 0:00

Item 1 of 6
 
  • ImageGallery-Template-Pic1
  • ImageGallery-Template-Pic2
  • ImageGallery-Template-Pic3
  • ImageGallery-Template-Pic4
  • ImageGallery-Template-Pic5
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB
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 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>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

Help Us Improve

Was this example helpful?