Question

如何在网站中为展示创建过滤器？
有点像分类。

我想建立一个展示我照片的网站。但是，我不知道如何创建具有过滤功能的展示，有人可以帮忙吗？

Answer 1

我使用Isotope在我的投资组合中对我的网站进行排序。这个概念是在我的项目类中设置一些类别，并使用排序按钮我可以在wordpress网站或单页网站上显示。

框架=＆gt; http://isotope.metafizzy.co/

询问您是否需要一些帮助来设置它：p

Answer 2

我在网上搜索了＃34;用图片对过滤器进行分类＆＃34;并找到了这个JSFiddle。希望它可以帮到你。

它使用HTML和JavaScript。

请参阅链接：http://jsfiddle.net/davidThomas/Ebrnj/

<ol id="controls">
    <li><a href="#" id="web">Web</a></li>
    <li><a href="#" id="canvas">Canvas</a></li>
    <li><a href="#" id="print">Print</a></li>
    <li><a href="#" id="all">All</a></li>
</ol>
<div id="gallery">
    <img src="http://davidrhysthomas.co.uk/img/dexter.png" class="web" />
    <img src="http://davidrhysthomas.co.uk/img/mandark.png" class="canvas" />
    <img src="http://davidrhysthomas.co.uk/img/drPooh2.png" class="print" />
</div>

$('#controls li a').click(
    function(e){
        e.preventDefault();
        var that = this,
            $that = $(that),
            id = that.id,
            gallery = $('#gallery');
        if (id == 'all') {
            gallery.find('img:hidden').fadeIn(1000);
        }
        else {
            gallery.find('img.' + id + ':hidden').fadeIn(1000);
            gallery.find('img').not('.' + id).fadeOut(1000);
        }
    });

祝你好运!!如果您对此有任何疑问，请告诉我们。

如何在网站中创建过滤器

2 个答案: