使用JavaScript的照片库

我正在尝试使用html css和javascript创建一个简单的照片库。在我的项目顶部，我有5个缩略图，其中包含5幅图像。在我的缩略图下面有一个div，它的大小与原始图像的大小相同。我希望当用户单击任何缩略图照片时，在缩略图下方的div中显示原始大小的照片。我已经创建了项目的开始，但我不知道如何完成它。如果有人能帮我完成我必须添加的代码（css和JS），我将不胜感激

谢谢

HTML:

---

下面是一个示例实现，您可以将其用作解决问题的指南

我在这里使用div代替图像，因为我没有可链接的对象

var preview=document.getElementById（'假装视图'）；
var images=document.getElementById（'simoke_images'）；
var-thumbnails=document.querySelectorAll（“#假装图像>div”）；
缩略图。forEach（函数（elem）{
elem.onclick=onclick.bind（null，elem）；
});
函数onClick（elem，e）{
clearPreview（）；
addToPreview（elem）；
}
函数clearPreview（）{
var elem=document.querySelector（'.preview'）；
if（elem）{
elem.className=elem.className.replace（'preview'，''）；
图像。附加子对象（elem）；
}
}
功能addToPreview（elem）{
elem.className='preview'；
预览。附加子元素（elem）；
}

#假装图像>div{
显示：内联块；
宽度：50px；
高度：50px；
光标：指针；
左边距：20px；
}
#假装预览{
高度：200px；
宽度：300px；
边框：10px纯黑；
保证金：30像素自动；
}
#a{
背景色：黑色；
}
#b{
背景颜色：蓝色；
}
#c{
背景颜色：绿色；
}
#d{
背景颜色：粉红色；
}
.预览{
高度：200px；
宽度：300px；
}

---

使用Photobox-感谢您的回答。你的代码正在工作！干杯

div id="img-thumbnails">
  <img src="assets/imgs/img-01.jpg">
  <img src="assets/imgs/img-02.jpg">
  <img src="assets/imgs/img-03.jpg">
  <img src="assets/imgs/img-04.jpg">
  <img src="assets/imgs/img-05.jpg">
</div>

 <div id="img-original">

 </div>

#img-thumbnails {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

#img-thumbnails img {
    width:200px;
    height:100px;
    cursor: pointer;
    margin-left:20px;
}

#img-original {
    height:500px;
    width:800px;
    border:10px solid black;
    margin:30px auto;
}