[funtela]

So I'm working on a website for a friend's business, and I'm trying to make a popup gallery for these sections:



I'm trying to make it so when I click on one of the cards, a gallery flips open to show preview pictures of projects done in those categories.

I hope I explained that correctly.

Thank you!

[Nachfolger]

You're probably looking for the term lightbox. Take a look at the brief W3schools tutorial - https://www.w3schools.com/howto/howto_js_lightbox.asp

[Edge]

This is also a good option, basically the same thing: https://lokeshdhakar.com/projects/lightbox2/

You can look into bootstrap as well (:

[funtela]

You're probably looking for the term lightbox. Take a look at the brief W3schools tutorial - https://www.w3schools.com/howto/howto_js_lightbox.asp

Ah yes that's the term I was looking for. Thanks man! I'll check that out now.

---

This is also a good option, basically the same thing: https://lokeshdhakar.com/projects/lightbox2/

You can look into bootstrap as well (:

Thank you! I'll check this out as well.

---

You're probably looking for the term lightbox. Take a look at the brief W3schools tutorial - https://www.w3schools.com/howto/howto_js_lightbox.asp

How would I open the Lightbox without actually putting on image in the column?

Code

<div class="row">
<div class="course-col"
<h2>Drainage & Underground Utilities</h2>
<p>Additional Details</p>
</div>
<div class="course-col"
<h2>Concrete, Sidewalk, Curbing, ADA</h2>
<p>Additional Details</p>
</div>
<div class="course-col"
<h2>Asphalt Milling, Paving and Re-Striping</h2>
<p>Additional Details</p>
</div>
<div class="course-col"
<h2>Sidewalk & Additional Services</h2>
<p>Additional Details</p>
</div>

I can't seem to figure that out.

[funtela]

I still need some help with this :(

Code

div class="row">
<div class="projects-col">
<img src="images/3.png">
<div class="layer">
<h3>The Miami Times Project</h3>
</div>
</div>
<div class="projects-col">
<img src="images/1.png">
<div class="layer">
<h3>Residences at The Falls</h3>
</div>
</div>
<div class="projects-col">
<img src="images/8.png">
<div class="layer">
<h3>Pullman Hotel</h3>
</div>
</div>
</div>
</section>

I'm trying to add a Lightbox into each of these sections. So when they click on them, a gallery would popup with all pictures relating to that project.

I've been using this tutorial but I can't seem to figure it out :/

https://www.w3schools.com/howto/howto_js_lightbox.asp

[Nachfolger]

I still need some help with this :(

Code

div class="row">
<div class="projects-col">
<img src="images/3.png">
<div class="layer">
<h3>The Miami Times Project</h3>
</div>
</div>
<div class="projects-col">
<img src="images/1.png">
<div class="layer">
<h3>Residences at The Falls</h3>
</div>
</div>
<div class="projects-col">
<img src="images/8.png">
<div class="layer">
<h3>Pullman Hotel</h3>
</div>
</div>
</div>
</section>

I'm trying to add a Lightbox into each of these sections. So when they click on them, a gallery would popup with all pictures relating to that project.

I've been using this tutorial but I can't seem to figure it out :/

https://www.w3schools.com/howto/howto_js_lightbox.asp

Provide the full code that you have relating to this. Where's the JavaScript?

[funtela]

Provide the full code that you have relating to this. Where's the JavaScript?

Here's the gallery.html code:

https://pastebin.com/tvg0tvZP


CSS(same file for index.html):

https://pastebin.com/Wrj96qn7