Samuel Tulach Samuel Tulach - 3 years ago 253
jQuery Question

Bootstrap Gallery white spaces

Today, I am trying to make simple portfolio. I found this template for Bootstrap. It looks beautiful, but when I add some other photos it starts to make white spaces:

screenshot

Is there any way to move this photos up, so there will be no spaces?

css:

body {
background-color: #434c50;
min-height: 100vh;
font: normal 16px sans-serif;
padding: 40px 0;
}

.container.gallery-container {
background-color: #fff;
color: #35373a;
min-height: 100vh;
padding: 30px 50px;
}

.gallery-container h1 {
text-align: center;
margin-top: 50px;
font-family: 'Droid Sans', sans-serif;
font-weight: bold;
}

.gallery-container p.page-description {
text-align: center;
margin: 25px auto;
font-size: 18px;
color: #999;
}

.tz-gallery {
padding: 40px;
}

/* Override bootstrap column paddings */
.tz-gallery .row > div {
padding: 2px;
}

.tz-gallery .lightbox img {
width: 100%;
border-radius: 0;
position: relative;
}

.tz-gallery .lightbox:before {
position: absolute;
top: 50%;
left: 50%;
margin-top: -13px;
margin-left: -13px;
opacity: 0;
color: #fff;
font-size: 26px;
font-family: 'Glyphicons Halflings';
content: '\e003';
pointer-events: none;
z-index: 9000;
transition: 0.4s;
}


.tz-gallery .lightbox:after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
background-color: rgba(217, 217, 217, 0.5);
content: '';
transition: 0.4s;
}

.tz-gallery .lightbox:hover:after,
.tz-gallery .lightbox:hover:before {
opacity: 1;
}

.baguetteBox-button {
background-color: transparent !important;
}

@media(max-width: 768px) {
body {
padding: 0;
}
}

.menu {
color: #999 !important;
text-align: right;
}


html:

<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Freebie: 4 Bootstrap Gallery Templates</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Droid+Sans:400,700" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.8.1/baguetteBox.min.css">
<link rel="stylesheet" href="fluid-gallery.css">


</head>
<body>

<div class="container gallery-container">

<?php include 'navbar.php';?>

<h1>Bootstrap 3 Gallery</h1>

<p class="page-description text-center">Fluid Layout With Overlay Effect</p>

<div class="tz-gallery">

<div class="row">

<div class="col-sm-6 col-md-4">
<a class="lightbox" href="../images/park.jpg">
<img src="../images/park.jpg" alt="Park">
</a>
</div>

<div class="col-sm-6 col-md-4">
<a class="lightbox" href="image.jpg">
<img src="image.jpg" alt="Bridge">
</a>
</div>
<div class="col-sm-6 col-md-4">
<a class="lightbox" href="../images/park.jpg">
<img src="../images/park.jpg" alt="Park">
</a>
</div>
<div class="col-sm-6 col-md-4">
<a class="lightbox" href="../images/tunnel.jpg">
<img src="../images/tunnel.jpg" alt="Tunnel">
</a>
</div>
<div class="col-sm-6 col-md-4">
<a class="lightbox" href="../images/traffic.jpg">
<img src="../images/traffic.jpg" alt="Traffic">
</a>
</div>
<div class="col-sm-6 col-md-4">
<a class="lightbox" href="../images/coast.jpg">
<img src="../images/coast.jpg" alt="Coast">
</a>
</div>
<div class="col-sm-6 col-md-4">
<a class="lightbox" href="../images/rails.jpg">
<img src="../images/rails.jpg" alt="Rails">
</a>
</div>

</div>

</div>

</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.8.1/baguetteBox.min.js"></script>
<script>
baguetteBox.run('.tz-gallery');
</script>
</body>
</html>

Answer Source

Unfortunately the layout relies on images being either a set height, or double that set height. As soon as you start entering images that aren't 1:1 or 2:1 height, you will end up with gaps. You could switch to a column instead of row layout, but then you'll lose the ability to have an item span two columns.

If you're tied to this particular layout, perhaps you can have cropped versions of your images that fit the 1:1, 1:2, 2:1 and 2:2 pattern, and just have those cropped versions function as thumbnails that link through to the full, uncropped versions.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download