Displaying External Content in the Gallery

In This Topic

If you choose, you can display external Web site content within the Gallery extender. The gallery extender's iFrame mode has an inner iFrame that links to another URL. In this example, you'll set the gallery's Mode to "iframe" and display two Web sites in the gallery.

Complete the following steps:

Create a new ASP.NET Web application.
In the Solution Explorer, right-click the project and choose Add Reference. Locate and add a reference to the C1.Web.Wijmo.Extenders assembly.
Switch to Source view, and add the following markup at the top of the page to register the assembly:

<%@ Register Assembly="C1.Web.Wijmo.Extenders.4" Namespace="C1.Web.Wijmo.Extenders.C1Gallery" TagPrefix="Gallery" %>

Note that you may need to edit the above depending on the assembly you are using.

Add the following markup within the main <div> tag to add a Panel with content:

<asp:Panel ID="gallery" runat="server" Font-Overline="False" Title="Overview" Width="750" Height="600">

    <ul class="">

        <li class=""><a href="http://www.componentone.com">

            <img src="http://cdn.wijmo.com/images/componentone_thumb.png" title="ComponentOne" alt="ComponentOne" /></a> </li>

        <li class=""><a href="http://www.microsoft.com">

            <img src="http://cdn.wijmo.com/images/microsoft_thumb.png" title="Microsoft" alt="Microsoft" /></a>

        </li>

    </ul>

</asp:Panel>

The above markup adds two Web sites to the panel's content.

Add the following markup just below the Panel markup to set the gallery extender:

<Gallery:C1GalleryExtender runat="server" ID="CarouselExtender2" ShowTimer="false" ShowCaption="false" ShowControlsOnHover="false" ThumbnailOrientation="Horizontal" ThumbsLength="100" ThumbsDisplay="4" ShowPager="false" Mode="Iframe" TargetControlID="gallery">

</Gallery:C1GalleryExtender>

The Mode option is set to "iframe" so the Web site content will be displayed.

What You've Accomplished

Press F5 to run your application and notice that a Website is displayed in the gallery. You can interact with the Web site within the gallery or choose another Web site to view.