Developing (v7+)

Making an external video (not Youtube or Vimeo) load in a fancy box

Permalink May 10, 2011 at 11:16 AM

I'm currently building a site for a multinational with hundreds of divisions and no-one seems to be able to get me a copy of the video that the have here:http://hmheducation.com/pinpoint/pinpoint-video.php...
so I've had to try and embed this in the new site I'm doing for corporate. Basically I've viewed source on the page, and lifted the code and saved a local copy, which still pulls the video from the external source.

I've downloaded fancybox and added it to my header:

<script type="text/javascript" src="<?php  echo $this->getThemePath()?>/js/dropdowns.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
   <script>
      !window.jQuery && document.write('<script src="jquery-1.4.3.min.js"></script>');
   </script>
   <script type="text/javascript" src="<?php  echo $this->getThemePath()?>/js/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
   <script type="text/javascript" src="<?php  echo $this->getThemePath()?>/js/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
   <link rel="stylesheet" type="text/css" href="<?php  echo $this->getThemePath()?>/js/fancybox/jquery.fancybox-1.3.4.css" media="screen" />
   <script type="text/javascript">
      $(document).ready(function() {
         /*
         *   Examples - images
         */
         $("a#example1").fancybox();
         $("a#example2").fancybox({

Viewing 15 lines of 74 lines. View entire code block.

 
<script type="text/javascript" src="<?php  echo $this->getThemePath()?>/js/dropdowns.js"></script>
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
   <script>
      !window.jQuery && document.write('<script src="jquery-1.4.3.min.js"></script>');
   </script>
   <script type="text/javascript" src="<?php  echo $this->getThemePath()?>/js/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
   <script type="text/javascript" src="<?php  echo $this->getThemePath()?>/js/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
   <link rel="stylesheet" type="text/css" href="<?php  echo $this->getThemePath()?>/js/fancybox/jquery.fancybox-1.3.4.css" media="screen" />
 
   <script type="text/javascript">
      $(document).ready(function() {
         /*
         *   Examples - images
         */
 
         $("a#example1").fancybox();
 
         $("a#example2").fancybox({
            'overlayShow'   : false,
            'transitionIn'   : 'elastic',
            'transitionOut'   : 'elastic'
         });
 
         $("a#example3").fancybox({
            'transitionIn'   : 'none',
            'transitionOut'   : 'none'   
         });
 
         $("a#example4").fancybox({
            'opacity'      : true,
            'overlayShow'   : false,
            'transitionIn'   : 'elastic',
            'transitionOut'   : 'none'
         });
 
         $("a#example5").fancybox();
 
         $("a#example6").fancybox({
            'titlePosition'      : 'outside',
            'overlayColor'      : '#000',
            'overlayOpacity'   : 0.9
         });
 
         $("a#example7").fancybox({
            'titlePosition'   : 'inside'
         });
 
         $("a#example8").fancybox({
            'titlePosition'   : 'over'
         });
 
         $("a[rel=example_group]").fancybox({
            'transitionIn'      : 'none',
            'transitionOut'      : 'none',
            'titlePosition'    : 'over',
            'titleFormat'      : function(title, currentArray, currentIndex, currentOpts) {
               return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
            }
         });
 
         /*
         *   Examples - various
         */
 
         $("#various1").fancybox({
            'titlePosition'      : 'inside',
            'transitionIn'      : 'none',
            'transitionOut'      : 'none'
         });
 
         $("#various2").fancybox();
 
         $("#various3").fancybox({
            'width'            : '75%',
            'height'         : '75%',
            'autoScale'         : false,
            'transitionIn'      : 'none',
            'transitionOut'      : 'none',
            'type'            : 'iframe'
         });
 
         $("#various4").fancybox({
            'padding'         : 0,
            'autoScale'         : false,
            'transitionIn'      : 'none',
            'transitionOut'      : 'none'
         });
      });
   </script>