按按钮更改图库

Question

首先，我正在Bootstrap 3上构建我的网站，它有自己的图片库元素。我基本上想要实现的是，当我在同一页面上有几个按钮和 gallery元素 时，按下一些按钮可更改图库元素中的图像。

尝试使用谷歌，却找不到能满足我需求的解决方案。这是一些截图。 JSFiddle在这里提供起来有点困难，因为我无法真正包含Bootstrap中的图片库元素，只包含按钮会很浪费。

这就是我现在所得到的：

这需要某种关于Bootstrap和JS / jQuery的知识，因为我无法为此提供任何演示站点或小提琴。所有可行的解决方案值得我的谢意！

更新：

以下是图片库的源代码，它在firebug检查器中的样子。这应该对某人有用，因为这仍然没有解决。

Answer 1

我认为您正在寻找：http://isotope.metafizzy.co/

Answer 2

您需要为您的图库使用此标记。您需要包装图像，每个按钮应显示在一个div容器

中

<a href="#" id="btn1" class="btn" >Button 1</a>
<a href="#" id="btn2" class="btn" >Button 2</a>
<a href="#" id="btn3" class="btn" >Button 3</a>
<div class="gallery">
<div id="cat1" class="cat">
  <img src="//placehold.it/50x50">
  <img src="//placehold.it/50x50">
  <img src="//placehold.it/50x50">
</div>  
  <div id="cat2" class="cat" style="display:none;">
    <img src="//placehold.it/50x50/ffff00">
  <img src="//placehold.it/50x50/ffff00">
  <img src="//placehold.it/50x50/ffff00">
</div> 
  <div id="cat3" class="cat" style="display:none;">
  <img src="//placehold.it/50x50/00ff00">
    <img src="//placehold.it/50x50/00ff00">
    <img src="//placehold.it/50x50/00ff00">
</div> 
</div> 

并将此Jquery代码添加到页面末尾

function show(id)
{

$('.cat').hide();
 $('#cat'+id).css('display','block');  
}

$('#btn1').click(function(){show('1')});
$('#btn2').click(function(){show('2')});
$('#btn3').click(function(){show('3')});