要根据标准显示的图库图像

Gallery images to be displayed based on a criteria

本文关键字：图像 显示 标准      更新时间：2023-09-26

我有一组名称为NH-1,NH-2,NH-3，…另有一套NS-1、NS-2、NS-3，....显示为画廊图像，每行有三个图像。现在，我将在左侧创建一个div，用于显示指向类别的链接。假设这个div有类别NH和NS。假设当我点击NH时，图库中的图像应该被过滤，只有带有前缀NH的图像应该显示，当我点击NS时，所有带有NS作为前缀的图像都应该显示。默认情况下，如果不单击任何内容，则应该显示所有图像。我怎么能做到呢?

你已经得到了你的数据结构，只需要考虑方法

首先，你需要抓住类别

上的click函数
$("category selector").click(function(){
//logic here to call a function to show images and pass prefix
showImageWithPrefix(get NH or NS,send image count accordingly);
});
function showImageWithPrefix(prefix,Count)
{
//now you can show the images using a for loop just by appending `'-`' and
 `image extension` to the `image name prefix`
}

你可以实现一个javascript 

function showImages(var type) {
  // Based on the type of image, you can display the images as gallery
  // For each image element you want to add you can use the following code. Define a CSS class called as .thumbnail to show the image gallery in thumbnail size.
  $('#content').prepend('<img id="imgid" src="imgfile.jpg" class="thumbnail"/>')
}

在链接的onclick事件中调用showImages(")方法

相关文章：