Bootstrap-4 / Организация порядка изображений в Lightbox2 в HTML - PullRequest
Новая
       42

Bootstrap-4 / Организация порядка изображений в Lightbox2 в HTML

0 голосов
/ 18 марта 2019

Я хочу создать «набор изображений» с помощью лайтбокса в 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">

Ответы [ 2 ]

0 голосов
/ 18 марта 2019

Это сработало, когда я это сделал!

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

0 голосов
/ 18 марта 2019

Вам нужно дать пользователю что-нибудь щелкнуть.У вас есть ссылки, но внутри нет слов, по которым пользователь может щелкнуть, чтобы активировать картинку.Например, вы можете сделать это уникально для каждой ссылки: 

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

Кроме того, если вы можете дать нам пример того, как работает код, это поможет другим помочь вам.Я рекомендую сайт как Codepen .Могут быть и другие проблемы, но опять же, трудно увидеть, с чем вы работаете, без живого примера.

...