I love JQuery and I love JQuery UI even more but what I love most about the combination of the two is that they are cross browser compatible, delivered over a CDN network, and open source. This means that I can use anything I build on top of these two very powerful platforms in any website I wish, including the enterprise ones.

I was recently tasked with building a lightbox element that would allow me to showcase Vimeo videos (or any other content) in a cross browser CDN enabled way. At first I scoured the web looking for the best jquery lightbox plugin. I tried fancybox, shadowbox, thickbox, slimbox, facebox, other younameit-box plugins but they all either catered to one type of content, failed in the cross browser arena, or had unknown or grey licensing.

On day two of my growing frustration a friend of mine suggested I look at JQuery UI and specifically the Dialog method. So I did and was instantly hooked, and while it didn’t provide all of the functionality you need from a lightbox it came pretty darn close. So I began hacking away until I got down to a pretty comprehensive lightbox solution for video and then wrote a little helper function to populate the content area on the fly and set the title. What follows is how to do that:

Step one: includes

So first you need to include JQuery and JQuery UI within your page. The easiest way to do this is use Google’s CDN by placing the following two lines in your head.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src=" https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>

You will also need to include a JQuery UI theme you can use the starter theme hosted on Google’s CDN too!

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-darkness/jquery-ui.cs"
type="text/css" rel="Stylesheet" />

Again that needs to be placed in your head.

Step two: create a div

We need to create a div that will not only hold our dialog but also most of the embed code for the video’s we will want to play.
I would suggest adding this code near the footer of the page since it will load an iframe.

<div id="videoPlayerDiv">
<iframe id="theVideo" src="" width="640" height="360" frameborder="0" webkitallowfullscreen="" allowfullscreen=""></iframe>
</div>


Step three .dialog()

Now you need some JQuery magic on page load as well as creating the helper function
<script type="text/jscript">
$(document).ready(function () {
$('#videoPlayerDiv').dialog({ autoOpen: false, modal: true, title: "RFMD Video", width: 664, resizable: false });
$("#videoPlayerDiv").bind("dialogclose", function (event, ui) {
$('#theVideo').attr('src', '');
});

});
function SetVideo(source, title) {
$('#theVideo').attr('src', source);
$('#videoPlayerDiv').dialog("option", "title", title);
$('#videoPlayerDiv').dialog('open');
$('.ui-widget-overlay').click(function () { $('#videoPlayerDiv').dialog('close'); });
};
</script>
This can go in your header or wherever you might have already put the $(document).ready clause.

Final step: Call your helper function

So now all you need to do is call the helper function and pass it the src url for the video and the title

<a href="#" onclick="javascript:SetVideo('http://player.vimeo.com/video/18888136?title=0&byline=0&portrait=0&color=af0522"&autoplay=1', 'Courtesy Vimeo User 1024');return false;">Video</a>

You can prolly tell I use asp.net from the javascript surrounds and return false. If you don’t use .net you don’t need this.

Demo

Click to open demo

So now that I got their attention I delve into why Windows Phone 7 Series is an OS worth having such a long name. I think they got it right. First they are requiring the device manufacturers to have certain features like touchscreen, accelerometer, and three hardware buttons along the bottom. Then they are basing the phone on an already existing platform, Silverlight and XNA both of which are highly used on the xbox 360 Microsoft’s gaming platform. Finally they are making the tools free. This is a big step for Microsoft and you can still see on the http://developer.windowsphone.com/ they still charge $99 per year for developer access to legacy SDK’s and samples. What freelance developer wants to pay that… especially when Apple and Google both have free tools (Apple is not completely free as you have to buy an Intel mac) and the phone up till now did not have powerful processors or GPU’s. Windows Phone 7 Series even goes one step further to make the software on the phone support full multitasking or as some like to call it multi-APPing. Combine that with a slick UI and sound UI standards we have a real contender on our hands. I wish this phone would be released a lot sooner than the Christmas time-frame that they currently predict.

Now I have downloaded the SDK and even followed the keynote given at http://live.visitmix.com/ to make a picture viewing app. It worked great, was easy to follow given I already knew the tools from silverlight development and fast… on my computer the emulator outperformed any picture app I ever had on my IPhone. I can’t wait to see what comes of the app store and I hope that MS takes a hint from Apple and Google and decide to make it free to publish apps but charge for advertising and take a cut of sales. If so I’m in.

Thanks for reading
David Bates