Displaying Flash and Video Content in the LightBox

In This Topic

If you choose, you can display video or Flash content within the lightbox extender. The lightbox's Flash mode has an inner Flash player in the frame to display Flash content. In this example, external Flash content will be linked to in the lightbox.

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.C1LightBox" TagPrefix="LightBox" %>

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="Panel1" runat="server">

    <a href="http://cdn.wijmo.com/movies/skip.swf" rel="wijlightbox[stock];width=400;height=300">

    <img src="http://cdn.wijmo.com/images/happygirl.png" title="Happy Girl" alt="Happy Girl" /></a>

    <a href="http://cdn.wijmo.com/movies/caveman.swf" rel="wijlightbox[stock];width=520;height=390">

    <img src="http://cdn.wijmo.com/images/caveman.png" title="Cave Man" alt="Cave Man" /></a>

    <a href="http://cdn.wijmo.com/movies/old_man.swf" rel="wijlightbox[stock];width=600;height=450">

    <img src="http://cdn.wijmo.com/images/oldman.png" title="Old Man" alt="Old Man" /></a>

</asp:Panel>

The above markup adds links to three Flash videos to the panel's content.

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

<LightBox:C1LightBoxExtender ID="Panel1_C1LightBoxExtender" runat="server" TargetControlID="Panel1" TextPosition="Outside" ControlsPosition="Outside" ShowCounter="false">

</LightBox:C1LightBoxExtender>

What You've Accomplished

Press F5 to run your application and notice that Flash content is displayed in the lightbox. You can chose another Flash item's thumbnail image to view that item in the main lightbox.