如何实现复选框或面向类别的照片库

我不确定这个问题的最佳表达方式，因此Google为什么要让我挂。如何实现复选框或面向类别的照片库

本质上我想创建一个照片库（例如）30张图片和这30张图片，他们可以放入3个不同的类别。

我希望用户能够点击复选框来显示或隐藏不同类别（和后续图片）或全部查看它们。

例如，照片库的左侧会有4个复选框。顶部框将是ALL，然后是1类，2类，3类。当您单击每个框时，只会显示那些“类型”的图像。

任何有关代码的提示（甚至是我应该寻找的代码类型，即CSS，Javascript，jQuery）都将不胜感激。谢谢！

2012-07-26 jamez14

你如何计划提供的图片吗？它们是否全部在页面加载时填充，然后隐藏，并且当您单击要淡入其中的复选框时？或者你是否用ajax驱动本网站，并计划向服务器发送查询以发回你想要的图像。另外，你将如何存储复选框和图像之间的关系？ ''其中类别被保存在图像的rel属性中，我们拆分rel并检查复选框值是否在图像rel的数组中。 – Ohgodwhy 2012-07-26 13:49:57

你有这么做的选择。 HTML，CSS，JQUERY和PHP可能是我的选择。 Ohgodwhy上面有一些好主意。 – azzy81 2012-07-26 13:55:44

@Ohgodwhy我希望他们都喜欢在页面加载时填充。这些缩略图当然会在点击后放大。这种关系就像你说的那样。 – jamez14 2012-07-26 13:57:04

的CSS - >

.chkbox-container{ 
    float:left; 
    width:95px; 
    border:1px solid #ccc;  
} 
.img-container{ 
    float:left; 
    width:300px; 
    border:1px solid #ccc;  
} 
img{ 
    display:inline-block; 
    width:90px; 
    height:75px; 
    padding:2px; 
    border:1px solid black; 
    display:none;  
}

了jQuery - >

$('.chkbox-container :radio').on('change', function(){ 
    var me = $(this); 
    $.each($('.img-container img'), function(i,v){ 
    var theCats = $(v).attr('rel'); 
    theCats = theCats.split(' '); 
    if($.inArray(me.val(), theCats)){ 
     $(v).show(); 
    }else{ 
     $(v).hide(); 
    } 

    });   
});

的HTML - >

<div class="chkbox-container"> 
    <input type="radio" name="catfilter[]" value="all" checked="checked"/> All<br/> 
    <input type="radio" name="catfilter[]" value="category1" /> Category 1<br/> 
    <input type="radio" name="catfilter[]" value="category2" /> Category 2<br/> 
    <input type="radio" name="catfilter[]"value="category3" /> Category 3<br/> 
</div> 
<div class="img-container"> 
    <img src="path.to/the/image/ext" rel="category1" /> 
    <img src="path.to/the/image/ext" rel="category2" /> 
    <img src="path.to/the/image/ext" rel="category3" /> 
</div>

Working jsFiddle for anyone that finds it useful.

来源

2012-07-26 14:32:46 Ohgodwhy

如何实现复选框或面向类别的照片库

回答

相关问题