Javascript-форум - галерея изображений

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - галерея изображений (https://javascript.ru/forum/jquery/75173-galereya-izobrazhenijj.html)

галерея изображений

Доброе утро,уважаемые форумчане!
возникла такая проблема. У меня есть несколько контейнеров div с одинаковыми классами. В каждом этом div есть свои картинки. Как же мне осуществить функцию,которая при клике на определенный div будет показывать свои картинки в классе lightbox?...

<div class="contain">
<img class="imag" src="1.jpg"></img>
<img class="imag" src="2.jpg"></img>
<img class="imag" src="3.jpg"></img>
</div>

<div class="contain">
<img class="imag" src="4.jpg"></img>
<img class="imag" src="5.jpg"></img>
<img class="imag" src="6.jpg"></img>
</div>


 <div class="lightbox">

	<div class="overlay">
 <figure> <img class="append_image" src="#">  
</figure>
    </div></div>

Я пытался сделать по данному коду из видео https://www.youtube.com/watch?v=kS4sjNV_f2s ,но тогда у меня показываются первые картинки каждого блока при переключении.
вот их код:

(function($) {
  var $li = $('.img-list').find('> li'),
      $links = $li.find('> a'),
      $lightbox = $('.lightbox'),
      $next = $('.next'),
      $prev = $('.prev'),
      $overlay = $('.overlay'),
      liIndex,
      targetImg;
  
  //preload images
  var imgSources = [
  'images/img-1-lg.jpg',
  'images/img-2-lg.jpg',
  'images/img-3-lg.jpg',
  'images/img-4-lg.jpg'
  ];
 
  var imgs = [];
  for (var i = 0; i < imgSources.length; i++) {
    imgs[i] = new Image();
    imgs[i].src = imgSources[i];
  }
 
  function replaceImg(src) {
    $lightbox.find('img').attr('src', src);
  }
 
  function getHref(index) {
    return $li.eq(index).find('>a').attr('href');
  }
 
  function closeLigtbox() {
    $lightbox.fadeOut();
  }
 
  $overlay.click(closeLigtbox);
 
  $links.click(function(e) {
    e.preventDefault();
    targetImg = $(this).attr('href');
    liIndex = $(this).parent().index();
    replaceImg(targetImg);
    $lightbox.fadeIn();
  });
 
   $next.click( function() {  
    if ( (liIndex + 1) < $li.length ) { 
      targetImg = getHref(liIndex + 1);
      liIndex ++;
    } else {
      targetImg = getHref(0);
      liIndex = 0;
    }
    replaceImg(targetImg);
  });
 
   $prev.click( function() {  
    if ( (liIndex) > 0 ) { 
      targetImg = getHref(liIndex - 1);
      liIndex --;
    } else {
      targetImg = getHref($li.length - 1);
      liIndex = $li.length - 1;
    }
    replaceImg(targetImg);
  });
  
})(jQuery);

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery Image Gallery</title>
  <link rel="stylesheet" href="normalize.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
 
  <div class="gallery">
   
    <ul class="img-list">
      <li>
        <a href="images/img-1-lg.jpg"><img src="images/img-1-sm.jpg"></a>
      </li>
      <li>
         <a href="images/img-2-lg.jpg"><img src="images/img-2-sm.jpg"></a>
      </li>
      <li>
        <a href="images/img-3-lg.jpg"><img src="images/img-3-sm.jpg"></a>
      </li>
      <li>
        <a href="images/img-4-lg.jpg"><img src="images/img-4-sm.jpg"></a>
      </li>
    </ul><!-- //img-list -->
    
    <div class="lightbox">
      <div class="overlay"></div>
      <figure>

Цитата:

Сообщение от Menshakovich

$next = $('.next'), $prev = $('.prev'),

где эти элементы?

я сюда забыл прописать.но они вообще есть. суть в том,что при нескольких контейнерах я не знаю,как раскрутить данный код

Menshakovich,

$links.click(function(e) {
    e.preventDefault();
    targetImg = $(this).attr('href');
*!*
    $li = $(this).parent().find('> li');
*/!*
    liIndex = $(this).parent().index();
    replaceImg(targetImg);
    $lightbox.fadeIn();
  });