isotope/_posts/tests/2011-03-27-flash01.html

---
title: flash01
layout: default
category: tests
---

  <style>
    .item {
      width: 500px;
      margin: 5px;
      float: left;
      background: #333;
    }
    
    .isotope .isotope-item {
      -webkit-transition-property: top, left, opacity;
         -moz-transition-property: top, left, opacity;
              transition-property: top, left, opacity;
    }
    
  
  </style>

  <section id="copy">
    <p>Flash content like YouTube or Vimeo videos</p>
  </section>

  <section id="options" class="clearfix">
    
    <h3>Filters</h3>

    <ul id="filters" class="option-set clearfix" data-option-key="filter">
      <li><a href="#filter-show-all" data-option-value="*" class="selected">show all</a></li>
      <li><a href="#filter-link" data-option-value=".link">link</a></li>
      <li><a href="#filter-audio" data-option-value=".audio">audio</a></li>
      <li><a href="#filter-video" data-option-value=".video">video</a></li>
      <li><a href="#filter-photo" data-option-value=".photo">photo</a></li>
    </ul>

  </section> <!-- #options -->

  <div id="container" class="clearfix">
    
    <div class="item video">
      
      <object width="500" height="305"><param name="movie" value="http://www.youtube.com/v/GaoLU6zKaws&amp;rel=0&amp;egm=0&amp;showinfo=0&amp;fs=1"><param name="wmode" value="transparent"><param name="allowFullScreen" value="true"><embed src="http://www.youtube.com/v/GaoLU6zKaws&amp;rel=0&amp;egm=0&amp;showinfo=0&amp;fs=1" type="application/x-shockwave-flash" width="500" height="305" allowfullscreen="true" wmode="transparent"></object>
        
      <p>Sexy Sax Man (Careless Whisper Saxophone Prank!!) directors cut (by <a href="http://www.youtube.com/watch?v=GaoLU6zKaws&amp;feature=youtu.be">mikedahlquist</a>)</p>
      
    </div>
    
    <div class="item photo">
      <figure class="content">
        <a href="http://danimaree.tumblr.com"><img src="http://29.media.tumblr.com/tumblr_lhbbz91Wg51qa5ylbo1_500.gif" alt="WIN"></a>
        <figcaption><p>WIN</p></figcaption>
      </figure>
      
    </div>
    
    <div class="item audio">
      <figure class="content audio">

                    <script type="text/javascript" language="javascript" src="http://assets.tumblr.com/javascript/tumblelog.js?505"></script><span id="audio_player_3674118149">[<a href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" target="_blank">Flash 9</a> is required to listen to audio.]</span><script type="text/javascript">replaceIfFlash(9,"audio_player_3674118149",'\x3cdiv class=\x22audio_player\x22\x3e<embed type="application/x-shockwave-flash" src="http://assets.tumblr.com/swf/audio_player_black.swf?audio_file=http://www.tumblr.com/audio_file/3674118149/tumblr_lhmdlpR0Kl1qashpb&color=FFFFFF" height="27" width="207" quality="best"></embed>\x3c/div\x3e')</script>
                    Smashing Pumpkins
                    <em>Set The Ray To Jerry</em>
                    Judas 0: B-Sides and Rarities
                    <figcaption><blockquote> 
        <p>I’ll believe until the day I die that the Smashing Pumpkins were more unique and more complex than most people will ever give them credit for. But I also understand that casual listeners aren’t going to go out of their way to hear the hundreds of lesser-known Pumpkins tracks that are often just as good as anything that’s made its way onto an album. So I’m telling you to start with “Set the Ray to Jerry.”</p> 
      </blockquote> 

      <p>&#8212; Ross McGowan <a href="http://www.stylusmagazine.com/articles/seconds/the-smashing-pumpkins-set-the-ray-to-jerry.htm">The Smashing Pumpkins: Set the Ray to Jerry</a></p></figcaption>
                  </figure>

      
    </div>
    
    <div class="item photo">
      <figure class="content photo">
        <a href="http://zenibyfajnie.deviantart.com/art/and-there-s-a-light-on-171400460"><img src="http://27.media.tumblr.com/tumblr_lh8j1hUuvO1qashpbo1_500.jpg" alt="and there&amp;#8217;s a light on by *zenibyfajnie on deviantART"></a>
        <figcaption><p><a href="http://zenibyfajnie.deviantart.com/art/and-there-s-a-light-on-171400460">and there&#8217;s a light on by *zenibyfajnie on deviantART</a></p></figcaption>
      </figure>
      
    </div>
    
    <div class="item link">
      <h2><a href="http://www.kaplusa.com/blog/2011/01/twitter-icon-evolution/" >KA+A : Blog : Iconoclast &ndash; A Twitter Icon&rsquo;s Journey From Discreet to Disaster</a></h2>
      <p>Via <a href="https://twitter.com/kristianindy/status/31100858091442178">kristianindy</a></p>
    </div>
    
    <div class="item video">
                  <figure class="content video">
                    <object width="500" height="305"><param name="movie" value="http://www.youtube.com/v/7g0We1DY7WI&amp;rel=0&amp;egm=0&amp;showinfo=0&amp;fs=1"></param><param name="wmode" value="transparent"></param><param name="allowFullScreen" value="true"></param><embed src="http://www.youtube.com/v/7g0We1DY7WI&amp;rel=0&amp;egm=0&amp;showinfo=0&amp;fs=1" type="application/x-shockwave-flash" width="500" height="305" allowFullScreen="true" wmode="transparent"></embed></object>
                    <figcaption><p><a href="http://www.youtube.com/watch?v=7g0We1DY7WI">Aloha - Ruins [Live @ DC 9 - Washington, DC - 4/15/10]</a> (via <a href="http://youtube.com/user/alohaband1">alohaband1</a>)</p> 

      <p>I was at this show. This is my favorite song from 2010. I love Aloha so much.</p></figcaption>
                  </figure>
      
    </div>
    
    <div class="item video">
      <iframe title="YouTube video player" width="500" height="311" src="http://www.youtube.com/embed/7g0We1DY7WI" frameborder="0" allowfullscreen></iframe>
    </div>
    
    
  </div> <!-- #container -->

  <script src="../{{ site.jquery_js }}"></script>
  <script src="../{{ site.isotope_js }}"></script>
  <script> 
  
    $(function(){
      
      var $container = $('#container');
      
      $container.imagesLoaded(function(){
        $container.isotope({
          transformsEnabled: false,
          visibleStyle: { opacity: 1 },
          hiddenStyle: { opacity: 0 }
        });
      });
      
      {% include option-set-buttons.js %}
      
    });
  </script>