Remove white space picture thumbnail
0
How to remove the white space when I have landscape images and portrait? Instead of having a white space I want the images to move up and fill that white space, I know it will not look aligned but thats ok.
Also I would like the images to resize depending on the browser window scale.
HTML:
<?php
$dir = "img/";
$img = glob($dir . "*.jpg");
foreach ($img as $image)
echo "<img src='$image' class='imageCont'/>";
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Photography</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
</body>
</html>
CSS:
.imageCont
max-width: 200px;
margin: 1px;
transition: all 0.2s linear;
.imageCont:hover
transform: scale(1.1);
box-shadow: 0px 0px 47px -2px #000000bf;
transition: all 0.2s linear;
javascript php html css
edited Nov 15 '18 at 13:32
Foo
1
asked Nov 15 '18 at 13:09
MariusMarius
888
add a comment |
0
How to remove the white space when I have landscape images and portrait? Instead of having a white space I want the images to move up and fill that white space, I know it will not look aligned but thats ok.
Also I would like the images to resize depending on the browser window scale.
HTML:
<?php
$dir = "img/";
$img = glob($dir . "*.jpg");
foreach ($img as $image)
echo "<img src='$image' class='imageCont'/>";
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Photography</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
</body>
</html>
CSS:
.imageCont
max-width: 200px;
margin: 1px;
transition: all 0.2s linear;
.imageCont:hover
transform: scale(1.1);
box-shadow: 0px 0px 47px -2px #000000bf;
transition: all 0.2s linear;
javascript php html css
edited Nov 15 '18 at 13:32
Foo
1
asked Nov 15 '18 at 13:09
MariusMarius
888
What happens if you addfloat: left/margin: 0your images?
– Script47
Nov 15 '18 at 13:11
you need to use a masonry js plugin by the looks of things. Also, move the echo to within the body of your html - if you echo them at the top like that, your html is invalid
– Pete
Nov 15 '18 at 13:11
1
Can you add html rendered code?
– Znaneswar
Nov 15 '18 at 13:12
You need to organize the images into columns. Also, you need to move thatforeachloop into your<body>in order to create valid HTML.
– Chris G
Nov 15 '18 at 13:13
Pete thanks i will look into Masonry looks promising
– Marius
Nov 15 '18 at 14:17
add a comment |
0
0
0
How to remove the white space when I have landscape images and portrait? Instead of having a white space I want the images to move up and fill that white space, I know it will not look aligned but thats ok.
Also I would like the images to resize depending on the browser window scale.
HTML:
<?php
$dir = "img/";
$img = glob($dir . "*.jpg");
foreach ($img as $image)
echo "<img src='$image' class='imageCont'/>";
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Photography</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
</body>
</html>
CSS:
.imageCont
max-width: 200px;
margin: 1px;
transition: all 0.2s linear;
.imageCont:hover
transform: scale(1.1);
box-shadow: 0px 0px 47px -2px #000000bf;
transition: all 0.2s linear;
javascript php html css
edited Nov 15 '18 at 13:32
Foo
1
asked Nov 15 '18 at 13:09
MariusMarius
888
How to remove the white space when I have landscape images and portrait? Instead of having a white space I want the images to move up and fill that white space, I know it will not look aligned but thats ok.
Also I would like the images to resize depending on the browser window scale.
HTML:
<?php
$dir = "img/";
$img = glob($dir . "*.jpg");
foreach ($img as $image)
echo "<img src='$image' class='imageCont'/>";
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Photography</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
</body>
</html>
CSS:
.imageCont
max-width: 200px;
margin: 1px;
transition: all 0.2s linear;
.imageCont:hover
transform: scale(1.1);
box-shadow: 0px 0px 47px -2px #000000bf;
transition: all 0.2s linear;
javascript php html css
javascript php html css
edited Nov 15 '18 at 13:32
Foo
1
asked Nov 15 '18 at 13:09
MariusMarius
888
edited Nov 15 '18 at 13:32
Foo
1
asked Nov 15 '18 at 13:09
MariusMarius
888
edited Nov 15 '18 at 13:32
Foo
1
edited Nov 15 '18 at 13:32
Foo
1
edited Nov 15 '18 at 13:32
Foo
1
1
asked Nov 15 '18 at 13:09
MariusMarius
888
asked Nov 15 '18 at 13:09
MariusMarius
888
asked Nov 15 '18 at 13:09
MariusMarius
888
888
What happens if you addfloat: left/margin: 0your images?
– Script47
Nov 15 '18 at 13:11
you need to use a masonry js plugin by the looks of things. Also, move the echo to within the body of your html - if you echo them at the top like that, your html is invalid
– Pete
Nov 15 '18 at 13:11
1
Can you add html rendered code?
– Znaneswar
Nov 15 '18 at 13:12
You need to organize the images into columns. Also, you need to move thatforeachloop into your<body>in order to create valid HTML.
– Chris G
Nov 15 '18 at 13:13
Pete thanks i will look into Masonry looks promising
– Marius
Nov 15 '18 at 14:17
add a comment |
What happens if you addfloat: left/margin: 0your images?
– Script47
Nov 15 '18 at 13:11
you need to use a masonry js plugin by the looks of things. Also, move the echo to within the body of your html - if you echo them at the top like that, your html is invalid
– Pete
Nov 15 '18 at 13:11
1
Can you add html rendered code?
– Znaneswar
Nov 15 '18 at 13:12
You need to organize the images into columns. Also, you need to move thatforeachloop into your<body>in order to create valid HTML.
– Chris G
Nov 15 '18 at 13:13
Pete thanks i will look into Masonry looks promising
– Marius
Nov 15 '18 at 14:17
What happens if you add
float: left / margin: 0 your images?– Script47
Nov 15 '18 at 13:11
What happens if you add
float: left / margin: 0 your images?– Script47
Nov 15 '18 at 13:11
you need to use a masonry js plugin by the looks of things. Also, move the echo to within the body of your html - if you echo them at the top like that, your html is invalid
– Pete
Nov 15 '18 at 13:11
you need to use a masonry js plugin by the looks of things. Also, move the echo to within the body of your html - if you echo them at the top like that, your html is invalid
– Pete
Nov 15 '18 at 13:11
1
1
Can you add html rendered code?
– Znaneswar
Nov 15 '18 at 13:12
Can you add html rendered code?
– Znaneswar
Nov 15 '18 at 13:12
You need to organize the images into columns. Also, you need to move that
foreach loop into your <body> in order to create valid HTML.– Chris G
Nov 15 '18 at 13:13
You need to organize the images into columns. Also, you need to move that
foreach loop into your <body> in order to create valid HTML.– Chris G
Nov 15 '18 at 13:13
Pete thanks i will look into Masonry looks promising
– Marius
Nov 15 '18 at 14:17
Pete thanks i will look into Masonry looks promising
– Marius
Nov 15 '18 at 14:17
add a comment |
3 Answers
3
active
oldest
votes
0
I found a different way
<?php
$dir = "img/";
$img = glob($dir . "*.jpg");
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Photography</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
<section class="imageCont">
<?php foreach ($img as $image) echo "<img src='$image' class='imageCont' style='max-width:200px' />";?>
</section>
<script src="js/jquery.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
CSS
.imageCont img
overflow: hidden;
transition: all 0.2s linear;
margin: 1px;
.imageCont img:hover
transform: scale(1.1);
box-shadow: 0px 0px 47px -2px #000000bf;
transition: all 0.2s linear;
.landscape
max-width: 200px;
width: 100%;
height: auto;
.portrait
max-height: 133px;
width: auto;
height: 100%;
JS
$(window).on('load', function ()
$('.imageCont img').each(function ()
if ($(this).width() / $(this).height() >= 1)
$(this).addClass('landscape');
else
$(this).addClass('portrait');
);
);
Sample
answered Nov 15 '18 at 14:11
MariusMarius
888
There's no need for that jQuery code and two classes; just set all images toheight: 133px
– Chris G
Nov 15 '18 at 14:28
lol and there i was trying to be smart ass... thanks Chris
– Marius
Nov 15 '18 at 14:33
add a comment |
0
So making progress and i like this solution but the problem i have is that sometimes images do not load correctly. It's like they are stacked to one and another upon loading them.
Sample error
Currently the code looks like this:
HTML
<?php
$dir = "img/";
$img = glob($dir . "*.jpg");
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Photography</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
<div class="grid">
<div class="grid-sizer"></div>
<?php foreach ($img as $image) echo "<div class='grid-item'><img src='$image'></div>";?>
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js"></script>
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.js"></script>
<script src="https://unpkg.com/scrollreveal@4.0.5/dist/scrollreveal.js"></script>
<script src="js/main.js"></script>
</body>
</html>
CSS
*
box-sizing: border-box;
.grid:after
content: '';
display: block;
clear: both;
.grid-sizer,
.grid-item
width: 33.333%;
.grid-item
float: left;
.grid-item img
display: block;
max-width: 100%;
transition: all 0.2s linear;
padding: 5px 5px;
.grid-item img:hover
box-shadow: 0px 0px 40px -1px #000000bf;
transition: all 0.2s linear;
JS
var $grid = $('.grid').masonry(
percentPosition: true,
columnWidth: '.grid-sizer',
itemSelector: '.grid-item'
);
$grid.imagesLoaded().progress(function ()
$grid.masonry();
);
ScrollReveal().reveal('.grid-item',
delay: 100,
);
answered Nov 16 '18 at 10:11
MariusMarius
888
When i disable ScrollReveal the issue goes away but i think the issue is a mix of using ScrollReveal and Masonry. I think the way the animation for masonry works it's not as fast loading and then ScrollReveal kick is before the Masonry loads, i'm only guessing.
– Marius
Nov 16 '18 at 10:22
add a comment |
-1
To move the images up, you will need to align them, and for that you need to use
vertical-align:top;
To remove the left/right space, indeed you will need to use:
float:left;
Or
margin-left:-3px;
Have in mind the fact that if the height of the rows is different, the images of next row will align at the bottom of the biggest image of the previous one.
edited Nov 15 '18 at 13:32
Script47
9,38142246
answered Nov 15 '18 at 13:22
Robert ŞtefanRobert Ştefan
12
tried that it did worked for half of the images, but for some reason the rest was not working properly
– Marius
Nov 15 '18 at 14:09
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53320227%2fremove-white-space-picture-thumbnail%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
I found a different way
<?php
$dir = "img/";
$img = glob($dir . "*.jpg");
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Photography</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
<section class="imageCont">
<?php foreach ($img as $image) echo "<img src='$image' class='imageCont' style='max-width:200px' />";?>
</section>
<script src="js/jquery.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
CSS
.imageCont img
overflow: hidden;
transition: all 0.2s linear;
margin: 1px;
.imageCont img:hover
transform: scale(1.1);
box-shadow: 0px 0px 47px -2px #000000bf;
transition: all 0.2s linear;
.landscape
max-width: 200px;
width: 100%;
height: auto;
.portrait
max-height: 133px;
width: auto;
height: 100%;
JS
$(window).on('load', function ()
$('.imageCont img').each(function ()
if ($(this).width() / $(this).height() >= 1)
$(this).addClass('landscape');
else
$(this).addClass('portrait');
);
);
Sample
answered Nov 15 '18 at 14:11
MariusMarius
888
There's no need for that jQuery code and two classes; just set all images toheight: 133px
– Chris G
Nov 15 '18 at 14:28
lol and there i was trying to be smart ass... thanks Chris
– Marius
Nov 15 '18 at 14:33
add a comment |
0
I found a different way
<?php
$dir = "img/";
$img = glob($dir . "*.jpg");
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Photography</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
<section class="imageCont">
<?php foreach ($img as $image) echo "<img src='$image' class='imageCont' style='max-width:200px' />";?>
</section>
<script src="js/jquery.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
CSS
.imageCont img
overflow: hidden;
transition: all 0.2s linear;
margin: 1px;
.imageCont img:hover
transform: scale(1.1);
box-shadow: 0px 0px 47px -2px #000000bf;
transition: all 0.2s linear;
.landscape
max-width: 200px;
width: 100%;
height: auto;
.portrait
max-height: 133px;
width: auto;
height: 100%;
JS
$(window).on('load', function ()
$('.imageCont img').each(function ()
if ($(this).width() / $(this).height() >= 1)
$(this).addClass('landscape');
else
$(this).addClass('portrait');
);
);
Sample
answered Nov 15 '18 at 14:11
MariusMarius
888
There's no need for that jQuery code and two classes; just set all images toheight: 133px
– Chris G
Nov 15 '18 at 14:28
lol and there i was trying to be smart ass... thanks Chris
– Marius
Nov 15 '18 at 14:33
add a comment |
0
0
0
I found a different way
<?php
$dir = "img/";
$img = glob($dir . "*.jpg");
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Photography</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
<section class="imageCont">
<?php foreach ($img as $image) echo "<img src='$image' class='imageCont' style='max-width:200px' />";?>
</section>
<script src="js/jquery.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
CSS
.imageCont img
overflow: hidden;
transition: all 0.2s linear;
margin: 1px;
.imageCont img:hover
transform: scale(1.1);
box-shadow: 0px 0px 47px -2px #000000bf;
transition: all 0.2s linear;
.landscape
max-width: 200px;
width: 100%;
height: auto;
.portrait
max-height: 133px;
width: auto;
height: 100%;
JS
$(window).on('load', function ()
$('.imageCont img').each(function ()
if ($(this).width() / $(this).height() >= 1)
$(this).addClass('landscape');
else
$(this).addClass('portrait');
);
);
Sample
answered Nov 15 '18 at 14:11
MariusMarius
888
I found a different way
<?php
$dir = "img/";
$img = glob($dir . "*.jpg");
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Photography</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
<section class="imageCont">
<?php foreach ($img as $image) echo "<img src='$image' class='imageCont' style='max-width:200px' />";?>
</section>
<script src="js/jquery.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
CSS
.imageCont img
overflow: hidden;
transition: all 0.2s linear;
margin: 1px;
.imageCont img:hover
transform: scale(1.1);
box-shadow: 0px 0px 47px -2px #000000bf;
transition: all 0.2s linear;
.landscape
max-width: 200px;
width: 100%;
height: auto;
.portrait
max-height: 133px;
width: auto;
height: 100%;
JS
$(window).on('load', function ()
$('.imageCont img').each(function ()
if ($(this).width() / $(this).height() >= 1)
$(this).addClass('landscape');
else
$(this).addClass('portrait');
);
);
Sample
answered Nov 15 '18 at 14:11
MariusMarius
888
answered Nov 15 '18 at 14:11
MariusMarius
888
answered Nov 15 '18 at 14:11
MariusMarius
888
answered Nov 15 '18 at 14:11
MariusMarius
888
888
There's no need for that jQuery code and two classes; just set all images toheight: 133px
– Chris G
Nov 15 '18 at 14:28
lol and there i was trying to be smart ass... thanks Chris
– Marius
Nov 15 '18 at 14:33
add a comment |
There's no need for that jQuery code and two classes; just set all images toheight: 133px
– Chris G
Nov 15 '18 at 14:28
lol and there i was trying to be smart ass... thanks Chris
– Marius
Nov 15 '18 at 14:33
There's no need for that jQuery code and two classes; just set all images to
height: 133px– Chris G
Nov 15 '18 at 14:28
There's no need for that jQuery code and two classes; just set all images to
height: 133px– Chris G
Nov 15 '18 at 14:28
lol and there i was trying to be smart ass... thanks Chris
– Marius
Nov 15 '18 at 14:33
lol and there i was trying to be smart ass... thanks Chris
– Marius
Nov 15 '18 at 14:33
add a comment |
0
So making progress and i like this solution but the problem i have is that sometimes images do not load correctly. It's like they are stacked to one and another upon loading them.
Sample error
Currently the code looks like this:
HTML
<?php
$dir = "img/";
$img = glob($dir . "*.jpg");
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Photography</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
<div class="grid">
<div class="grid-sizer"></div>
<?php foreach ($img as $image) echo "<div class='grid-item'><img src='$image'></div>";?>
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js"></script>
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.js"></script>
<script src="https://unpkg.com/scrollreveal@4.0.5/dist/scrollreveal.js"></script>
<script src="js/main.js"></script>
</body>
</html>
CSS
*
box-sizing: border-box;
.grid:after
content: '';
display: block;
clear: both;
.grid-sizer,
.grid-item
width: 33.333%;
.grid-item
float: left;
.grid-item img
display: block;
max-width: 100%;
transition: all 0.2s linear;
padding: 5px 5px;
.grid-item img:hover
box-shadow: 0px 0px 40px -1px #000000bf;
transition: all 0.2s linear;
JS
var $grid = $('.grid').masonry(
percentPosition: true,
columnWidth: '.grid-sizer',
itemSelector: '.grid-item'
);
$grid.imagesLoaded().progress(function ()
$grid.masonry();
);
ScrollReveal().reveal('.grid-item',
delay: 100,
);
answered Nov 16 '18 at 10:11
MariusMarius
888
When i disable ScrollReveal the issue goes away but i think the issue is a mix of using ScrollReveal and Masonry. I think the way the animation for masonry works it's not as fast loading and then ScrollReveal kick is before the Masonry loads, i'm only guessing.
– Marius
Nov 16 '18 at 10:22
add a comment |
0
So making progress and i like this solution but the problem i have is that sometimes images do not load correctly. It's like they are stacked to one and another upon loading them.
Sample error
Currently the code looks like this:
HTML
<?php
$dir = "img/";
$img = glob($dir . "*.jpg");
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Photography</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
<div class="grid">
<div class="grid-sizer"></div>
<?php foreach ($img as $image) echo "<div class='grid-item'><img src='$image'></div>";?>
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js"></script>
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.js"></script>
<script src="https://unpkg.com/scrollreveal@4.0.5/dist/scrollreveal.js"></script>
<script src="js/main.js"></script>
</body>
</html>
CSS
*
box-sizing: border-box;
.grid:after
content: '';
display: block;
clear: both;
.grid-sizer,
.grid-item
width: 33.333%;
.grid-item
float: left;
.grid-item img
display: block;
max-width: 100%;
transition: all 0.2s linear;
padding: 5px 5px;
.grid-item img:hover
box-shadow: 0px 0px 40px -1px #000000bf;
transition: all 0.2s linear;
JS
var $grid = $('.grid').masonry(
percentPosition: true,
columnWidth: '.grid-sizer',
itemSelector: '.grid-item'
);
$grid.imagesLoaded().progress(function ()
$grid.masonry();
);
ScrollReveal().reveal('.grid-item',
delay: 100,
);
answered Nov 16 '18 at 10:11
MariusMarius
888
When i disable ScrollReveal the issue goes away but i think the issue is a mix of using ScrollReveal and Masonry. I think the way the animation for masonry works it's not as fast loading and then ScrollReveal kick is before the Masonry loads, i'm only guessing.
– Marius
Nov 16 '18 at 10:22
add a comment |
0
0
0
So making progress and i like this solution but the problem i have is that sometimes images do not load correctly. It's like they are stacked to one and another upon loading them.
Sample error
Currently the code looks like this:
HTML
<?php
$dir = "img/";
$img = glob($dir . "*.jpg");
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Photography</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
<div class="grid">
<div class="grid-sizer"></div>
<?php foreach ($img as $image) echo "<div class='grid-item'><img src='$image'></div>";?>
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js"></script>
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.js"></script>
<script src="https://unpkg.com/scrollreveal@4.0.5/dist/scrollreveal.js"></script>
<script src="js/main.js"></script>
</body>
</html>
CSS
*
box-sizing: border-box;
.grid:after
content: '';
display: block;
clear: both;
.grid-sizer,
.grid-item
width: 33.333%;
.grid-item
float: left;
.grid-item img
display: block;
max-width: 100%;
transition: all 0.2s linear;
padding: 5px 5px;
.grid-item img:hover
box-shadow: 0px 0px 40px -1px #000000bf;
transition: all 0.2s linear;
JS
var $grid = $('.grid').masonry(
percentPosition: true,
columnWidth: '.grid-sizer',
itemSelector: '.grid-item'
);
$grid.imagesLoaded().progress(function ()
$grid.masonry();
);
ScrollReveal().reveal('.grid-item',
delay: 100,
);
answered Nov 16 '18 at 10:11
MariusMarius
888
So making progress and i like this solution but the problem i have is that sometimes images do not load correctly. It's like they are stacked to one and another upon loading them.
Sample error
Currently the code looks like this:
HTML
<?php
$dir = "img/";
$img = glob($dir . "*.jpg");
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Photography</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
<div class="grid">
<div class="grid-sizer"></div>
<?php foreach ($img as $image) echo "<div class='grid-item'><img src='$image'></div>";?>
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js"></script>
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.js"></script>
<script src="https://unpkg.com/scrollreveal@4.0.5/dist/scrollreveal.js"></script>
<script src="js/main.js"></script>
</body>
</html>
CSS
*
box-sizing: border-box;
.grid:after
content: '';
display: block;
clear: both;
.grid-sizer,
.grid-item
width: 33.333%;
.grid-item
float: left;
.grid-item img
display: block;
max-width: 100%;
transition: all 0.2s linear;
padding: 5px 5px;
.grid-item img:hover
box-shadow: 0px 0px 40px -1px #000000bf;
transition: all 0.2s linear;
JS
var $grid = $('.grid').masonry(
percentPosition: true,
columnWidth: '.grid-sizer',
itemSelector: '.grid-item'
);
$grid.imagesLoaded().progress(function ()
$grid.masonry();
);
ScrollReveal().reveal('.grid-item',
delay: 100,
);
answered Nov 16 '18 at 10:11
MariusMarius
888
answered Nov 16 '18 at 10:11
MariusMarius
888
answered Nov 16 '18 at 10:11
MariusMarius
888
answered Nov 16 '18 at 10:11
MariusMarius
888
888
When i disable ScrollReveal the issue goes away but i think the issue is a mix of using ScrollReveal and Masonry. I think the way the animation for masonry works it's not as fast loading and then ScrollReveal kick is before the Masonry loads, i'm only guessing.
– Marius
Nov 16 '18 at 10:22
add a comment |
When i disable ScrollReveal the issue goes away but i think the issue is a mix of using ScrollReveal and Masonry. I think the way the animation for masonry works it's not as fast loading and then ScrollReveal kick is before the Masonry loads, i'm only guessing.
– Marius
Nov 16 '18 at 10:22
When i disable ScrollReveal the issue goes away but i think the issue is a mix of using ScrollReveal and Masonry. I think the way the animation for masonry works it's not as fast loading and then ScrollReveal kick is before the Masonry loads, i'm only guessing.
– Marius
Nov 16 '18 at 10:22
When i disable ScrollReveal the issue goes away but i think the issue is a mix of using ScrollReveal and Masonry. I think the way the animation for masonry works it's not as fast loading and then ScrollReveal kick is before the Masonry loads, i'm only guessing.
– Marius
Nov 16 '18 at 10:22
add a comment |
-1
To move the images up, you will need to align them, and for that you need to use
vertical-align:top;
To remove the left/right space, indeed you will need to use:
float:left;
Or
margin-left:-3px;
Have in mind the fact that if the height of the rows is different, the images of next row will align at the bottom of the biggest image of the previous one.
edited Nov 15 '18 at 13:32
Script47
9,38142246
answered Nov 15 '18 at 13:22
Robert ŞtefanRobert Ştefan
12
tried that it did worked for half of the images, but for some reason the rest was not working properly
– Marius
Nov 15 '18 at 14:09
add a comment |
-1
To move the images up, you will need to align them, and for that you need to use
vertical-align:top;
To remove the left/right space, indeed you will need to use:
float:left;
Or
margin-left:-3px;
Have in mind the fact that if the height of the rows is different, the images of next row will align at the bottom of the biggest image of the previous one.
edited Nov 15 '18 at 13:32
Script47
9,38142246
answered Nov 15 '18 at 13:22
Robert ŞtefanRobert Ştefan
12
tried that it did worked for half of the images, but for some reason the rest was not working properly
– Marius
Nov 15 '18 at 14:09
add a comment |
-1
-1
-1
To move the images up, you will need to align them, and for that you need to use
vertical-align:top;
To remove the left/right space, indeed you will need to use:
float:left;
Or
margin-left:-3px;
Have in mind the fact that if the height of the rows is different, the images of next row will align at the bottom of the biggest image of the previous one.
edited Nov 15 '18 at 13:32
Script47
9,38142246
answered Nov 15 '18 at 13:22
Robert ŞtefanRobert Ştefan
12
To move the images up, you will need to align them, and for that you need to use
vertical-align:top;
To remove the left/right space, indeed you will need to use:
float:left;
Or
margin-left:-3px;
Have in mind the fact that if the height of the rows is different, the images of next row will align at the bottom of the biggest image of the previous one.
edited Nov 15 '18 at 13:32
Script47
9,38142246
answered Nov 15 '18 at 13:22
Robert ŞtefanRobert Ştefan
12
edited Nov 15 '18 at 13:32
Script47
9,38142246
edited Nov 15 '18 at 13:32
Script47
9,38142246
edited Nov 15 '18 at 13:32
Script47
9,38142246
9,38142246
answered Nov 15 '18 at 13:22
Robert ŞtefanRobert Ştefan
12
answered Nov 15 '18 at 13:22
Robert ŞtefanRobert Ştefan
12
answered Nov 15 '18 at 13:22
Robert ŞtefanRobert Ştefan
12
12
tried that it did worked for half of the images, but for some reason the rest was not working properly
– Marius
Nov 15 '18 at 14:09
add a comment |
tried that it did worked for half of the images, but for some reason the rest was not working properly
– Marius
Nov 15 '18 at 14:09
tried that it did worked for half of the images, but for some reason the rest was not working properly
– Marius
Nov 15 '18 at 14:09
tried that it did worked for half of the images, but for some reason the rest was not working properly
– Marius
Nov 15 '18 at 14:09
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53320227%2fremove-white-space-picture-thumbnail%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
What happens if you add
float: left/margin: 0your images?– Script47
Nov 15 '18 at 13:11
you need to use a masonry js plugin by the looks of things. Also, move the echo to within the body of your html - if you echo them at the top like that, your html is invalid
– Pete
Nov 15 '18 at 13:11
1
Can you add html rendered code?
– Znaneswar
Nov 15 '18 at 13:12
You need to organize the images into columns. Also, you need to move that
foreachloop into your<body>in order to create valid HTML.– Chris G
Nov 15 '18 at 13:13
Pete thanks i will look into Masonry looks promising
– Marius
Nov 15 '18 at 14:17