How to Create a CSS jQuery UL Linked FLV Player

The jQuery language lets you dynamically create CSS-customized windows that display data without refreshing the page. You can also link to an FLV file, which plays in the FLV Flash player automatically when the window opens. This feature lets you display videos and animation in a popup window when the user clicks a button on your Web page.

Instructions

1. Right-click the HTML file you want to use to display the jQuery popup window. Click "Open With" and select your preferred jQuery editor. You can also write the code in Notepad, but you can't test or debug it in Notepad.

2. Link the file to the jQuery libraries you need to create the popup. Add the following code to the top of your HTML file in the "head" tags:

   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
   <script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>

3. Link the page to the CSS style sheet you want to use to customize the popup window. The following code links to the "styles.css" sheet:

   <link rel="stylesheet" href="/fancybox/styles.css" type="text/css" media="screen" />

4. Create the jQuery code that sets up the popup and displays the FLV file. When you open an FLV file, you trigger the Flash player on the user's desktop. The following code creates the popup:

   $(#button).click(function() {
   $("a#movie").fancybox();
   $("a#inline").fancybox({
   'showmovie': true,
   'moviefile': file.flv
   });
   $("styles").fancybox({
   'transitionIn' : 'elastic',
   'transitionOut' : 'elastic',
   'speedIn' : 600,
   'speedOut' : 200,
   'overlayShow' : false
   });
   });

   Replace "file.flv" with the file you want to show. The "styles" section sets up the CSS styles and how the window displays in the user's browser. Replace "button" with the button you want to use to trigger the popup.

References

• Fancybox: How to Use