我试图让同位素在我网站的一个页面上工作,这样我就可以以一种奇特的方式分享网络视频。我将同位素文件上传到我的网站,然后将以下代码放入我在单个页面上发布的文章中。当我查看页面时,我可以看到我想观看的视频的图像,当我单击它们时,我可以观看它们但没有动画或移动,图像是静态的并且在页面的一侧垂直.
我犯了某种错误或没有理解某些东西,有人可以指出我正确的方向。我使用的代码如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>· Videos</title>
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<link rel="stylesheet" href="/public_html/templates/rt_mediamogul/Iso/style.css" />
<!-- scripts at bottom of page -->
</head>
<body class="demos ">
<section id="content">
<h1>Images</h1>
<section id="copy">
<p>Isotope is triggered after all images are loaded with the <a href="public_html/templates/rt_mediamogul/Iso/help.html#imagesloaded_plugin"> <code>imagesLoaded</code> plugin</a>. </p>
</section>
<div id="container" class="photos clearfix">
<div class="photo">
<a href="http://www.youtube.com/watch?v=u_IHMPVFyq8" title="Tiger Surgery on Youtube"><img src="http://i4.ytimg.com/vi/u_IHMPVFyq8/mqdefault.jpg" alt="Science" /></a>
</div>
<div class="photo">
<a href="http://www.youtube.com/watch?v=vj-H_Mbfvu4" title="Is engineering right for me, on Youtube"><img src="http://i4.ytimg.com/vi/vj-H_Mbfvu4/mqdefault.jpg" alt="Science" /></a>
</div>
<div class="photo">
<a href="http://www.youtube.com/watch?v=I9t-gYnPNaw" title="A fast math trick, on Youtube"><img src="http://i4.ytimg.com/vi/I9t-gYnPNaw/mqdefault.jpg" alt="Science" /></a>
</div>
<div class="photo">
<a href="http://www.youtube.com/watch?v=3-tXkRb2GFY" title="Biology by Khan Academy, on Youtube"><img src="http://i4.ytimg.com/vi/3-tXkRb2GFY/mqdefault.jpg" alt="Science" /></a>
</div>
<div class="photo">
<a href="http://www.youtube.com/watch?v=4FROxZ5i67k" title="Space Shuttle Launch, on Youtube"><img src="http://i4.ytimg.com/vi/4FROxZ5i67k/mqdefault.jpg" alt="Science" /></a>
</div>
<div class="photo">
<a href="http://www.youtube.com/watch?v=6aK2CKrdjbE" title="Mr Bean does Chemistry"><img src="http://i4.ytimg.com/vi/6aK2CKrdjbE/mqdefault.jpg" alt="Science" /></a>
</div>
<div class="photo">
<a href="http://www.youtube.com/watch?v=k6U-i4gXkLM" title="Introduction to computer programing, on Youtube"><img src="http://i4.ytimg.com/vi/k6U-i4gXkLM/mqdefault.jpg" alt="Science" /></a>
</div>
<div class="photo">
<a href="http://www.youtube.com/watch?v=3vgNvXdkQaU" title="Identifying rocks for dinner."><img src="http://i4.ytimg.com/vi/3vgNvXdkQaU/mqdefault.jpg" alt="Science" /></a>
</div>
<div class="photo">
<a href="http://www.youtube.com/watch?v=NHjLO_cw5iE" title="Punk economics in Ireland"><img src="http://i4.ytimg.com/vi/NHjLO_cw5iE/mqdefault.jpg" alt="Science" /></a>
</div>
</div> <!-- #container -->
<script src="public_html/templates/rt_mediamogul/Iso/jquery-1.7.1.min.js"></script>
<script src="public_html/templates/rt_mediamogul/Iso/jquery.isotope.min.js"></script>
<script>
$(function(){
var $container = $('#container');
$container.imagesLoaded( function(){
$container.isotope({
itemSelector : '.photo'
});
});
});