oh how am i only just coming across your site now... this is so perfect, you're an incredible coder, like im just sitting here admiring all of the little details😭 you are so full of personality i loved peeking around here!
im also a little curious as to how you set up your lightbox in your scrapbook section, coding them has always been a pain in the ass so id love to know how you did it 🥹
as for my scrapbook section, i watched a few different youtube vids on it but i'm using html, css, and js, js is the code that actually gets it to work tho. basically i have one hidden div that lives at the bottom of my html that acts as the lightbox, it's invisible by default and it covers the whole screen with a dark background (as seen on mine). (1/2)
when you click on one of my olaroid cards, js grabs the image and caption from that card and then copies them into the lightbox div, then adds a class called "active" to it which switches it from hidden to visible. i styled it with “position: fixed” and a “high z-index”, mine is at 1000, so it lies on top of everything else on the page, and “display: flex” to center the image in the middle of the screen.
my centering isn’t perfect but i gave up on caring abt it lol. for closing it, i have a little x button in the corner that, when clicked just removes that "active" class, making it disappear again. i also added a listener so that if you click anywhere on the dark background outside the image, it closes too. the main thing to understand is that there's only ever one lightbox div on the whole page.
instead of making a new one for every photo, you just keep swapping out what image and caption is inside it each time someone clicks a different card. lmk if this helps!! i tried to explain it thoroughly lol. I can look for the youtube vids i watched, and also feel free to look at my code as well to get a better understanding if you're more of a visual learner!
im also a little curious as to how you set up your lightbox in your scrapbook section, coding them has always been a pain in the ass so id love to know how you did it 🥹
hiii, omg that's really sweet! thank you so much! ur site is super cute and i love the color scheme and jellyfish :) !!
as for my scrapbook section, i watched a few different youtube vids on it but i'm using html, css, and js, js is the code that actually gets it to work tho. basically i have one hidden div that lives at the bottom of my html that acts as the lightbox, it's invisible by default and it covers the whole screen with a dark background (as seen on mine). (1/2)
when you click on one of my olaroid cards, js grabs the image and caption from that card and then copies them into the lightbox div, then adds a class called "active" to it which switches it from hidden to visible. i styled it with “position: fixed” and a “high z-index”, mine is at 1000, so it lies on top of everything else on the page, and “display: flex” to center the image in the middle of the screen.
my centering isn’t perfect but i gave up on caring abt it lol. for closing it, i have a little x button in the corner that, when clicked just removes that "active" class, making it disappear again. i also added a listener so that if you click anywhere on the dark background outside the image, it closes too. the main thing to understand is that there's only ever one lightbox div on the whole page.
instead of making a new one for every photo, you just keep swapping out what image and caption is inside it each time someone clicks a different card. lmk if this helps!! i tried to explain it thoroughly lol. I can look for the youtube vids i watched, and also feel free to look at my code as well to get a better understanding if you're more of a visual learner!