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.
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>
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");
}
}
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
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
This has been solved (commit on github) by calculating the maximum image height (80% of viewport height) in the preload function but currently it is not part of the base branch.
Related
All.
I've been messing with this project for a few days, trying different codes, making some progress, then getting stuck.
The below code is the closest I've come to a working example.
This one counts the WIDTH from the LEFT panel.
I need it to count the WIDTH from the RIGHT panel.
--UPDATED--
I've made it drag from the RIGHT, and it calculates its width from the RIGHT. Unfortunately, the HEIGHT is still not working when the div grows in height, but the width counts.
As you will see when you run the demo below, when you drag the bar, the left panel does not stay attached, along with other issues.
Almost as if it was designed to run one way only.
I know I am missing something here, just not sure what?
Best Viewed In Full Screen.
Thank you.
Wayne
Here is the code
var info = document.getElementById('Info');
var left = document.getElementById('drag-left');
var right = document.getElementById('drag-right');
$(function() {
$(right).resizable({
minHeight: 200,
minWidth: 320
});
$(left).resizable({
minHeight: 200,
minWidth: 320
});
});
// Left Panel
$(right).resizable({
handles: 'w',
resize: function(event, ui) {
// var width = $("body").width() - ui.size.width;
// var height = $("body").height() - ui.size.height;
var width = ui.size.width;
var height = ui.size.height;
$(left).width(left);
$(info).text("Width: " + width + "px; & Height: " + height + "px;");
}
});
/*This is to create the BAR in the middle to grab.
To change which one gets it, change the (e) to (w)
E = Left panel
W = Right Panel*/
.ui-resizable-w {
background-color: black;
}
.ui-resizable-w:hover {
cursor: col-resize;
}
* {
box-sizing: border-box;
}
p {
color: darkslategray;
}
.drag-container {
display: flex;
width:1000px;
padding:5px;
}
[class^=panel] {
padding: 60px 24px;
background-color: whitesmoke;
}
.panel-one {
width: 100%;
flex: 1 1 auto;
}
.panel-two {
width: 60%;
}
#drag-right, #drag-left {
min-height:200px;
min-width:320px;
border:1px double green;
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Simple JS Dragbar</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body translate="no" >
<div class="drag-container">
<div class="panel-one" id="drag-left">
<h2>Panel 1</h2>
<p>Look, everyone wants to be like Germany, but do we really have the pure strength of 'will'? But I know you in the future. I cleaned your poop. Large bet on myself in round one. Take me to your leader! My fellow Earthicans, as I have explained in my book 'Earth in the Balance'', and the much more popular ''Harry Potter and the Balance of Earth', we need to defend our planet against pollution. Also dark wizards.</p>
</div>
<div class="panel-two" id="drag-right">
<h2>Panel 2</h2>
<p>So, how 'bout them Knicks? You guys go on without me! I'm going to go… look for more stuff to steal! Guards! Bring me the forms I need to fill out to have her taken away! Do a flip! Calculon is gonna kill us and it's all everybody else's fault!</p>
</div>
</div>
<div style="float:right; height:30px; width:320px; border:1px double green; padding:40px 4px;">Width: 320px;<br />
<span id="Info">Information Goes Here</span>
</div>
I am developing a web application using AngularJS. I find myself in a situation where I have a bar (with the css I created a line) that must dynamically lengthen and shorten.
I know that JQuery scripts are sufficient to do this. For example, if my css is like this:
.my_line{
display:block;
width:2px;
background: #FFAD0D;
height: 200px; /*This is the part that needs to dynamically change*/
}
I could in the controller resize the line (of my_line class) simply with:
$(".my_line").css("height", someExpression*100 + 'px');
The thing is, I would like to dynamically resize the line based on the size of another div element (Or, in general, any HTML element of my choice).
I don't know how to get (at run-time) the size of a certain page element in terms of height.
Only in this way I would be able to create a line that dynamically lengthens or shortens as the size of a div (or some other element) changes!
How do you do this? So I will avoid writing hard-coded the measures but I want make sure that they vary as the dimensions of other elements on the page vary
I hope this is helping:
$(".my_line").css("height", $("#referenceElement").height()*5 + 'px');
.my_line{
display:inline-block;
width:2px;
background: #FFAD0D;
}
#referenceElement {
display:inline-block;
background: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="my_line"></div>
<div id="referenceElement">Hi, I'm 5 time smaller than the orange line!</div>
Here I am using the setInterval to track the div's height (you can do width as well) and storing it in a previousHeight variable and comparing it every interval
Then according to the comparison, it will determine if the height of the div has changed. If it has then it will change the height of the other div according to the height of the first div
You can create multiple variables and track multiple elements in the same setInterval
$(document).ready(function(){
var previousHeight = parseInt($("#my-div").css("height"));
setInterval(function(){ checkHeight(); }, 100);
function checkHeight() {
// Check height of elements here
var currentHeight = parseInt($("#my-div").css("height"));
if(currentHeight != previousHeight) {
previousHeight = currentHeight;
$("#dynamic-div").css("height", parseInt(currentHeight) + "px");
}
}
$("#button").click(function() {
$("#my-div").css("height", parseInt(previousHeight) + 5 + "px");
})
})
#my-div{
background: #000000;
height: 20px;
width: 20px;
}
#dynamic-div{
background: teal;
height: 20px;
width: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="my-div">
</div>
<button id="button">Increase div height</button>
<div id="dynamic-div">
</div>
I am trying to swap divs in IE 9 and less. But my javascript is not working. Can anybody help me out?
You can see my script here: http://jsfiddle.net/pny71Lqd/
Not sure why the JS is also not working on jsfiddle. It is working in my browsers (also IE), but when i try IE 9 or smaller it brakes down.
Find the code below:
<style>
body{ background:#f6f6f6;}
#container2 {
width: 926px;
}
#leftCol2{ float: left;
width: 300px;
background:#FFFFFF;
}
#rightCol2{float:left;
width:300px;
background: #FF9;
}
</style>
<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
<script type='text/javascript'>//<![CDATA[
$(function(){
$(window).resize(function() { //Fires when window is resized
var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
if(width < 1024) {
$("#container2").each(function() {
var detach = $(this).find("#leftCol2").detach();
$(detach).insertAfter($(this).find("#rightCol2"));
})
}
else {
$("#container2").each(function() {
var detach = $(this).find("#rightCol2").detach();
$(detach).insertAfter($(this).find("#leftCol2"));
})
}
});
});//]]>
</script>
</head>
<body>
<div id="container2">
<div id="leftCol2">
<p>Div 1.</p>
</div>
<div id="rightCol2">
<p>Div 2.</p>
</div>
</div>
As you can see I try to swap around leftCol2 with rightCol2 when the screen is resized smaller than 1024. Actually I'd like also the divs to be swapped around when the page is just loaded (and not necessarily resized). Who can help? Thank you very much!
Seemed to be a problem with my emulator. Got a different one and it worked for IE9 and less!
I'm sure there are other post that address this in various ways.
I've been struggling with this a bit, trying to do CSS only approach with no luck. Playing around with css width and height, doing a mix of 100% and auto on the image got me nowhere.
Given html:
<div class="container">
<img src="http://image" />
</div>
And css:
.container { width: 500px; height: 400px; }
How to fit images of various sizes into the container while preserving aspect ratio and obeying constraints of the container?
I believe you are far over-thinking this.
Try adding the following CSS, and removing the javascript:
.container img {
max-width: 100%;
max-height: 100%;
}
Here's a demo (click the images to dynamically load a different size)
I ended up with javascript solution - I know, not ideal but it's the best I could come up with that does what I need it to. The page where I'm using this relies on javascript to perform other bits of functionality so that's not a problem in my scenario. I'm also loading images into a Bootstrap grid layout column, like so:
<div class="row">
<div class="col-md-6">
<div class="main-image">
<img src="http://initialimage" />
</div>
</div>
<div class="col-md-6">
Some content here ...
</div>
</div>
The width of the container in this case is controlled by bootstrap layout css so I only need to set the height of the container:
.main-image { height: 400px; }
I tried with using just
.main-image { max-height: 400px; }
So that the container would adjust to horizontally stretched images but then jQuery gets the container height wrong.
Anyway, here's the javascript I'm using:
var imageLoaded = function () {
var container = $(this).parent();
var maxWidth = container.width();
var maxHeight = container.height();
var width = $(this).width();
var height = $(this).height();
var containerRatio = maxWidth / maxHeight;
var ratio = width / height;
if (ratio > containerRatio) {
$(this).attr('width', '100%;');
$(this).attr('height', 'auto');
}
else {
$(this).attr('height', '100%;');
$(this).attr('width', 'auto');
}
};
$(document).ready(function () {
$('.main-image img').bind('load', imageLoaded);
imageLoaded.call($('.main-image img'));
});
You may wonder why the manual invocation of imageLoaded function - it's because in IE, the event doesn't fire for the initially loaded image. Invoking it manually corrects that.
You can then change the image source:
$('.main-image img').attr('src', 'http://otherimage');
And the image will adjust to fit the container by either using up full height for vertical images or full width for horizontal images.
Any better way to do this or comments welcome.
I am trying to make a grid of images in CSS, out of random sized images that are not square.
Does anyone have a solution to filling all the space inside a fixed sized div with the image ?
See my example (blue is a fixed size div and red in the image inside it:
You can use the css, background-size: cover;
<style>
.img1 {
background-image: url(microsoft-logo.png);
}
.img2 {
background-image: url(google-icon.png);
}
.img3 {
background-image: url(Azend_Loggo.png);
}
.img-cover {
width: 50px;
height: 50px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
</style>
<div class="img-cover img1">
</div>
<div class="img-cover img2">
</div>
<div class="img-cover img3">
</div>
Use this CSS rule:
background-size: cover;
background-position: center;
DEMO
I have some code that does this and allows you to set the required sizes ...
<?PHP
function imageResize($image,$maxwidth,$maxheight) {
$imgData = getimagesize("img/profiles/".$image);
$width = $imgData[0];
$height = $imgData[1];
// takes the larger size of the width and height and applies the
// formula accordingly...this is so this script will work
// dynamically with any size image
// First we'll scale down the width since it's the larger of the tw values
if ($width > $maxwidth) {
$percentage = ($maxwidth / $width);
$width = round($width * $percentage);
$height = round($height * $percentage);
}
// Next we'll scale down the height since it's the larger of the tw values
if ($height > $maxheight) {
$percentage = ($maxheight / $height);
$width = round($width * $percentage);
$height = round($height * $percentage);
}
$topMargin = ($maxheight-$height)/2;
$topMargin .= "px";
//returns the new sizes in html image tag format...
// this is so you can plug this function inside an image tag and just get the results
return "width=\"$width\" height=\"$height\" style=\"margin-top:$topMargin px;\"";
}
?>
and then include the following:
<div id="profile-picture">
<img src="img/profiles/<?PHP echo $profileImg; ?>" <?PHP echo imageResize($profileImg,238,232); ?> />
</div>
Not sure if that's helpful .. but it worked for me.
You can try below css for image tag of your fixed div in this solution one condition you have to follow which is, your images size should be larger then your div i.e if your div will be 100px then minimum image size should be 100px or more then that :
div > img {
width:100%;
overflow:hidden;
}
Seeing as you've tagged the question with jQuery i'll take the liberty to suggest you write a small jQuery plugin for this. Here's the JSFiddle demo.
// Define plugin 'containImg'
$.fn.containImg = function(){
this.each(function(){
// Set variables
var $t = $(this),
$p = $t.parent('div'),
pw = $p.width(),
ph = $p.height(),
// Figure if width or height should be 100%
iw = ( pw / ph >= 1 ) ? 'auto' : '100%',
ih = ( iw == 'auto' ) ? '100%' : 'auto';
// Set dimensions
$t.css({
'width': iw,
'height': ih
});
});
}
// Call plugin
$('img').containImg();
The basic logic is if the image has a horizontally stretched parent div, you'll need to set height:100% to fill the height, and width:auto to maintain the aspect ratio. If the parent div shape is vertical, you'll have to reverse this.
If anyone has views on how to improve the code I'm up for suggestions!
You could use just css for it but js can help, here follow my simple code.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title></title>
<style type="text/css">
div.image-box{display:block;position:relative;overflow:hidden;width:200px;border:1px solid #ccc;padding:0;height:200px;}
div.image-box img{width:100%;height:auto;margin:0; padding:0;margin-bottom:-4px;position:absolute;top:0;left:0;}
div.image-box.horizontal img{height:100%;width:auto;left:50%;}
div.image-box.vertical img{height:auto;width:100%;top:50%;}
</style>
</head>
<body>
<div class="image-box"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcS08-IWtcbvcehgeszlD2nI6s-OAungNCsLNIc-f3QjIOkvOq8abg" alt=""></div>
<div class="image-box"><img src="http://1.bp.blogspot.com/_e-y-Rrz58H4/TUS4qRlRUrI/AAAAAAAABQo/H322eTHRB2s/s1600/Man_Face.jpg" alt=""></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.image-box').each(function(){
if($(this).find('img').height() > $(this).find('img').width()){
$(this).addClass('vertical');
$(this).find('img').css('margin-top','-'+$(this).find('img').height()/2+'px');
}else{
$(this).addClass('horizontal');
$(this).find('img').css('margin-left','-'+$(this).find('img').width()/2+'px');
}
});
});
</script>
</body>
</html>
Hope that helps