проблема в галереи на jquery не "маштабируется" img

Статус
Закрыто для дальнейших ответов.

vilivonka

Новичок
Регистрация
09.04.2018
Сообщения
2
----------------html-------------------------------

<div class="gallery">
<ul class="img-list">
<li><a href="street/img1.jpg"><img class="pok" src="street/img1.jpg"></a></li>
<li><a href="street/img2.jpg"><img class="pok" src="street/img2.jpg"></a></li>
<li><a href="street/img3.jpg"><img class="pok" src="street/img3.jpg"></a></li>
<li><a href="street/img4.jpg"><img class="pok" src="street/img4.jpg"></a></li>
<li><a href="street/img5.jpg"> <img class="pok" src="street/img5.jpg"></a></li>
</ul>
<div class="lightbox">
<div class="overlay"></div>
<div class="box">
<figure>
<span class="prev">prev</span>
<span class="next">next</span>
<img class="big" src="">

</figure>
</div>
</div>
</div>

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

------------------------------css------------------------

.lightbox{
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
padding: 25px 0;
overflow-y:scroll;
}
.overlay{
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(100, 0, 0, .8);
}

.big{

object-fit: cover;
max-height: 100%;
min-height: 100%;
height: 100%;
width: 100%;
margin: 0;
}
-------------------------jquery---------------------

var $li = $('.img-list').find('>li'),
$links = $li.find('>a'),
$lightbox = $('.lightbox'),
$overlay = $('.overlay'),
$prev = $('.prev'),
$next = $('.next'),
liIndex,
targetImg;



for(var i=0; i < imgSources.length; i++){
imgs = new Image();
imgs.src = imgSources;

}
function replaseImg(src){
$lightbox.find('img').attr('src', src);
}

function getHref(index){
return $li.eq(index + 1).find('>a').attr('href');
}

$links.click(function(event){
event.preventDefault();
liIndex = $(this).parent().index();
targetImg = $(this).attr('href');
replaseImg(targetImg);
$lightbox.fadeIn();
});
$overlay.click(function(){
$lightbox.fadeOut();
});
$prev.click(function(){
if (liIndex > 0){

targetImg =getHref(liIndex -1);
liIndex --;
} else{

targetImg = getHref($li.length - 1 );
liIndex = $li.length - 1;
}

replaseImg(targetImg);
});

$next.click(function(){
if((liIndex + 1)<$li.length){
targetImg = getHref(liIndex + 1);
liIndex ++;
} else{
targetImg = getHref(0);
liIndex = 0;
}

replaseImg(targetImg);
});


проблема в том что при нажатие на миниатюру изображения вертикальные(вытянутые в длину) не умещаются в высоту экрана и появляется скролинг, нужно сделать как-то чтобы вертикальные изображения влазили в высоту экрана. Галерея должна быть адаптивной ни каких размеров в пикселях.
Заранее спс всем кто отзовется.
 
Статус
Закрыто для дальнейших ответов.
Верх Низ