Управление высотой изображения в галерее Bootstrap-Lightbox

Я работаю на сайте художника, поэтому галереи действительно важны. Я использую Bootstrap для веб-сайта и Lightbox для Bootstrap-плагина для галерей. Он прекрасно настраивает ширину изображения на любое разрешение (я хочу сделать его максимально реагирующим). Но, как вы можете заметить, если вы нажмете на любую вертикальную фотографию (например, вторую во второй строке, второй столбец), когда она откроется, она больше, чем экран, и ее невозможно увидеть без прокрутки.Управление высотой изображения в галерее Bootstrap-Lightbox

Итак, я хочу избавиться от этой проблемы, настроив максимальную высоту изображения на высоту экрана. Но я не могу найти способ сделать это. Любые идеи для этого в простой форме? Я загрузил веб-сайт на сервер, чтобы вы могли видеть проблему: http://mural.uv.es/ivape2/es/galeria.html

Спасибо.

источник

2014-11-11 David Vallés

У меня трудное время с этим. Это почти то, что вы должны сделать сам модаль вертикально отзывчивым ... это просто, как это сделать в этот момент? По умолчанию BS-модалы будут переполняться вертикально, и это то, что происходит здесь. Я буду продолжать пытаться. Несмотря на то, что класс «img-responsive» вызывается, сам модаль не становится меньше. –

4 ответа. Никто из них не принимался? – Kirby

См JSFiddle

.container { 
    height:100%; 
    width: 100%; 
    border: 1px solid #000000; 
} 
.item { 
    max-height: 90%; 
    max-width: 90%; 
    border: 1px solid #000000; 
}

Предполагая, что у вас есть .container ширина заданной ширины/высоты. Я поставил и ширину и высоту на 100% для .container

Тогда вы просто создать класс и Asign его max-width: 80%;, который будет выводить изображение, чтобы быть 80% ширина .container

источник

2014-11-11 22:10:26

Попробуйте добавить этот

.ekko-lightbox.modal.fade.in div.modal-dialog{ 
    max-width:27%; 
}

Это просто простое решение, лучше всего это будет сделать медиа-запросы для различного разрешения

источник

2014-11-12 07:44:39

Я вижу, более или менее, что вы имеете в виду, но я не могу заставить его работать. Я думаю, что проблема заключается в том, что любой css, который я поставил для изменения размера объектов, перезаписывается javascript, который открывает изображение. Итак, я думаю, мне нужно будет изменить код javascript, который откроет изображение, но это слишком сложно для меня. Можете ли вы помочь мне в этом, или я должен найти другую галерею? В этом случае существует ли какая-либо галерея, совместимая с Bootstrap (Modal), которая является горизонтальной и вертикальной? Хотя я бы предпочел подчинить Bootstrap-Lightbox. –

Я решил его таким образом, редактируя Javascript:

onContentLoaded: function() { 
 
     var imgh = $(".ekko-lightbox-container").find("img").height(); 
 
     var winh = $(window).height(); 
 
     if ((imgh+200)>winh) 
 
     { 
 
     $(".ekko-lightbox-container").find("img").css("height",winh-150).css("width","auto").css("margin","0 auto"); 
 
     } 
 
    }

источник

2015-03-03 10:31:40 tinny77

Фрагмент ничего не делает – Kirby

Это было solved (commit on github) путем расчета максимальной высоты изображения (80% высоты окна просмотра) в функции предварительной нагрузки, но в данный момент он не является частью базовой отрасли.

источник

2015-10-30 16:17:15

У меня была аналогичная проблема, и tinny77's answer было единственным, что подошло к решению.

Вот рабочий фрагмент того, что я закончил с

$().ready(function() { 
 
    $('[data-toggle="lightbox"]').click(function(event) { 
 
    event.preventDefault(); 
 
    $(this).ekkoLightbox({ 
 
     type: 'image', 
 
     onContentLoaded: function() { 
 
     var container = $('.ekko-lightbox-container'); 
 
     var image = container.find('img'); 
 
     var windowHeight = $(window).height(); 
 
     if(image.height() + 200 > windowHeight) { 
 
      image.css('height', windowHeight - 150); 
 
      var dialog = container.parents('.modal-dialog'); 
 
      var padding = parseInt(dialog.find('.modal-body').css('padding')); 
 
      dialog.css('max-width', image.width() + padding * 2 + 2); 
 
     } 
 
     } 
 
    }); 
 
    }); 
 
});

<html> 
 
<head> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> 
 
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script> 
 
    <script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js" type="text/javascript"></script> 
 
    <script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script> 
 
    <script src="//cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/3.3.0/ekko-lightbox.min.js"></script> 
 
</head> 
 
<body> 
 
<p>Click Image</p> 
 
<a href="http://lorempixel.com/400/1920" data-toggle="lightbox"> 
 
    <img height="200" src="http://lorempixel.com/400/1920"/> 
 
</a> 
 
</body> 
 
</html>

источник

2015-12-02 21:33:01 Kirby

Управление высотой изображения в галерее Bootstrap-Lightbox

ответ

Смежные вопросы