0

Как мне сделать, чтобы плавно отображалась следующая фотография?(и предыдущая) при клике на next вызывается функция $next.click, в общем по коду видно

(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/gallery/big/01.jpg',
  'images/gallery/big/02.jpg',
  'images/gallery/big/03.jpg',
  'images/gallery/big/04.jpg',
  'images/gallery/big/05.jpg',
  'images/gallery/big/06.jpg',
  'images/gallery/big/07.jpg',
  'images/gallery/big/08.jpg',
  'images/gallery/big/09.jpg',
  'images/gallery/big/10.jpg',
  'images/gallery/big/11.jpg',
  'images/gallery/big/12.jpg',
  'images/gallery/big/13.jpg',
  'images/gallery/big/14.jpg',
  'images/gallery/big/15.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(200);
  }

  $overlay.click(closeLigtbox);

  $links.click(function(e) {
    e.preventDefault();
    targetImg = $(this).attr('href');
    liIndex = $(this).parent().index();
    replaceImg(targetImg);
    $lightbox.fadeIn(200);
  });

   $next.click( function() {  
    if ( (liIndex + 1) < $li.length ) { 
      targetImg = getHref(liIndex + 1);
      liIndex ++;
    } else {
      targetImg = getHref(0);
      liIndex = 0;
    }
    $lightbox.find('img').attr('src', 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);
</header>
					<div class="lightbox">
			      <div class="overlay"></div>
			      <figure>
			        <span class="prev">← prev</span>
			        <span class="next">next →</span>
			        <img src="#">
			      </figure>
			    </div><!-- //lightbox -->
			  </div><!-- //img-gallery -->
			
			<div class="gallery">
			   
			    <ul class="img-list">
			      <li>
			        <a class = "photo" href="images\gallery\big\01.jpg"><img src="images\gallery\small\01.jpg" width="150" height="100" alt=""></a>
			      </li>
			      <li>
			         <a class = "photo" href="images\gallery\big\02.jpg"><img src="images\gallery\small\02.jpg" width="150" height="100" alt=""></a>
			      </li>
			      <li>
			       <a class = "photo" href="images\gallery\big\03.jpg"><img src="images\gallery\small\03.jpg" width="150" height="100" alt=""></a>
			      </li>
			      <li>
			        <a class = "photo" href="images\gallery\big\04.jpg"><img src="images\gallery\small\04.jpg" width="150" height="100" alt=""></a>
			      </li>
			      <li>
			        <a class = "photo" href="images\gallery\big\05.jpg"><img src="images\gallery\small\05.jpg" width="150" height="100" alt=""></a>
			      </li>
			     
			         <li>
			        <a class = "photo" href="images\gallery\big\06.jpg"><img src="images\gallery\small\06.jpg" width="150" height="100" alt=""></a>
			      </li>
			    
			      <li>
			       <a class = "photo" href="images\gallery\big\07.jpg"><img src="images\gallery\small\07.jpg" width="150" height="100" alt=""></a>
			      </li>
			      <li>
			        <a class = "photo" href="images\gallery\big\08.jpg"><img src="images\gallery\small\08.jpg" width="150" height="100" alt=""></a>
			      </li>
			      <li>
			        <a class = "photo" href="images\gallery\big\09.jpg"><img src="images\gallery\small\09.jpg" width="150" height="100" alt=""></a>
			      </li>
			      <li>
			        <a class = "photo" href="images\gallery\big\10.jpg"><img src="images\gallery\small\10.jpg" width="150" height="100" alt=""></a>
			      </li>
			         <li>
			        <a class = "photo" href="images\gallery\big\11.jpg"><img src="images\gallery\small\11.jpg" width="150" height="100" alt=""></a>
			      </li>
			      <li>
			         <a class = "photo" href="images\gallery\big\12.jpg"><img src="images\gallery\small\12.jpg" width="150" height="100" alt=""></a>
			      </li>
			      <li>
			       <a class = "photo" href="images\gallery\big\13.jpg"><img src="images\gallery\small\13.jpg" width="150" height="100" alt=""></a>
			      </li>
			      <li>
			        <a class = "photo" href="images\gallery\big\14.jpg"><img src="images\gallery\small\14.jpg" width="150" height="100" alt=""></a>
			      </li>
			      <li>
			        <a class = "photo" href="images\gallery\big\15.jpg"><img src="images\gallery\small\15.jpg" width="150" height="100" alt=""></a>
			      </li>
			      
			    </ul>
			</div>


			  <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
			  <script src="functions.js"></script>

3
  • На сколько понял, ты просто заменяешь src у img, что ты собрался анимировать?)
    – kost1k
    8 фев 2019 в 14:09
  • А как можно сделать так, чтобы изображение пропадало, и появлялось плавно при нажатии на next(prev) 8 фев 2019 в 14:37
  • Размещать каждое изображение в блоке и анимировать показ/скрытие следующего блока. Сейчас попробую набросать простенький код ля примера.
    – kost1k
    8 фев 2019 в 15:14

1 ответ 1

0

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

var $slider = $('.gallery'),
    images = $slider.find('img'),
    btnPrev = '.prev',
    btnNext = '.next';

var i = 0;

function prev() {
    images.eq(i).removeClass('showed');
    i--;

    if (i < 0) {
        i = images.length - 1;
    }

    images.eq(i).addClass('showed');
}

function next() {
    images.eq(i).removeClass('showed');
    i++;

    if (i >= images.length) {
        i = 0;
    }

    images.eq(i).addClass('showed');
}

$(document).on('click', btnPrev, prev);
$(document).on('click', btnNext, next);
.gallery {
    width: 300px;
    margin: 0 auto;
    text-align: center;
}

.photos {
    position: relative;
    height: 150px;
}

.photos img {
    width: 100%;
    position: absolute;
    left: 0;
    opacity: 0;
    transition: opacity 1s;
}

.photos img:nth-child(1) {
  background-color: red;
}

.photos img:nth-child(2) {
  background-color: green;
}

.photos img:nth-child(3) {
  background-color: blue;
}

.photos img:nth-child(4) {
  background-color: yellow;
}

.photos img:nth-child(5) {
  background-color: purple;
}

.photos img.showed {
    opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="gallery">
  <div class="photos">
    <img src="images\gallery\big\01.jpg" class="showed" alt="1">
    <img src="images\gallery\big\02.jpg" alt="2">
    <img src="images\gallery\big\03.jpg" alt="3">
    <img src="images\gallery\big\04.jpg" alt="4">
    <img src="images\gallery\big\05.jpg" alt="5">
  </div>
  <div class="buttons">
    <input type="button" value="Назад" class="prev">
    <input type="button" value="Вперёд" class="next">
  </div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.