WebBlue skin

ImageGallery - Binding to Folder and Static Collection

Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

This demo shows two ways for binding the RadImageGallery:

  • Binding to Folder - it is as easy as setting the RadImageGallery ImagesFolderPath property and providing it an absolute or relative location to the folder. The control will automatically generate small thumbnail images that will be cropped automatically to fit the thumbnail width and height.
    Additionally, the images in the Image Area have relative paths and the user only needs to wait for the image to be loaded by the browser.
  • Binding to Static Collection - the RadImageGallery control supports static item collection binding. The idea is to specify items and their properties in the RadImageGallery.Items collection.
  • DefaultCS.aspx
  • styles.css
<%@ Page Language="c#"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!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>
    <link rel="stylesheet" href="styles.css" />
    <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="left-image-gallery">
            <h3>Binding to Folder:</h3>
            <telerik:RadImageGallery RenderMode="Lightweight" ID="RadImageGallery1" runat="server" ImagesFolderPath="Images"
                Width="600px" Height="480px">
                <ThumbnailsAreaSettings Position="Left" ScrollOrientation="Vertical" />
        <div class="right-image-gallery">
            <h3>Binding to Static Collection:</h3>
            <telerik:RadImageGallery RenderMode="Lightweight" runat="server" Width="600px" Height="480px">
                <ThumbnailsAreaSettings ThumbnailWidth="140px" Width="140px" Position="Left" ScrollOrientation="Vertical" />
                    <telerik:ImageGalleryItem ImageUrl="Images/Yoga.jpg" />
                    <telerik:ImageGalleryItem ImageUrl="Images/Swimming.jpg" />
                    <telerik:ImageGalleryItem ImageUrl="Images/Surfing.jpg" />
                    <telerik:ImageGalleryItem ImageUrl="Images/Snowboarding.jpg" />
                    <telerik:ImageGalleryItem ImageUrl="Images/Skiing.jpg" />
                    <telerik:ImageGalleryItem ImageUrl="Images/Mountain_Biking.jpg" />
                    <telerik:ImageGalleryItem ImageUrl="Images/Hang_glider.jpg" />
                    <telerik:ImageGalleryItem ImageUrl="Images/Football.jpg" />
                    <telerik:ImageGalleryItem ImageUrl="Images/Diving.jpg" />
                    <telerik:ImageGalleryItem ImageUrl="Images/Climbing.jpg" />

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?