Can Jquery show all gallery items without large spaces using Lightbox JS & Masonry?

Hector
May 30, 2023
219 views
0 votes
2 Answers

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/[email protected]/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>

Answers

This is due to some CSS used and mixed content in one layout.
You need to split videos and images frame.

In the example below, I removed the margin of .grid-item--width2 {} and change to 50% the sizer grid-sizer. This work fine with all element between.

let masonryGrid = $('.masonry-grid').masonry({
  itemSelector: '.grid-item',
  columnWidth: '.grid-sizer',
  percentPosition: true
});
setTimeout(function() {
  masonryGrid.masonry('layout')
}, 200);

.masonry-grid {
  margin: 30px 20px 20px;
}
.grid-item, .grid-sizer {
  float: left; 
  padding: 10px;
  width: 50%;
}
.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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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>

Please signup or login to give your own answer.

Click here to cancel reply.