Я пытался сделать по данному коду из видео
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>