Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.09.2018, 09:26
Аспирант
Отправить личное сообщение для Menshakovich Посмотреть профиль Найти все сообщения от Menshakovich
 
Регистрация: 11.06.2018
Сообщений: 31

галерея изображений
Доброе утро,уважаемые форумчане!
возникла такая проблема. У меня есть несколько контейнеров 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>
Ответить с цитированием
  #2 (permalink)  
Старый 10.09.2018, 09:32
Аспирант
Отправить личное сообщение для Menshakovich Посмотреть профиль Найти все сообщения от Menshakovich
 
Регистрация: 11.06.2018
Сообщений: 31

Я пытался сделать по данному коду из видео 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>
Ответить с цитированием
  #3 (permalink)  
Старый 10.09.2018, 10:33
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,112

Сообщение от Menshakovich
$next = $('.next'), $prev = $('.prev'),
где эти элементы?
Ответить с цитированием
  #4 (permalink)  
Старый 10.09.2018, 10:43
Аспирант
Отправить личное сообщение для Menshakovich Посмотреть профиль Найти все сообщения от Menshakovich
 
Регистрация: 11.06.2018
Сообщений: 31

я сюда забыл прописать.но они вообще есть. суть в том,что при нескольких контейнерах я не знаю,как раскрутить данный код
Ответить с цитированием
  #5 (permalink)  
Старый 10.09.2018, 11:16
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,112

Menshakovich,
$links.click(function(e) {
    e.preventDefault();
    targetImg = $(this).attr('href');
*!*
    $li = $(this).parent().find('> li');
*/!*
    liIndex = $(this).parent().index();
    replaceImg(targetImg);
    $lightbox.fadeIn();
  });
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
DLE загрузка изображений через дополнительное поле armn555 Общие вопросы Javascript 1 23.08.2017 10:17
DLE загрузка изображений через дополнительное поле armn555 Элементы интерфейса 0 18.08.2017 11:08
Резиновая галерея изображений stvord Элементы интерфейса 2 31.08.2011 14:43
галерея - просмотр изображений tybys jQuery 6 26.06.2011 11:32
Скролл мини изображений I-Trap Элементы интерфейса 1 25.11.2009 22:03