Creating a lightbox using JQuery UI Dialog
$(“”"#I”").Love(“”"JQuery”");
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
Daniel and his Scratched Eye
Last weekend was very hectic starting Thursday Night.
Daniel started to cry after bath time and we thought that it was nightmares as he never opened his eyes. So we just consoled him as much as we could. Thanks to the wifey for rocking endlessly while I slept.
The next day however I get a frantic call about 2pm to tell me to meet Jess at the doctors office as Daniel had been screaming profusely and scratching at his eyes. Now we where set to leave at 3:00 to go to the mountains for the weekend so I was already going to get off early and decided that I needed to go ahead a little earlier and meet Jess there. When I got there Daniel had cried himself to sleep and you could tell that his eye-lids where very red.
Once he saw the Doctor the theories began to fly… Pink eye, dust, chemical reaction from shampoo, and many more. Finally after two doctors we were told that it probably wasn’t pink eye and that it could be a scratch on his eye so they would prescribe antibiotic drops. So me and Daniel go home and Jess goes to CVS to get the drops. Let me just say that whatever drops they are they where like wonder drops. Daniel instantly started to feel better.
Upon a closer inspection from the Hawk (Jess) we saw the scratch on his eye. He is doing much better now with his eye… it is no longer red and he doesn’t try to hold it closed anymore.
I hate that the little guy had to go through that, but I am also glad that there was no permanent damage.
Thanks for Reading
David Bates
