327 lines
11 KiB
HTML
327 lines
11 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
|
||
<meta charset="utf-8" />
|
||
<title>flash · Isotope </title>
|
||
|
||
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
|
||
|
||
<link rel="stylesheet" href="../css/style.css" />
|
||
|
||
<!-- scripts at bottom of page -->
|
||
|
||
</head>
|
||
<body class="tests ">
|
||
|
||
<nav id="site-nav">
|
||
<h1><a href="../index.html">Isotope</a></h1>
|
||
|
||
<h2>Docs</h2>
|
||
|
||
<ul>
|
||
|
||
|
||
<li><a href="../docs/introduction.html">Introduction</a>
|
||
|
||
|
||
|
||
<li><a href="../docs/options.html">Options</a>
|
||
|
||
|
||
|
||
<li><a href="../docs/methods.html">Methods</a>
|
||
|
||
|
||
|
||
<li><a href="../docs/layout-modes.html">Layout modes</a>
|
||
|
||
|
||
|
||
<li><a href="../docs/filtering.html">Filtering</a>
|
||
|
||
|
||
|
||
<li><a href="../docs/sorting.html">Sorting</a>
|
||
|
||
|
||
|
||
<li><a href="../docs/animating.html">Animating</a>
|
||
|
||
|
||
|
||
<li><a href="../docs/adding-items.html">Adding items</a>
|
||
|
||
|
||
|
||
<li><a href="../docs/extending-isotope.html">Extending Isotope</a>
|
||
|
||
|
||
|
||
<li><a href="../docs/hash-history-jquery-bbq.html">Hash history with jQuery BBQ</a>
|
||
|
||
|
||
|
||
<li><a href="../docs/help.html">Help</a>
|
||
|
||
|
||
|
||
<li><a href="../docs/license.html">License</a>
|
||
|
||
|
||
</ul>
|
||
|
||
<h2>Demos</h2>
|
||
|
||
<ul>
|
||
|
||
|
||
<li><a href="../demos/basic.html">Basic</a>
|
||
|
||
|
||
|
||
<li><a href="../demos/elements-complete.html">Elements Complete</a>
|
||
|
||
|
||
|
||
<li><a href="../demos/elements-partial.html">Elements Partial</a>
|
||
|
||
|
||
|
||
<li><a href="../demos/layout-modes.html">Layout modes</a>
|
||
|
||
|
||
|
||
<li><a href="../demos/filtering.html">Filtering</a>
|
||
|
||
|
||
|
||
<li><a href="../demos/sorting.html">Sorting</a>
|
||
|
||
|
||
|
||
<li><a href="../demos/relayout.html">reLayout</a>
|
||
|
||
|
||
|
||
<li><a href="../demos/adding-items.html">Adding items</a>
|
||
|
||
|
||
|
||
<li><a href="../demos/infinite-scroll.html">Infinite Scroll</a>
|
||
|
||
|
||
|
||
<li><a href="../demos/images.html">Images</a>
|
||
|
||
|
||
|
||
<li><a href="../demos/combination-filters.html">Combination filters</a>
|
||
|
||
|
||
|
||
<li><a href="../demos/hash-history.html">Hash history</a>
|
||
|
||
|
||
|
||
<li><a href="../demos/fluid-responsive.html">Fluid / responsive</a>
|
||
|
||
|
||
</ul>
|
||
|
||
<h2>Custom layout modes</h2>
|
||
|
||
<ul>
|
||
|
||
|
||
<li><a href="../custom-layout-modes/centered-masonry.html">Centered Masonry</a>
|
||
|
||
|
||
|
||
<li><a href="../custom-layout-modes/category-rows.html">Category rows</a>
|
||
|
||
|
||
|
||
<li><a href="../custom-layout-modes/masonry-corner-stamp.html">Masonry corner stamp</a>
|
||
|
||
|
||
|
||
<li><a href="../custom-layout-modes/masonry-gutters.html">Masonry gutters</a>
|
||
|
||
|
||
|
||
<li><a href="../custom-layout-modes/spine-align.html">Spine align</a>
|
||
|
||
|
||
</ul>
|
||
|
||
<h2><a href="../tests/index.html">Tests</a></h2>
|
||
|
||
</nav> <!-- #site-nav -->
|
||
|
||
<section id="content">
|
||
|
||
<h1>flash</h1>
|
||
|
||
|
||
<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&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>
|
||
|
||
<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>
|
||
|
||
</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>— 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&#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’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 – A Twitter Icon’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&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>
|
||
<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="../js/jquery-1.6.4.min.js"></script>
|
||
<script src="../jquery.isotope.min.js"></script>
|
||
<script>
|
||
|
||
$(function(){
|
||
|
||
var $container = $('#container');
|
||
|
||
$container.imagesLoaded(function(){
|
||
$container.isotope({
|
||
transformsEnabled: false,
|
||
visibleStyle: { opacity: 1 },
|
||
hiddenStyle: { opacity: 0 }
|
||
});
|
||
});
|
||
|
||
|
||
var $optionSets = $('#options .option-set'),
|
||
$optionLinks = $optionSets.find('a');
|
||
|
||
$optionLinks.click(function(){
|
||
var $this = $(this);
|
||
// don't proceed if already selected
|
||
if ( $this.hasClass('selected') ) {
|
||
return false;
|
||
}
|
||
var $optionSet = $this.parents('.option-set');
|
||
$optionSet.find('.selected').removeClass('selected');
|
||
$this.addClass('selected');
|
||
|
||
// make option object dynamically, i.e. { filter: '.my-filter-class' }
|
||
var options = {},
|
||
key = $optionSet.attr('data-option-key'),
|
||
value = $this.attr('data-option-value');
|
||
// parse 'false' as false boolean
|
||
value = value === 'false' ? false : value;
|
||
options[ key ] = value;
|
||
if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
|
||
// changes in layout modes need extra logic
|
||
changeLayoutMode( $this, options )
|
||
} else {
|
||
// otherwise, apply new options
|
||
$container.isotope( options );
|
||
}
|
||
|
||
return false;
|
||
});
|
||
|
||
|
||
});
|
||
</script>
|
||
|
||
<footer>
|
||
Isotope by <a href="http://desandro.com">David DeSandro</a> / <a href="http://metafizzy.co">Metafizzy</a>
|
||
</footer>
|
||
|
||
</section> <!-- #content -->
|
||
|
||
|
||
</body>
|
||
</html> |