javascript - 同位素视频库

我已经为我的站点创建了Isotope画廊，该画廊可以正常工作，现在我想向画廊添加其他功能，即单击图像时，使div容器扩展到特定的宽度和高度，视频将在该div中播放。同位素库是否有可以处理此问题的默认功能？任何建议或想法都是最欢迎的

到目前为止，我的代码看起来像这样

<div id="naviso">
 <ul>
   <li><a href="#" data-filter=".cat1">cat1</a></li>
   <li><a href="#" data-filter=".cat2">cat2</a></li>
   <li><a href="#" data-filter=".cat3">cat3</a></li>
   <li><a href="#" data-filter=".cat4">cat4</a></li>
 </ul>
</div>

<div id="container" class="grid_12">
  <div id="box" class="cat1">
    <div class="box-img">
<a href="" rel="Shadowbox;height=540;width=960"><img src="/files/Image.png" alt="S"></a>
    </div>
  </div>

<div id="box" class="cat1 cat2">
    <div class="box-img">
<a href="" rel="Shadowbox;height=540;width=960"><img src="/files/Image.png" alt="S"></a>
    </div>
  </div>
</div>

<script type="text/javascript">
    var $container = $('#container');
// initialize isotope
$container.isotope({
  // options...
});

// filter items when filter link is clicked
$('#naviso ul a').click(function(){
  var selector = $(this).attr('data-filter');
  $container.isotope({ filter: selector });
  return false;
});
</script>

最佳答案

同位素提供了许多演示如何完成这些操作的演示。
您最可能想要的是一个可调整大小的对象。
http://isotope.metafizzy.co/demos/relayout.html

据我所记得（我做了类似的事情），您破坏了当前对象并插入了一个新对象。然后，让同位素简单地重新排列整个同位素容器。当时，我使用不同的州（div类或id）进行了此操作，只是对不同的Cases做出了反应。例：
如果（类别==大）
onclick（缩小）
elseif（类==小）
onclick（变大）

我现在无法告诉您“详细信息”，但是假设您能够使用jQuery，则可以轻松地完成此操作。只需看一下这些同位素及其与同位素一起提供的一些方法。

关于javascript - 同位素视频库，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21403884/