Question

尝试将投资组合库添加到我正在制作的自定义wp主题中。我已经筋疲力尽，试图寻找甚至可以修改的解决方案和插件。我认为我找到解决方案的一个问题是，我不完全确定哪些搜索条件可以帮助我找到类似于我想要实现的内容。

截至目前，我的导航有以下div

<div id="tags" role="navigation">
<p>
<a class="portrait" href="#portrait">Portrait</a> / 
<a class="landscape" href="#landscape">Landscape</a> / 
<a class="sports" href="#sports">Sports</a> / 
<a class="nature" href="#nature">Nature</a> / 
<a class="weddings" href="#weddings">Weddings</a> / 
<a class="active" href="#">All</a>
</p>
</div>

在我的导航下面是我的图片div。我想要做的是能够从图像导航中选择一个类别，只显示那些特定标记的图像。我不想要的是为该标签/选择打开一个新页面。我想让图像重新组织或淡入/淡出所选的导航。

我确定那里有一个类似于我正在寻找的脚本或插件。或者对如何最好地实现这一点提出一些指导/建议将不胜感激。

提前致谢。

Answer 1

Quicksand jquery插件会为你做到这一点：

http://razorjack.net/quicksand/

同位素插件：

http://isotope.metafizzy.co/

或者使用一些css3：

http://tympanus.net/Tutorials/CSS3FilterFunctionality/

Answer 2

假设你有一个ID为'tagImages'的div，给每个图像一个与锚类同名的数据属性，这个代码应该有效。

预期的HTML

<div id="tagImages">
    <img src="/location/image.jpg" data-category="portrait" />
    <img src="/location/image.jpg" data-category="nature" />
    <img src="/location/image.jpg" data-category="nature" />
    <img src="/location/image.jpg" data-category="weddings" />
</div>

jQuery代码

$('#tags').on('click', 'a', function(e) {
    e.preventDefault();
    var cat = $(this).attr('class'),
        $tagImg = $('#tagImages').find('img');
    $tagImg.hide();
    if (cat === 'active') {
        $tagImg.show();
    } else {
        $tagImg.each(function() {
            if ($(this).data('category') == cat) {
                $(this).show();
            }
        });
    }
});

这是一个jsFiddle Example，可以展示您的要求。

类别/标签选择器

2 个答案: