Controlling image height in Bootstrap-Lightbox gallery
Question
I'm working on a website of an artist, so galleries are really important. I'm using Bootstrap for the website, and Lightbox for Bootstrap plugin for the galleries. It works fine adjusting the width of the image to any resolution (I want to make it as responsive as possible). But, as you can observe if you click on any vertical photo (for example, the one in the second row, second column), when it opens, it's bigger than the screen and it can't be seen without scrolling.
So, I want to get rid of this problem, adjusting the maximum height of the image to the height of the screen. But I can't find the way to do this. Any ideas for doing it in a simple way? I've uploaded the website to a server so you can see the problem: http://mural.uv.es/ivape2/es/galeria.html
Thank you.
5 answers
solution1
2 2015-12-02 21:33:01
I had a similar problem and tinny77's answer was the only thing that approached a solution.
Here is a working snippet of what I ended up with
$().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>
solution2
1 2015-03-03 10:31:40
I solved it this way by editing the 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");
}
}
solution3
0 2014-11-11 22:10:26
See the JSFiddle
.container {
height:100%;
width: 100%;
border: 1px solid #000000;
}
.item {
max-height: 90%;
max-width: 90%;
border: 1px solid #000000;
}
Assuming you have a .container width a given width/height. I've put both width and height at 100% for the .container
Then you just create a class and asign it max-width: 80%; which will output the image to be 80% the width of the .container
solution4
0 2014-11-12 07:44:39
Try adding this
.ekko-lightbox.modal.fade.in div.modal-dialog{
max-width:27%;
}
This is just simple solution, best it will be to make media-queries for different resolution
solution5
0 2015-10-30 16:17:15
这已通过计算预加载函数中的最大图像高度（视口高度的 80%）解决（ 在 github 上提交），但目前它不是基本分支的一部分。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.