Question

我对此很新，所以如果很明显我很抱歉！

我所拥有的是：一系列方形div，里面有图像，形成一个缩略图库。

<div class="category-1" data-myorder="1">
<div class="box">
 <div  class="boxInner">
  <a href="y1p1T.jpg" data-lightbox="y1p1T.jpg" title="y1p1"> <img src="y1p1T.jpg" /></a>
   <div class="titleBox">y1p1</a><br>
   <p id="workCat">Design</p></div>
 </div>

上面的代码适用于构成方形缩略图库的12个图像中的一个在顶部我尝试将它分为3类：ALL | Category-1 | Category-2

目前这是发生的事情：页面加载突出显示“全部”按钮，并且未显示所有图像当我点击另一个按钮时，会显示一个看似随机的图像选择（即在上图中，它忽略了'category-1'类）。

我希望这是有道理的！谢谢

Answer 1

标记（HTML）：

<div class="controls">
    <div class="control-group">
        <div class="control-label">Filter:</div>
            <button class="filter" data-filter="all">All</button>
            <button class="filter" data-filter=".cat-1">Category 1</button>
    <button class="filter" data-filter=".cat-2">Category 2</button>
        </div>
    </div>
</div>

<div class="your-container">
    <div class="box mix cat-1">
        <div class="boxInner">
            <a href="http://static.giantbomb.com/uploads/original/0/995/2165859-hero.png" data-lightbox="http://static.giantbomb.com/uploads/original/0/995/2165859-hero.png" title="Category-1"><img src="http://static.giantbomb.com/uploads/original/0/995/2165859-hero.png" /></a>
        <div class="titleBox">Category-1</div>
        </div>
    </div>
    <div class="box mix cat-1">
        <div class="boxInner">
            <a href="http://static.giantbomb.com/uploads/original/0/995/2165859-hero.png" data-lightbox="http://static.giantbomb.com/uploads/original/0/995/2165859-hero.png" title="Category-1"><img src="http://static.giantbomb.com/uploads/original/0/995/2165859-hero.png" /></a>
        <div class="titleBox">Category-1</div>            
        </div>
    </div>
    <div class="box mix cat-1">
        <div class="boxInner">
            <a href="http://static.giantbomb.com/uploads/original/0/995/2165859-hero.png" data-lightbox="http://static.giantbomb.com/uploads/original/0/995/2165859-hero.png" title="Category-1"><img src="http://static.giantbomb.com/uploads/original/0/995/2165859-hero.png" /></a>
        <div class="titleBox">Category-1</div>            
        </div>
    </div>
    <div class="box mix cat-2">
        <div class="boxInner">
            <a http://4.bp.blogspot.com/-SnnXpfDrA8g/T45gDd72DTI/AAAAAAAERqc/W1f0-_gSqgw/s400/7021992339_67f71d698e_z.jpg" data-lightbox="http://4.bp.blogspot.com/-SnnXpfDrA8g/T45gDd72DTI/AAAAAAAERqc/W1f0-_gSqgw/s400/7021992339_67f71d698e_z.jpg" title="Category-2"><img src="http://4.bp.blogspot.com/-SnnXpfDrA8g/T45gDd72DTI/AAAAAAAERqc/W1f0-_gSqgw/s400/7021992339_67f71d698e_z.jpg" /></a>
        <div class="titleBox">Category-2</div>            
        </div>
    </div>
    <div class="box mix cat-2">
        <div class="boxInner">
            <a http://4.bp.blogspot.com/-SnnXpfDrA8g/T45gDd72DTI/AAAAAAAERqc/W1f0-_gSqgw/s400/7021992339_67f71d698e_z.jpg" data-lightbox="http://4.bp.blogspot.com/-SnnXpfDrA8g/T45gDd72DTI/AAAAAAAERqc/W1f0-_gSqgw/s400/7021992339_67f71d698e_z.jpg" title="Category-2"><img src="http://4.bp.blogspot.com/-SnnXpfDrA8g/T45gDd72DTI/AAAAAAAERqc/W1f0-_gSqgw/s400/7021992339_67f71d698e_z.jpg" /></a>
        <div class="titleBox">Category-2</div>            
        </div>
    </div>
    <div class="box mix cat-2">
        <div class="boxInner">
            <a http://4.bp.blogspot.com/-SnnXpfDrA8g/T45gDd72DTI/AAAAAAAERqc/W1f0-_gSqgw/s400/7021992339_67f71d698e_z.jpg" data-lightbox="http://4.bp.blogspot.com/-SnnXpfDrA8g/T45gDd72DTI/AAAAAAAERqc/W1f0-_gSqgw/s400/7021992339_67f71d698e_z.jpg" title="Category-2"><img src="http://4.bp.blogspot.com/-SnnXpfDrA8g/T45gDd72DTI/AAAAAAAERqc/W1f0-_gSqgw/s400/7021992339_67f71d698e_z.jpg" /></a>
        <div class="titleBox">Category-2</div>            
        </div>
    </div>
    <div class="box mix cat-3">
        <div class="boxInner">
            <a href="http://images.iop.org/objects/phw/world/16/2/8/pwfeature7_02-03.jpg" data-lightbox="http://images.iop.org/objects/phw/world/16/2/8/pwfeature7_02-03.jpg" title="Category-3"><img src="http://images.iop.org/objects/phw/world/16/2/8/pwfeature7_02-03.jpg" /></a>
        <div class="titleBox">Category-3</div>            
        </div>
    </div>
    <div class="box mix cat-3">
        <div class="boxInner">
            <a href="http://images.iop.org/objects/phw/world/16/2/8/pwfeature7_02-03.jpg" data-lightbox="http://images.iop.org/objects/phw/world/16/2/8/pwfeature7_02-03.jpg" title="Category-3"><img src="http://images.iop.org/objects/phw/world/16/2/8/pwfeature7_02-03.jpg" /></a>
        <div class="titleBox">Category-3</div>            
        </div>
    </div>
    <div class="box mix cat-3">
        <div class="boxInner">
            <a href="http://images.iop.org/objects/phw/world/16/2/8/pwfeature7_02-03.jpg" data-lightbox="http://images.iop.org/objects/phw/world/16/2/8/pwfeature7_02-03.jpg" title="Category-3"><img src="http://images.iop.org/objects/phw/world/16/2/8/pwfeature7_02-03.jpg" /></a>
        <div class="titleBox">Category-3</div>            
        </div>
    </div>
    <div class="gap"></div>
</div>

你的小提琴缺少过滤控制（非常重要！），以及＆＃34;差距＆＃34;使整个事情运行的div（s）和javascript奇怪地缺席。

Javascript（jQuery）：

<script type="text/javascript">
    $(function(){
        $('.your-container').mixItUp();
    });
</script>

此外，您需要将要过滤的项目包装在另一个容器中，并使用＆＃34; display：none＆＃34 ;;将其设置为隐藏这将是MixItUp用于动画和布局项目的包装器。最后，删除你的盒子类（我评论你所有的样式，绝对定位打破了MixItUp）并让插件使用＆＃34; inline-block＆＃34;自动重新排列所有内容：

样式表（CSS）：

<style type="text/css">
    .your-container .mix {display:none;}
</style>

希望这对你有所帮助。仔细阅读MixItUp文档： https://mixitup.kunkalabs.com/learn/tutorial/get-started/

我是MixItUp的忠实粉丝，发现它非常容易使用。如果你只需要精益和简单的东西，那么比同位素好得多。

Answer 2

您甚至可以使用图库的弹出窗口：

HTML

<div id="Container" class="container>
<li class="mix category-1"><img src="/image/1.jpg" longdesc="#1" onclick="jQuery_modal(this)" alt=""></li>
<li class="mix category-1"><img src="/image/2.jpg" longdesc="#2" onclick="jQuery_modal(this)" alt=""></li>
.….
</ul>
</div>

jQuery_modal.js

function jQuery_modal(obj){
if ( 0 == jQuery(obj).attr('longdesc').indexOf('#') ){
jQuery(jQuery(obj).attr('longdesc')).dialog({ height: 600, width: 700, modal: true });
}
else{
jQuery("#dialog-modal").text(jQuery(obj).attr('longdesc'));
jQuery("#dialog-modal").dialog({ height: 240, modal: true });
}
}

Demo, take a look

在图库中使用MixItUp插件

2 个答案: