How do I make a popup gallery?

How do I make a popup gallery? - Printable Version

+- Hack Forums (https://hackforums.net)
+-- Forum: Tech (https://hackforums.net/forumdisplay.php?fid=444)
+--- Forum: Webmasters (https://hackforums.net/forumdisplay.php?fid=141)
+---- Forum: Website Construction (https://hackforums.net/forumdisplay.php?fid=50)
+---- Thread: How do I make a popup gallery? (/showthread.php?tid=6180121)

How do I make a popup gallery? - funtela - Nov 6, 2021

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

[Image: umnfjY2.png?1]

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!

RE: How do I make a popup gallery? - Nachfolger - Nov 6, 2021

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

RE: How do I make a popup gallery? - Edge - Nov 6, 2021

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

You can look into bootstrap as well (:

RE: How do I make a popup gallery? - funtela - Nov 6, 2021

(Nov 6, 2021 12:47 PM)Nachfolger Wrote: 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.

(Nov 6, 2021 12:52 PM)EdgeOfDeath Wrote: 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.

(Nov 6, 2021 12:47 PM)Nachfolger Wrote: 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.

RE: How do I make a popup gallery? - funtela - Dec 7, 2021

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

RE: How do I make a popup gallery? - Nachfolger - Dec 8, 2021

(Dec 7, 2021 07:21 PM)funtela Wrote: 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?

RE: How do I make a popup gallery? - funtela - Dec 8, 2021

(Dec 8, 2021 04:45 PM)Nachfolger Wrote: 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