Bootstrap-4 / 在 HTML 中的 Lightbox2 中排列图像顺序答案

【问题标题】：Bootstrap-4 / Arranging image order in Lightbox2 in HTMLBootstrap-4 / 在 HTML 中的 Lightbox2 中排列图像顺序
【发布时间】：2019-03-17 21:31:30
【问题描述】：

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

<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">

【问题讨论】：

标签： html bootstrap-4 lightbox bootstrap-lightbox

【解决方案1】：

你需要给用户一些可以点击的东西。您有链接，但内部没有文字供用户单击以激活图片。例如，您可以对每个链接单独执行此操作：

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

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

【讨论】：

感谢皮特的快速响应，您已将我推向解决方案的更进一步。现在，我将所有的放在“imageContainer”类'
之后。当我点击图片时，弹出轮播从最后一张图片开始，我必须循环到左边到第一张图片。通常我应该看到第一张图片，然后向右骑行。您如何看待这个问题？

您能在网上某处提供该项目的链接吗？你想达到什么目的？你在使用 Lokesh Dhakar 的 Lightbox 吗？我建议您将标记视为指向将在灯箱中生成的大图像的链接，该图像围绕称为缩略图的较小版本的图像。基本上，缩略图是指向由 Lightbox 调用的更大托管图像的链接。例如，您可以使用<a href="images/SC/SC-1-thumbnail.jpg" data-lightbox="SCTM"> 执行<a href="images/SC/SC-1-large.jpg" data-lightbox="SCTM" >。

很抱歉回复晚了。 www.nadirpamuk.com 是我正在开发的网站。当你去项目时，你会明白我的意思。顺便说一句，Codepen 很棒！我用在那里找到的代码制作了联系表格。当然，我根据我的页面设计进行了调整。现在我正在研究如何提交表单，同时保持在提交按钮旁边的“消息已成功发送”的同一页面上。

【解决方案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">

【讨论】：