jQuery плавные показ фотографии

105
24 сентября 2019, 02:00

Как мне сделать, чтобы плавно отображалась следующая фотография?(и предыдущая) при клике на 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>

Answer 1

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

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>

ПОСЛЕДНИЕ ВОПРОСЫ
Все вопросы
Подробнее о сайте standart-s.com.ua
ТОП-10
READ ALSO
Как приблизить только содержимое &lt;iframe&gt;
javascript

Как приблизить только содержимое <iframe>

Есть сайт с интерактивной картойСправа поиск и список магазинов(при нажатии на элемент списка, подсвечивается элемент карты), слева список...

 112
как сделать второй ряд &lt;li&gt;
javascript

как сделать второй ряд <li>

нужно чтобы li в строку было не больше 4 штук, после превышение лимита, новый li вставлялся во второй рядрядов не больше двух, width = 300px

 104
работа с базой данных в localstorageDB
javascript

работа с базой данных в localstorageDB

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

 130
WinLess перестал работать
javascript

WinLess перестал работать

Открываю winless а тут белый экран и дальше ничего не грузитсяПробовал переустанавливать его и перезапускать комп, но не помогло

 124