Javascript 如何让一个只使用Css的灯箱在一个页面上运行多个图像？

我可以将仅CSS的lightbox功能应用于单个页面上的不同图像阵列吗

我提供了一个示例，其中显示了3个不同的图像，并应用了lightbox函数；然而，一旦lightbox被提示，所有图像似乎只抓取列出的第一个图像

请参见下面的代码段以获取参考：

$（'.pic>img'）。每个（函数（）{
var srcToCopy=$（this.attr（'src'）；
$（this）.closest（'.container'）.find（'.imgsrc'）.attr（'src'，srcToCopy）；
});
.pic，
#imgsrc{
显示：内联块；
}
img{
宽度：100px
}
a{
显示：内联块；
线高：0；
}
.集装箱{
显示：块；
宽度：100%；
线高：0；
}
.定制灯箱{
最高：0%；
底部：0%；
框大小：边框框；
位置：固定；
左：0；
右：0；
背景：rgba（0,0,0,0.7）；
z指数：-5；
不透明度：0；
}
.customlightbox imgwrap{
宽度：100%；
身高：100%；
填充：20px；
框大小：边框框；
位置：相对位置；
文本对齐：居中；
}
.定制灯箱img{
宽度：自动；
保证金：自动；
最大宽度：100%；
最大高度：100%；
不透明度：0；
位置：相对位置；
最高：50%；
转化：translateY（-50%）；
}
#自定义lightbox控件{
框大小：边框框；
位置：固定；
高度：50px；
宽度：50px；
顶部：-50px；
右：-3px；
z指数：5；
左边框：2倍纯白；
底部边框：2件纯白；
不透明度：.7；
}
#关闭灯箱{
显示：块；
位置：绝对位置；
溢出：隐藏；
高度：30px；
宽度：30px；
右：10px；
顶部：10px；
-webkit变换：旋转（45度）；
-moz变换：旋转（45度）；
-ms变换：旋转（45度）；
-o变换：旋转（45度）；
变换：旋转（45度）；
}
#关闭customlightbox:之前{
内容：“；
显示：块；
位置：绝对位置；
高度：0px；
宽度：2倍；
左：14px；
排名：0；
背景：白色；
边界半径：2px；
}
#关闭customlightbox:之后{
内容：“；
显示：块；
位置：绝对位置；
宽度：0px；
高度：2倍；
顶部：14px；
左：0；
背景：白色；
边界半径：2px；
}
.customlightbox:目标{
z指数：4；
不透明度：1；
显示：内联块；
}
.customlightbox：目标图像{
不透明度：1；
}
.customlightbox:target~#customlightbox控件{
顶部：-3px；
}
.customlightbox:target~#customlightbox控件#关闭customlightbox:after{
宽度：30px；
}
.customlightbox:target~#customlightbox控件#关闭customlightbox:before{
高度：30px；
}
.lb动画{
-webkit过渡：0.5s易入易出；
-moz转换：0.5s易入易出；
-ms转换：0.5s易进易出；
-o型过渡：0.5s缓进缓出；
过渡：0.5s缓进缓出；
}
您只需为lightbox创建一个div，并根据图像的单击替换图像源


$（'.pic>img'）。单击（函数（）{
var srcToCopy=$（this.attr（'src'）；
$（'body'）.find（'imgsrc'）.attr（'src'，srcToCopy）；
});
.pic，
#imgsrc{
显示：内联块；
}
img{
宽度：100px
}
a{
显示：内联块；
线高：0；
}
.集装箱{
显示：块；
宽度：100%；
线高：0；
}
.定制灯箱{
最高：0%；
底部：0%；
框大小：边框框；
位置：固定；
左：0；
右：0；
背景：rgba（0,0,0,0.7）；
z指数：-5；
不透明度：0；
}
.customlightbox imgwrap{
宽度：100%；
身高：100%；
填充：20px；
框大小：边框框；
位置：相对位置；
文本对齐：居中；
}
.定制灯箱img{
宽度：自动；
保证金：自动；
最大宽度：100%；
最大高度：100%；
不透明度：0；
位置：相对位置；
最高：50%；
转化：translateY（-50%）；
}
#自定义lightbox控件{
框大小：边框框；
位置：固定；
高度：50px；
宽度：50px；
顶部：-50px；
右：-3px；
z指数：5；
左边框：2倍纯白；
底部边框：2件纯白；
不透明度：.7；
}
#关闭灯箱{
显示：块；
位置：绝对位置；
溢出：隐藏；
高度：30px；
宽度：30px；
右：10px；
顶部：10px；
-webkit变换：旋转（45度）；
-moz变换：旋转（45度）；
-ms变换：旋转（45度）；
-o变换：旋转（45度）；
变换：旋转（45度）；
}
#关闭customlightbox:之前{
内容：“；
显示：块；
位置：绝对位置；
高度：0px；
宽度：2倍；
左：14px；
排名：0；
背景：白色；
边界半径：2px；
}
#关闭customlightbox:之后{
内容：“；
显示：块；
位置：绝对位置；
宽度：0px；
高度：2倍；
顶部：14px；
左：0；
背景：白色；
边界半径：2px；
}
.customlightbox:目标{
z指数：4；
不透明度：1；
显示：内联块；
}
.customlightbox：目标图像{
不透明度：1；
}
.customlightbox:target~#customlightbox控件{
顶部：-3px；
}
.customlightbox:target~#customlightbox控件#关闭customlightbox:after{
宽度：30px；
}
.customlightbox:target~#customlightbox控件#关闭customlightbox:before{
高度：30px；
}
.lb动画{
-webkit过渡：0.5s易入易出；
-moz转换：0.5s易入易出；
-ms转换：0.5s易进易出；
-o型过渡：0.5s缓进缓出；
过渡：0.5s缓进缓出；
}

答案很好。现在效果很好。谢谢