1

尝试将投资组合库添加到我正在制作的自定义 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。我想做的是能够从图像导航中选择一个类别，并且只显示那些特别标记的图像。我不想要的是为该标签/选择打开一个新页面。我想让图像重新组织或淡入/淡出所选导航。

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

提前致谢。

4

2 回答 2

0

假设你有一个 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 示例，演示了您的要求。

于 2012-12-21T01:31:10.770 回答
0

Quicksand jquery 插件将为您做到这一点：

http://razorjack.net/quicksand/

同位素插件：

http://isotope.metafizzy.co/

或者使用一些css3：

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

于 2012-12-21T01:18:30.727 回答