----------------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);
});
проблема в том что при нажатие на миниатюру изображения вертикальные(вытянутые в длину) не умещаются в высоту экрана и появляется скролинг, нужно сделать как-то чтобы вертикальные изображения влазили в высоту экрана. Галерея должна быть адаптивной ни каких размеров в пикселях.
Заранее спс всем кто отзовется.
<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);
});
проблема в том что при нажатие на миниатюру изображения вертикальные(вытянутые в длину) не умещаются в высоту экрана и появляется скролинг, нужно сделать как-то чтобы вертикальные изображения влазили в высоту экрана. Галерея должна быть адаптивной ни каких размеров в пикселях.
Заранее спс всем кто отзовется.