我的flex画廊的简单灯箱

Question

我已经制作了一个带有一堆照片的灵活画廊，我想要做的是制作一个简单的灯箱（我喜欢这个术语），当点击一个图像时，它会显示得更大。不需要next或prev按钮。

我想用jquery做这个，但请记住我的js技能是来自一个完整的新手，提前谢谢！

＆＃13;

＆＃13;

.photogallery__maincontainer{  width:1300px; height:580px; ; flex:0 0 auto; display:flex; flex-flow:row; flex-wrap:wrap; justify-content:flex-start;}

.photogallery__viewer{ width:55%; height:100%; position:relative; display:flex; }

.photogallery__viewer__image{max-width:80%; height:auto; margin:auto; overflow:hidden;}

.photogallery{
	
	width:42%; 
	height:93%; 
	position:relative; 
	display:flex; 
	flex-wrap:wrap; 
	justify-content:flex-start; 
	align-content:flex-start; 
	overflow:auto;
	
}


.photogallery__image{
	background-image: url('images/20170819_194526.jpg'); 
	background-position: center;  
	background-repeat: no-repeat; 
	background-size:contain; 
	max-height:20%;  
	min-height:20%; 
	flex:0 0 calc(25% - 15px);  
	margin-right:15px; 
	margin-bottom:35px; 
	cursor:pointer;
}

.photogallery__image:hover{
	opacity:0.8;
}

.close{width:3%; cursor:pointer; color:rgba(255, 255, 255, 0.7); font-family: 'Nunito', sans-serif; flex:0 0 3%; text-align:center; display:table;  font-size:25px; font-weight:600; }

.close:hover{color:rgba(255, 255, 255, 0.5);}

＆＃13;

<div class="photogallery__maincontainer" style="">
  <span style="display:none; cursor:pointer; color:rgba(255, 255, 255, 0.5); font-family: 'Nunito', sans-serif; font-size:50px; font-weight:600; position:absolute; bottom:5px; right:320px;">&#129087;</span>
  
    <div class="photogallery__viewer" style="">
	  <img class="photogallery__viewer__image" src="images/IMG-20170610-WA0025.jpg" style="">
	</div>
	<div class="photogallery" style="">
	  <div class="photogallery__image" style="background-image: url('images/IMG-20170610-WA0025.jpg');"></div>
	  <div class="photogallery__image" style="background-image: url('images/20170819_194526.jpg');"></div>
	  <div class="photogallery__image" style="background-image: url('images/IMG-20170610-WA0040.jpg');"></div>
	  <div class="photogallery__image" style="background-image: url('images/IMG-20170902-WA0031.jpg');"></div>
	  <div class="photogallery__image" style="background-image: url('images/IMG-20170516-WA0023.jpg');"></div>
	  <div class="photogallery__image" style="background-image: url('images/IMG-20170610-WA0017.jpg');"></div>
	  <div class="photogallery__image" style="background-image: url('images/20170812_181516.jpg');"></div>
	  <div class="photogallery__image" style="background-image: url('images/20170822_011703.jpg');"></div>
	  <div class="photogallery__image" style="background-image: url('images/20170815_203103.jpg');"></div>
	  <div class="photogallery__image" style="background-image: url('images/IMG-20170516-WA0011.jpg');"></div>
	  <div class="photogallery__image" style="background-image: url('images/IMG-20170610-WA0030.jpg');"></div>
	  <div class="photogallery__image" style="background-image: url('images/IMG-20170610-WA0047.jpg');"></div>
	  <div class="photogallery__image" style="background-image: url('images/IMG-20170610-WA0038.jpg');"></div>
	  <div class="photogallery__image" style="background-image: url('images/IMG-20170829-WA0017.jpg');"></div>
	  <div class="photogallery__image" style="background-image: url('images/IMG-20170610-WA0019.jpg');"></div>
	  <div class="photogallery__image" style="background-image: url('images/IMG-20170430-WA0022.jpg');"></div>
	  <div class="photogallery__image" style="background-image: url('images/IMG-20170527-WA0002.jpg');"></div>
	  <div class="photogallery__image" style="background-image: url('images/IMG_20170823_222106_761.jpg');"></div>
	  <div class="photogallery__image" style="background-image: url('images/20170811_182103.jpg');"></div>
	  <div class="photogallery__image" style="background-image: url('images/20170522_124602.jpg');"></div>
	  <div class="photogallery__image" style="background-image: url('images/20170522_112958.jpg');"></div>
      <div class="photogallery__image" style="background-image: url('images/');"></div>
	  <div class="photogallery__image" style="background-image: url('images/');"></div>
	  <div class="photogallery__image" style="background-image: url('images/');"></div>
	  <div class="photogallery__image" style="background-image: url('images/');"></div>
	  <div class="photogallery__image" style="background-image: url('images/');"></div>
	  <div class="photogallery__image" style="background-image: url('images/');"></div>
	  <div class="photogallery__image" style="background-image: url('images/');"></div>
	  <div id="last" class="photogallery__image" style="background-image: url('images/');"></div>
  </div>
  <span class="close" style="">X</span>
  
  </div>

＆＃13;

＆＃13;

＆＃13;