在图片库中使用 MixItUp 插件答案

【问题标题】：Using MixItUp Plugin in image gallery在图片库中使用 MixItUp 插件
【发布时间】：2014-03-10 22:16:26
【问题描述】：

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

我拥有的是：一系列方形 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”类）。

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

【问题讨论】：

您将不得不向我们提供更多信息：您目前如何尝试对图像进行排序/过滤？从你的 HTML sn-p 中几乎没有什么可说的
jsfiddle.net/cwaYA/6 - 所以我有 3 个图像类别，我刚刚为一个类别中的每个图像制作了相同的图像。我试图拥有它，以便您可以过滤每个图像类别 - 即在这个 jsfiddle 的情况下，它只会显示：所有 9 个缩略图或 3 个缩略图，具体取决于所选类别。

标签： html css plugins gallery

【解决方案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>

您的小提琴缺少过滤控件（非常重要！），并且奇怪地缺少使整个事情运行的“间隙” div 和 javascript。

Javascript (jQuery)：

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

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

样式表（CSS）：

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

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

我是 MixItUp 的忠实粉丝，我发现它开箱即用，非常容易使用。如果您只需要精简和简单的东西，这比 Isotope 好得多。

【讨论】：

【解决方案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

【讨论】：