【问题标题】: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”类'
      之后。当我点击图片时,弹出轮播从最后一张图片开始,我必须循环到左边到第一张图片。通常我应该看到第一张图片,然后向右骑行。您如何看待这个问题?
  • 很抱歉回复晚了。 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">

    【讨论】:

      猜你喜欢
      • 2018-03-05
      • 1970-01-01
      • 2017-11-18
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2011-06-18
      • 2016-08-01
      • 1970-01-01
      相关资源
      最近更新 更多