Перейти к содержимому

Фотография
- - - - -

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


  • Вы не можете создать новую тему
  • Авторизуйтесь для ответа в теме
В этой теме нет ответов

#1 vilivonka

vilivonka

    Прохожий

    Топикстартер
  • Новичок
  • 0
    2 сообщ.

Отправлено 09 Апрель 2018 в 19:02

----------------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[i] = new Image();
imgs[i].src = imgSources[i];
 
}
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);
   });

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


  • 0

Спонсор



Похожие темы Свернуть

Статистика

Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 скрытых пользователей