|
1 --- |
|
2 title: flash |
|
3 layout: default |
|
4 category: tests |
|
5 --- |
|
6 |
|
7 <style> |
|
8 .item { |
|
9 width: 500px; |
|
10 margin: 5px; |
|
11 float: left; |
|
12 background: #333; |
|
13 } |
|
14 </style> |
|
15 |
|
16 <section id="copy"> |
|
17 <p>Flash content like YouTube or Vimeo videos</p> |
|
18 </section> |
|
19 |
|
20 <section id="options" class="clearfix"> |
|
21 |
|
22 <h3>Filters</h3> |
|
23 |
|
24 <ul id="filters" class="option-set clearfix" data-option-key="filter"> |
|
25 <li><a href="#filter-show-all" data-option-value="*" class="selected">show all</a></li> |
|
26 <li><a href="#filter-link" data-option-value=".link">link</a></li> |
|
27 <li><a href="#filter-audio" data-option-value=".audio">audio</a></li> |
|
28 <li><a href="#filter-video" data-option-value=".video">video</a></li> |
|
29 <li><a href="#filter-photo" data-option-value=".photo">photo</a></li> |
|
30 </ul> |
|
31 |
|
32 </section> <!-- #options --> |
|
33 |
|
34 <div id="container" class="clearfix"> |
|
35 |
|
36 <div class="item video"> |
|
37 |
|
38 <object width="500" height="305"><param name="movie" value="http://www.youtube.com/v/GaoLU6zKaws&rel=0&egm=0&showinfo=0&fs=1"><param name="wmode" value="transparent"><param name="allowFullScreen" value="true"><embed src="http://www.youtube.com/v/GaoLU6zKaws&rel=0&egm=0&showinfo=0&fs=1" type="application/x-shockwave-flash" width="500" height="305" allowfullscreen="true" wmode="transparent"></object> |
|
39 |
|
40 <p>Sexy Sax Man (Careless Whisper Saxophone Prank!!) directors cut (by <a href="http://www.youtube.com/watch?v=GaoLU6zKaws&feature=youtu.be">mikedahlquist</a>)</p> |
|
41 |
|
42 </div> |
|
43 |
|
44 <div class="item photo"> |
|
45 <figure class="content"> |
|
46 <a href="http://danimaree.tumblr.com"><img src="http://29.media.tumblr.com/tumblr_lhbbz91Wg51qa5ylbo1_500.gif" alt="WIN"></a> |
|
47 <figcaption><p>WIN</p></figcaption> |
|
48 </figure> |
|
49 |
|
50 </div> |
|
51 |
|
52 <div class="item audio"> |
|
53 <figure class="content audio"> |
|
54 |
|
55 <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> |
|
56 Smashing Pumpkins |
|
57 <em>Set The Ray To Jerry</em> |
|
58 Judas 0: B-Sides and Rarities |
|
59 <figcaption><blockquote> |
|
60 <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> |
|
61 </blockquote> |
|
62 |
|
63 <p>— 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> |
|
64 </figure> |
|
65 |
|
66 |
|
67 </div> |
|
68 |
|
69 <div class="item photo"> |
|
70 <figure class="content photo"> |
|
71 <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&#8217;s a light on by *zenibyfajnie on deviantART"></a> |
|
72 <figcaption><p><a href="http://zenibyfajnie.deviantart.com/art/and-there-s-a-light-on-171400460">and there’s a light on by *zenibyfajnie on deviantART</a></p></figcaption> |
|
73 </figure> |
|
74 |
|
75 </div> |
|
76 |
|
77 <div class="item link"> |
|
78 <h2><a href="http://www.kaplusa.com/blog/2011/01/twitter-icon-evolution/" >KA+A : Blog : Iconoclast – A Twitter Icon’s Journey From Discreet to Disaster</a></h2> |
|
79 <p>Via <a href="https://twitter.com/kristianindy/status/31100858091442178">kristianindy</a></p> |
|
80 </div> |
|
81 |
|
82 <div class="item video"> |
|
83 <figure class="content video"> |
|
84 <object width="500" height="305"><param name="movie" value="http://www.youtube.com/v/7g0We1DY7WI&rel=0&egm=0&showinfo=0&fs=1"></param><param name="wmode" value="transparent"></param><param name="allowFullScreen" value="true"></param><embed src="http://www.youtube.com/v/7g0We1DY7WI&rel=0&egm=0&showinfo=0&fs=1" type="application/x-shockwave-flash" width="500" height="305" allowFullScreen="true" wmode="transparent"></embed></object> |
|
85 <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> |
|
86 |
|
87 <p>I was at this show. This is my favorite song from 2010. I love Aloha so much.</p></figcaption> |
|
88 </figure> |
|
89 |
|
90 </div> |
|
91 |
|
92 <div class="item video"> |
|
93 <iframe title="YouTube video player" width="500" height="311" src="http://www.youtube.com/embed/7g0We1DY7WI" frameborder="0" allowfullscreen></iframe> |
|
94 </div> |
|
95 |
|
96 |
|
97 </div> <!-- #container --> |
|
98 |
|
99 <script src="../{{ site.jquery_js }}"></script> |
|
100 <script src="../{{ site.isotope_js }}"></script> |
|
101 <script> |
|
102 |
|
103 $(function(){ |
|
104 |
|
105 var $container = $('#container'); |
|
106 |
|
107 $container.imagesLoaded(function(){ |
|
108 $container.isotope({ |
|
109 transformsEnabled: false, |
|
110 visibleStyle: { opacity: 1 }, |
|
111 hiddenStyle: { opacity: 0 } |
|
112 }); |
|
113 }); |
|
114 |
|
115 {% include option-set-buttons.js %} |
|
116 |
|
117 }); |
|
118 </script> |