Bootstrap-4 / Arranging image order in Lightbox2 in HTML

Question

I want to make an "image set" using lightbox in bootstrap 4. The problem in the code is that the lightbox opens with the final image... Please tell me where I am doing it wrong. I just started coding. Thanks...

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

score 0 · Answer 1 · answered Mar 17 '19 at 21:44

0

You need to give the user something to click. You have links but no words located inside for the user to click on to activate the picture. For example, you could do this uniquely to each link:

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

Also, if you can give us a sample of what the code works like, that would help others help you. I recommend a site like Codepen. There might be other issues but again, it's hard to see what you're working with without a live example.

answered Mar 17 '19 at 21:44

Pete Adam Bialecki

183
1
3
9

Thanks for the quick response Pete you have pushed me 1 step further to the solution. Now, I put all the after the "imageContainer" class' . When I click on the image, the pop-up carousel starts from the last image and I have to cycle to the left to the first image. Normally I should be seeing the first image and then cycling to the right. What do you think about this issue? – Nadir Pamuk Mar 17 '19 at 22:03
Can you please provide a link to this project somewhere online? What are you trying to achieve? Are you using Lightbox by Lokesh Dhakar? I would suggest you think of the tag being a link to the large image that would be generated in the lightbox which surrounds a smaller version of the image which is called a thumbnail. Basically, the thumbnail is a link to a larger hosted image called by Lightbox. For example, you could do `` with ``. – Pete Adam Bialecki Mar 19 '19 at 00:35
I am sorry for a late response. www.nadirpamuk.com is the website I am working on. When you go to the projects, you will understand what I meant. By the way, Codepen is awesome! I made the contact form with a code I found there. Of course, I adjusted it according to my page design. Now I am working on how to submit the form while staying on the same page with "message successfully sent" next to the submit button. – Nadir Pamuk Mar 26 '19 at 21:40

score 0 · Answer 2 · answered Mar 18 '19 at 11:26

It worked when I did this!

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

Bootstrap-4 / Arranging image order in Lightbox2 in HTML

2 Answers2