Question

我为我的网站创建了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>

Answer 1

Isotope提供了许多演示如何完成这些事情。您最想要的是可调整大小的对象。 http://isotope.metafizzy.co/demos/relayout.html

据我记得（我做过类似的事情），你会破坏当前的Object并插入一个新的。然后你让Isotope简单地重新排列整个Isotope容器。当时我用不同的国家（div class或id）做了那个，并且只是对不同的案例作出反应。例： if（class == big） onclick（小） elseif（class == small） onclick（make big）

我现在无法告诉你详细信息，但假设你能够使用jQuery，这是你可以轻松设法做的事情。只需查看他们为Isotope提供的演示及其一些方法。

同位素视频库

1 个答案: