fslightbox 和 grid colcade 的兼容性

如何解决fslightbox 和 grid colcade 的兼容性

我正在测试fslightBox的免费版本和Colcade的垂直布局。网格工作完美，它以不同的高度对照片进行水平排序。问题是 LightBox 如何显示照片的顺序，它是按列（从下）而不是水平（从左到右）显示照片。

你知道我该如何解决这个烂摊子吗？

!-- gallery-->
 <div class="container gallery my-5">
   <div class="grid">
       
       <div class="grid-col grid-col--1">
       </div>
       <div class="grid-col grid-col--2">
       </div>  
       <div class="grid-col grid-col--3">
       </div>
       <div class="grid-col grid-col--4">
       </div>  
       
           
    
      
    <!-- photos -->
       <div class="grid-item">
         <a data-fslightBox="gallery" 
         data-caption="first image"
         data-alt="Example image description"
         href="images/01 Moments of my Life/01 Moments of my Life.jpg">
         <img src="images/01 Moments of my Life/01 Moments of my Life.jpg">
      </a>
       </div>

       <div class="grid-item">
         <a data-fslightBox="gallery" 
         data-caption="......."
         data-alt="Example image description"
         href="images/01 Moments of my Life/02 Moments of my Life.jpg">
         <img src="images/01 Moments of my Life/02 Moments of my Life.jpg">
      </a>
       </div>

       <div class="grid-item">
         <a data-fslightBox="gallery" 
         data-caption="......."
         data-alt="Example image description"
         href="images/01 Moments of my Life/03 Moments of my Life.jpg">
         <img src="images/01 Moments of my Life/03 Moments of my Life.jpg">
      </a>
       </div>

       <div class="grid-item">
         <a data-fslightBox="gallery" 
         data-caption="......."
         data-alt="Example image description"
         href="images/01 Moments of my Life/04 Moments of my Life.jpg">
         <img src="images/01 Moments of my Life/04 Moments of my Life.jpg">
      </a>
       </div>

       <div class="grid-item">
         <a data-fslightBox="gallery" 
         data-caption="......."
         data-alt="Example image description"
         href="images/01 Moments of my Life/05 Moments of my Life.jpg">
         <img src="images/01 Moments of my Life/05 Moments of my Life.jpg">
      </a>
       </div>

   </div>    
</div> 



<footer id="footer"></footer>
<div class="container footer border-top py-3">
  <div class="row">
    <div class="col-8 col-md-6 text-left ">
      <p><samll><span id='year'></span> &copy; 2021. All Rights Reserved </samll> </p>
    </div>
    <div class="col-4 col-md-6 text-right">
      <a href="#" class="text-secondary"><h5>Up</h5></a>
    </div>
  </div>
</div>



<!-- footer year -->
<script>
  let date = new date();
  let year = date.getFullYear();
  document.getElementById('year').innerHTML = year.toString();
</script>
</div>

<!-- Grid -->
<script src="https://unpkg.com/colcade@0/colcade.js"></script>

<script>
  var colc = new Colcade( '.grid',{
columns: '.grid-col',items: '.grid-item'
});
</script>


<script src="js/fslightBox.js"></script> 
<script> 
// opens content 2
fsLightBoxInstances['lightBox'].open(1);

// closes the lightBox
fsLightBoxInstances['lightBox'].close();

// refreshes the lightBox when new content is added
refreshFsLightBox();

fsLightBoxInstances['lightBox'].props.onopen = () => console.log('LightBox open!');
fsLightBoxInstances['lightBox'].props.onClose = () => console.log('LightBox close!');
fsLightBoxInstances['lightBox'].props.onInit = () => console.log('LightBox init!');
fsLightBoxInstances['lightBox'].props.onShow = () => console.log('LightBox show!');

// disables the local storage
fsLightBoxInstances['gallery'].props.disableLocalStorage = true;

// sets the video poster
fsLightBoxInstances['gallery'].props.videosPosters = ['1.jpg'];

// sets the max width/height of the Youtube video
fsLightBoxInstances['gallery'].props.maxYoutubedimensions = { width: 1920,height: 1080 };

// sets the space between slides
fsLightBoxInstances['gallery'].props.slidedistance = 0.5;

// loads only current source
fsLightBoxInstances['gallery'].props.loadOnlyCurrentSource = true;

// exists fullscreen on close
fsLightBoxInstances['gallery'].props.exitFullscreenOnClose = true;

fsLightBoxInstances['gallery'].props.thumbs = ['/images/example-thumbnail.jpg'];
</script>