I am trying to use lightbox js and masonry based gallery
I connected everything and added elements, 2 videos and 6 images
When outputting, everything is as it should be, on the left there are 2 videos, then there are images
But for some reason, everything is set up in such a way that there is too much indent between the video and images
Is it possible to make it so that the images are displayed immediately after the video without such a large gap??
let masonryGrid = $('.masonry-grid').masonry({
itemSelector: '.grid-item',
columnWidth: '.grid-sizer',
percentPosition: true
});
setTimeout(function() {
masonryGrid.masonry('layout')
}, 200);
setTimeout(function() {
masonryGrid.masonry('layout')
}, 1000);
setTimeout(function() {
masonryGrid.masonry('layout')
}, 3000);.masonry-grid {
margin: 30px 20px 20px;
}
.grid-item, .grid-sizer {
float: left; width: 20%;
padding: 10px;
}
.grid-item div {
background: white;
border-radius: 8px;
box-shadow: 0 2px 8px 0 blue;
}
.grid-item img {
width: 100%;
border-radius: 5px;
}
.grid-item iframe {
margin: 0 0 -5px;
width: 100%;
border-radius: 10px;
}
.grid-item--width2 {
width: 41%;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/css/lightbox.css" integrity="sha512-Woz+DqWYJ51bpVk5Fv0yES/edIMXjj3Ynda+KWTIkGoynAMHrqTcDUQltbipuiaD5ymEo9520lyoVOo9jCQOCA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="masonry-grid" data-ma-sonry="{ 'itemSelector': '.grid-item'}" style="position: relative; height:640px;">
<div class="grid-item grid-item--width2 " style="position: absolute;">
<div><iframe src="https://youtube.com/embed/HXzB99HCru4/" allowfullscreen="allowfullscreen"></iframe></div>
</div>
<div class="grid-item grid-item--width2 " style="position: absolute;">
<div><iframe src="https://youtube.com/embed/Jb6CBwreea8/" allowfullscreen="allowfullscreen"></iframe></div>
</div>
<div class="grid-item" style="position: absolute;">
<div><a href="https://i.imgur.com/xPZSJ3n.jpg" data-lightbox="image-1" data-title="Image 1"><img src="https://i.imgur.com/xPZSJ3n.jpg" alt=""></a></div>
</div>
<div class="grid-item" style="position: absolute;">
<div><a href="https://i.imgur.com/vebNRcv.jpg" data-lightbox="image-1" data-title="Image 2"><img src="https://i.imgur.com/vebNRcv.jpg" alt=""></a></div>
</div>
<div class="grid-item" style="position: absolute;">
<div><a href="https://i.imgur.com/d9cmnm9.jpg" data-lightbox="image-1" data-title="Image 3"><img src="https://i.imgur.com/d9cmnm9.jpg" alt=""></a></div>
</div>
<div class="grid-item" style="position: absolute;">
<div><a href="https://i.imgur.com/xPZSJ3n.jpg" data-lightbox="image-1" data-title="Image 4"><img src="https://i.imgur.com/xPZSJ3n.jpg" alt=""></a></div>
</div>
<div class="grid-item" style="position: absolute;">
<div><a href="https://i.imgur.com/vebNRcv.jpg" data-lightbox="image-1" data-title="Image 5"><img src="https://i.imgur.com/vebNRcv.jpg" alt=""></a></div>
</div>
<div class="grid-item" style="position: absolute;">
<div><a href="https://i.imgur.com/d9cmnm9.jpg" data-lightbox="image-1" data-title="Image 6"><img src="https://i.imgur.com/d9cmnm9.jpg" alt=""></a></div>
</div>
<div class="grid-sizer"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js" integrity="sha512-JRlcvSZAXT8+5SQQAvklXGJuxXTouyq8oIMaYERZQasB8SBDHZaUbeASsJWpk0UUrf89DP3/aefPPrlMR1h1yQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/js/lightbox.js" integrity="sha512-MBa5biLyZuJEdQR7TkouL0i1HAqpq8lh8suPgA//wpxGx4fU1SGz1hGSlZhYmm+b7HkoncCWpfVKN3NDcowZgQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>change CSS
.grid-item, .grid-sizer {
width: 20%; /* Change Here*/
padding: 10px;
}
.grid-item div {
background: white;
border-radius: 8px;
box-shadow: 0 2px 8px 0 blue;
}
.grid-item img {
width: 100%;
border-radius: 5px;
}
.grid-item iframe {
margin: 0 0 -5px;
width: 100%;
border-radius: 10px;
}
.grid-item--width2 {
width: 60%; /* Change Here*/
}
let masonryGrid = $('.masonry-grid').masonry({
itemSelector: '.grid-item',
columnWidth: '.grid-sizer',
percentPosition: true
});
setTimeout(function() {
masonryGrid.masonry('layout')
}, 200);
setTimeout(function() {
masonryGrid.masonry('layout')
}, 1000);
setTimeout(function() {
masonryGrid.masonry('layout')
}, 3000);.masonry-grid {
margin: 30px 20px 20px;
}
.grid-item, .grid-sizer {
width: 20%;
padding: 10px;
}
.grid-item div {
background: white;
border-radius: 8px;
box-shadow: 0 2px 8px 0 blue;
}
.grid-item img {
width: 100%;
border-radius: 5px;
}
.grid-item iframe {
margin: 0 0 -5px;
width: 100%;
border-radius: 10px;
}
.grid-item--width2 {
width: 60%;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/css/lightbox.css" integrity="sha512-Woz+DqWYJ51bpVk5Fv0yES/edIMXjj3Ynda+KWTIkGoynAMHrqTcDUQltbipuiaD5ymEo9520lyoVOo9jCQOCA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="masonry-grid" data-ma-sonry="{ 'itemSelector': '.grid-item'}" style="position: relative; height:640px;">
<div class="grid-item grid-item--width2">
<div><iframe src="https://youtube.com/embed/HXzB99HCru4/" allowfullscreen="allowfullscreen"></iframe></div>
</div>
<div class="grid-item grid-item--width2">
<div><iframe src="https://youtube.com/embed/Jb6CBwreea8/" allowfullscreen="allowfullscreen"></iframe></div>
</div>
<div class="grid-item">
<div><a href="https://i.imgur.com/xPZSJ3n.jpg" data-lightbox="image-1" data-title="Image 1"><img src="https://i.imgur.com/xPZSJ3n.jpg" alt=""></a></div>
</div>
<div class="grid-item">
<div><a href="https://i.imgur.com/vebNRcv.jpg" data-lightbox="image-1" data-title="Image 2"><img src="https://i.imgur.com/vebNRcv.jpg" alt=""></a></div>
</div>
<div class="grid-item">
<div><a href="https://i.imgur.com/d9cmnm9.jpg" data-lightbox="image-1" data-title="Image 3"><img src="https://i.imgur.com/d9cmnm9.jpg" alt=""></a></div>
</div>
<div class="grid-item">
<div><a href="https://i.imgur.com/xPZSJ3n.jpg" data-lightbox="image-1" data-title="Image 4"><img src="https://i.imgur.com/xPZSJ3n.jpg" alt=""></a></div>
</div>
<div class="grid-item">
<div><a href="https://i.imgur.com/vebNRcv.jpg" data-lightbox="image-1" data-title="Image 5"><img src="https://i.imgur.com/vebNRcv.jpg" alt=""></a></div>
</div>
<div class="grid-item">
<div><a href="https://i.imgur.com/d9cmnm9.jpg" data-lightbox="image-1" data-title="Image 6"><img src="https://i.imgur.com/d9cmnm9.jpg" alt=""></a></div>
</div>
<div class="grid-sizer"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js" integrity="sha512-JRlcvSZAXT8+5SQQAvklXGJuxXTouyq8oIMaYERZQasB8SBDHZaUbeASsJWpk0UUrf89DP3/aefPPrlMR1h1yQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/js/lightbox.js" integrity="sha512-MBa5biLyZuJEdQR7TkouL0i1HAqpq8lh8suPgA//wpxGx4fU1SGz1hGSlZhYmm+b7HkoncCWpfVKN3NDcowZgQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>