Web Design + Strategy: Fancybox Media (quicktime, youtube, iframe) setup

1. In order to set up Fancybox that displays media type files (videos, or other html documents/web pages) first include the JavaScript and CSS files in between the <head></head> of your HTML document, like this:



<!-- Add jQuery library -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript">
</script>

<!-- Add mousewheel plugin (this is optional)  **be sure src reflects your file structure-->
<script src="fancybox/lib/jquery.mousewheel-3.0.6.pack.js" type="text/javascript">
</script>

<!-- Add fancyBox css and javascript **be sure src reflects your file structure -->
<link href="fancybox/source/jquery.fancybox.css?v=2.0.6" media="screen" rel="stylesheet" type="text/css"></link>
<script src="fancybox/source/jquery.fancybox.pack.js?v=2.0.6" type="text/javascript">
</script>

<!-- Optional add helpers - button, thumbnail and/or media ; **be sure src reflects your file structure-->

<link href="fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.2" media="screen" rel="stylesheet" type="text/css"></link>
<script src="fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.2" type="text/javascript">
</script>
<script src="fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.0" type="text/javascript">
</script>
<link href="fancybox/source/helpers/jquery.fancybox-thumbs.css?v=2.0.6" media="screen" rel="stylesheet" type="text/css">

2. You must also call the fancybox function in between the <head></head> of your HTML document, like this:


<!--**Quicktime not supported in Fancybox when using Internet Explorer-->

<script type="text/javascript">
<!-- to play quicktime MUST HAVE class="fancybox-qt"   -->
$(".fancybox-qt").fancybox({
    width : 640,
    height : 340,
    beforeLoad : function() {
        var href = this.href,
            width = this.width,
            height = this.height;

        // Check if quictime movie and change content
        if (href.indexOf('.mov') != -1) {
            this.content    = '<object width="' + width + '" height="'+ height + '" pluginspage="http://www.apple.com/quicktime/download" data="'+ href + '" type="video/quicktime"><param name="autoplay" value="true"><param name="scale" value="tofit"><param name="controller" value="true"><param name="enablejavascript" value="true"><param name="src" value="' + href + '"><param name="loop" value="false"></object>';
            this.type       = 'html';
        }
    }
});
</script>

<!-- to play media MUST HAVE class="various fancybox.iframe"   -->
<script type="text/javascript">
         $(document).ready(function() {
    $(".various").fancybox({
     maxWidth : 800,
     maxHeight : 600,
     width  : '90%',
     height  : '90%',
     openEffect : 'fade',
     closeEffect : 'fade'
    });
   });
  </script>

<!-- Add non-media function to trigger fancybox styles, MUST HAVE class="fancybox" -->
<script type="text/javascript">
 $(document).ready(function() {
  $(".fancybox").fancybox({
   //or none (default is elastic)
  prevEffect  : 'fade',
  nextEffect  : 'fade',
  helpers : {
   title : {
    //inside, outside, float, over
    type: 'inside'
   },
   overlay : {
    //value between 0-1 
    opacity : 0.5,
    css : {
     //hexadecimal value to adjust fancybox interface bg
     'background-color' : '#fff'
    }
   },
  }
  }); <!--  closes $(".fancybox").fancybox({ line -->
 }); <!-- closes $(document).ready(function() {    -->
</script>

a) To set up a Fancybox link to quicktime video, create an <a> with an attribute of
class="fancy-qt" . If you would like view your Fancybox content as a gallery set, add an attribute of rel="yoursetname" in your <a>

<!--example of absolute URL quicktime video -->
<a class="fancybox-qt" title="The Lorax Trailer" href="http://trailers.apple.com/movies/universal/thelorax/lorax-tlr2_r640s.mov?width=640&amp;height=340"> View quicktime video</a>

<!--example of relative URL quicktime video -->
<a class="fancybox-qt" title="Suwappu" href="images/suwappu.mov"> View quicktime video</a>

b) To set up a Fancybox link to YouTube video, create an <a> with an attribute of
class="various fancybox.iframe" . Your href attribute should following this structure
href="you http://www.youtube.com/embed/yourvideocode/?autoplay=1" in your <a>,
yourvideocode should be a letter/number combination code found in your chosen YouTube's absolute URL.

<!--example of YouTube video -->
<!--syntax for youtube vids -->
<a class="various fancybox.iframe" href="http://www.youtube.com/embed/L9szn1QQfas?autoplay=1">View tron video</a>

<a class="various fancybox.iframe" href="http://www.youtube.com/embed/Pb_zZ3xItPI?autoplay=1">Example of restricted video</a>


<a class="various fancybox.iframe" href="http://www.youtube.com/embed/p1W8R5TSNNk?autoplay=1">View 30 Rock video</a>

c) To set up a Fancybox link to external html document(web page), create an <a>
with an attribute of class="various fancybox.iframe". Your href attribute should be either an absolute or relative URL.


<!--example of absolute URL -->
<a class="various fancybox.iframe" href="http://cnn.com/">Open CNN site</a>
<a class="various fancybox.iframe" href="http://gothamist.com/">Open Gothamist site</a>

<!--example of relative URL -->
<a class="various fancybox.iframe" href="../javascriptEx/exercise2.html">Open Javascript Exercise site</a>

d) To set up a Fancybox link to Google Map location, create an <a> with an attribute of
class="various fancybox.iframe". Your href attribute should be the absolute URL of a particular place.


<!--example of Google Maps -->
<a class="various fancybox.iframe" href="http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Fred+Jones+Jr+Museum+of+Art,+Elm+Avenue,+Norman,+OK&amp;aq=1&amp;oq=fred+jonorman+ok&amp;sll=35.209783,-97.445147&amp;sspn=0.005146,0.009012&amp;t=h&amp;ie=UTF8&amp;hq=Fred+Jones+Jr+Museum+of+Art,&amp;hnear=Elm+Ave,+Norman,+Oklahoma&amp;cid=15176728748174515505&amp;ll=35.210072,-97.44644&amp;spn=0.002975,0.003433&amp;z=18&amp;output=embed">Google maps (iframe)</a>

Thursday, July 19, 2012

Fancybox Media (quicktime, youtube, iframe) setup

1 comment: