Use External Content and Videos

The wijlightbox widget can display several types of content including videos, Flash files, and external Web sites within iFrames. In this example, you'll add content of each type to be displayed in a wijlightbox widget.

Complete the following steps:

Create a new ASP.NET MVC 5 Wijmo Application (see Creating an MVC Tools Project).
Right-click the Scripts folder in the Solution Explorer, choose Add | Existing Item, and in the dialog box locate and add the swfobject.js file.
If you do not have the file available, you can locate it in the MVC Control Explorer sample.
Navigate to the Solution Explorer, expand the Shared folder inside the Views folder, and double-click _Layout to open the file.
Add a reference to swfobject.js file in the <head> tags of the page:
<script src="../../Scripts/swfobject.js" type="text/javascript"></script>
This is required for Flash files.

Add the following markup within the <body> tags of the page, just after @RenderBody():

<div id="lightbox">
<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://www.componentone.com" rel="wijlightbox[stock]">
<img src="http://cdn.wijmo.com/images/componentone_thumb.png" alt="ComponentOne" /></a>
<a href="http://www.microsoft.com" rel="wijlightbox[stock]">
<img src="http://cdn.wijmo.com/images/microsoft_thumb.png" alt="Microsoft" /></a>
<a title="Mindrelic - time lapse summer/autumn 2009" href="http://player.vimeo.com/video/8087882" rel="wijlightbox;player=iframe"><img class="border" alt="" src="http://cdn.wijmo.com/images/mindrelic.png"/></a>
<a title="Rochester NY timelapse" href="http://player.vimeo.com/video/5244737" rel="wijlightbox;player=iframe"><img class="border" alt="" src="http://cdn.wijmo.com/images/rochester.png"/></a>
<a title="Keyboard Cat" href="https://www.youtube.com/v/J---aiyznGQ?version=3" rel="wijlightbox;player=swf"><img class="border" alt="" src="http://cdn.wijmo.com/images/keyboardcat.png"/></a>
<a title="Sneezing Panda" href="http://www.youtube.com/v/FzRH3iTQPrk?version=3" rel="wijlightbox;player=swf"><img class="border" alt="" src="http://cdn.wijmo.com/images/panda.png"/></a>
<a title="Talking Cats" href="http://www.youtube.com/v/z3U0udLH974?version=3" rel="wijlightbox;player=swf"><img class="border" alt="" src="http://cdn.wijmo.com/images/talkingcats.png"/></a>
</div>

This markup will add content for a lightbox widget to the page.

After the closing </div> tag you added in the previous step, enter the following jQuery script to initialize the wijlightbox widget:

<script type="text/javascript">
    $(function () {
        $("#lightbox").wijlightbox({
            controlsPosition: 'outside',
            textPosition: 'outside'
        });
    });
</script>

This script will initialize the lightbox widget.

What You've Accomplished

Press F5 to run the application. Notice that the lightbox includes thumbnail images for a Flash file, two Web sites that will be displayed in iFrames when clicked, and five videos two of which will be displayed in iFrames when clicked.