Bootstrap-4 /在Lightbox2中以HTML格式排列图像顺序

Question

我想在bootstrap 4中使用lightbox制作一个“图像集”。代码中的问题是灯箱打开时带有最终图像...请告诉我我在哪里做错了。我刚刚开始编码。谢谢...

<div class="col-md-4">
                  <a href="images/SC/SC-1.jpg" data-lightbox="SCTM" data-title="Science Center and Technology Museum">
                  <a href="images/SC/SC-Concept.jpg" data-lightbox="SCTM" data-title="Analysis">
                  <a href="images/SC/SC-Groundfloor.jpg" data-lightbox="SCTM" data-title="Floor Plans">
                  <a href="images/SC/SC-Floorplans.jpg" data-lightbox="SCTM" data-title="Floor Plans">
                  <a href="images/SC/interior.jpg" data-lightbox="SCTM" data-title="Ground Floor Interior View">
                  <a href="images/SC/SC-Sections2.jpg" data-lightbox="SCTM" data-title="Section Plan">
                  <a href="images/SC/SC-Sections.jpg" data-lightbox="SCTM" data-title="Section Plans">
                  <a href="images/SC/Landscape.jpg" data-lightbox="SCTM" data-title="Landscape View">
                    <div class="imageContainer">
                        <img src="images/SC/SC_cover.jpg" class="img-fluid">
                        <div class="imageOverlay">
                            <div class="imageText">
                                <h4>Science Center and Technology Museum</h4>
                                <h5>Project Location:</h5>
                                <p>Golden Horn/Istanbul</p>
                                <h5>Project Type:</h5>
                                <p>Museum</p>
                                <h5>Project Date:</h5>
                                <p>2017</p>
                                <h5>Project Area:</h5>
                                <p>17.000 sqm</p>
                            </div>
                        </div>
                    </div>
                 </a>
                 </a>
                 </a>
                 </a>
                 </a>
                 </a>
                 </a>
                 </a>
            </div>
            <div class="col-md-4">

Answer 1

您需要为用户提供点击的内容。您有链接但内部没有单词供用户单击以激活图片。例如，您可以对每个链接唯一地执行此操作：

<a href="images/SC/SC-Concept.jpg" rel="lightbox" data-lightbox="SCTM" data-title="Analysis">Concept</a>

此外，如果您可以向我们提供代码工作原理的示例，那么这将有助于其他人帮助您。我推荐像Codepen这样的网站。可能还有其他问题但是，如果没有实例，很难看到你正在使用的是什么。

Answer 2

我这样做的时候很有效！

<div class="col-md-4">
                      <a href="images/SC/SC-1.jpg" data-lightbox="SCTM" data-title="Science Center and Technology Museum">
                        <div class="imageContainer">
                            <img src="images/SC/SC_cover.jpg" class="img-fluid">
                            <div class="imageOverlay">
                                <div class="imageText">
                                    <h4>Science Center and Technology Museum</h4>
                                    <h5>Project Location:</h5>
                                    <p>Golden Horn/Istanbul</p>
                                    <h5>Project Type:</h5>
                                    <p>Museum</p>
                                    <h5>Project Date:</h5>
                                    <p>2017</p>
                                    <h5>Project Area:</h5>
                                    <p>17.000 sqm</p>
                                </div>
                            </div>
                        </div>
                     </a>
                     <a href="images/SC/SC-Concept.jpg" data-lightbox="SCTM" data-title="Analysis"></a>
                     <a href="images/SC/SC-Groundfloor.jpg" data-lightbox="SCTM" data-title="Floor Plans"></a>
                     <a href="images/SC/SC-Floorplans.jpg" data-lightbox="SCTM" data-title="Floor Plans"></a>
                     <a href="images/SC/interior.jpg" data-lightbox="SCTM" data-title="Ground Floor Interior View"></a>
                     <a href="images/SC/SC-Sections2.jpg" data-lightbox="SCTM" data-title="Section Plan"></a>
                     <a href="images/SC/SC-Sections.jpg" data-lightbox="SCTM" data-title="Section Plans"></a>
                     <a href="images/SC/Landscape.jpg" data-lightbox="SCTM" data-title="Landscape View"></a>
                </div>
                <div class="col-md-4">