Popup Image Gallery с помощью JQuery

Question

Я работаю над сайтом, который содержит галерею. Я сделал свой код в HTML и CSS, чтобы настроить форму моей галереи на странице. Я хотел бы сделать всплывающее окно для каждого изображения в галерее после щелчка! Мои знания в JQuery очень просты, поэтому любая помощь была бы высоко оценена.

<div class="showcase"> 
    <ul> 
     <li class="current"><a href="Gallery/Pic1.jpg"><img 
    src="Thumb/Pic1.jpg" alt="" height="240" width="190"/></a></li> 
     <li><a href="Gallery/Pic2.jpg"><img src="Thumb/Pic2.jpg" 
      alt="" height="240" width="190"/></a></li> 
     <li><a href="Gallery/Pic3.jpg"><img src="Thumb/Pic3.jpg" 
      alt="" height="240" width="190"/></a></li> 
     <li><a href="Gallery/Pic4.jpg"><img src="Thumb/Pic4.jpg" 
      alt="" height="240" width="190"/></a></li> 
     <li><a href="Gallery/Pic5.jpg"><img src="Thumb/Pic5.jpg" 
      alt="" height="240" width="190"/></a></li> 
    </ul> 
</div> 

My Style Sheet:

.showcase 
{ 
    margin: 0 0 25px 0; 
} 

.showcase ul 
{ 
    list-style: none; 
} 

.showcase ul li 
{ 
    position: relative; 
    display: inline-block; 
    background-color: grey; 
    width: 200px; 
    height: 230px; 
    margin: 0 0 25px 25px; 
    box-shadow: inset 0px 0px 2px 1px #ffffff, 0px 2px 4px 2px rgba(98, 67, 36, 
    0.5); 
} 

.showcase ul li.current 
{ 
    margin-left: 0;`` 
} 

.showcase ul li a 
{ 
    position: absolute; 
    top: 20px; 
    left: 20px; 
} 

Answer 1

Этот Jquery помог мне в прошлом

Simple Modal Popup Window

инструкции являются довольно simple.You, возможно, придется добавить уникальный идентификатор для каждого вещь, хотя. Образец Jquery настроен для вызова одного. Вам нужно будет изменить его для динамического обновления для каждого изображения.