Incremental Imaging Improvement 1
A retrospective on building an instagram-ish image gallery from data like this:
It took a while to figure out and I already polished it a bit before I made my first commit with a pretty page that met req’s, but it wasn’t perfect.
In fact, it needed to close not just on a click on the ‘X’, but on a click anywhere outside the lightbox. It haaad to work that way. Insta-frustration. Turns out there’s no element.restOfPage.addEventListener…
But there is a lot of event data. If the user clicks on an element, the event data has two attributes among a hundred others: event.currentTarget (what the event listener is attached to: the cover here) and event.target (the most specific thing clicked, could be the cover… or something else, like the modal). So check if they are the same. The code is simply this:
http://iangornall.com/gummi-gram/v2
Hurray, modal closing greatness!
But wait, those buttons… Wrong position, weird jerking hover effect!? Fix it! TGFCSS…
http://iangornall.com/gummi-gram/v3/
Ahhh… that’s better. The space-around for positioning (it was space-between in v2, eww). Adding a transparent outline is necessary for that to transition properly on hover.
However, if you looked at the code… all the modal classes are called card. Find & replace… find and replace: OMG 61 additions and 69 deletions: https://github.com/iangornall/gummi-gram/commit/4b8739a0f8c57cf32ceb400ec2ef815228116ccf
Key takeaway: Use sensible naming from the beginning.
But now I want to rotate around the modals when they are open like any decent web gallery would do… Okay, add some arrows and… ERRORS. If I’m on the first modal, how do I open the last? And if I’m on the last… the first?
We need logic for cycling through indices! Fun!
Previous index = (arr.length + i - 1) % arr.length.
If you are at the 0th index, this prevents you from finding negative remainders.
Next index = (i + 1) % arr.length.
If you are at the last index, you loop back to the 0th index.
Check future posts for mobile friendly layouts, swipe gestures, and fun scrolling fixes. Carousel, full screen api, and floating button goodness.
