Flexbox + JavaScript Image Gallery -
ฝัง
- เผยแพร่เมื่อ 18 พ.ย. 2024
- Today we build a pretty nifty image gallery using Flexbox, CSS transitions and a sprinkle of JS to get things interactive. Grab all the exercises and starter files over at JavaScript30.com
Great stuff! One thing worth mentioning for viewers unfamiliar with flexbox is that `flex: 1` is a shorthand for `flex-grow: 1` which may help understand why it does what it does.
To prevent the double click bug, use the code below:
function toggleOpen(e) {
if(e.detail < 2) this.classList.toggle("open");
}
detail property(event) returns an integer value that specifies the additional info about the event. The return value depends on the type of events.
For mouse click events, the returns value is the number of clicks.
This is the first... series am actually going to finish, am trying really hard not to stop halfway.
This is not just web development, this is art! Thanks Wes Bos.
JS using event delegation :
// Selecting Common parent
const panels = document.querySelector(".panels");
panels.addEventListener("click" , function(e) {
// Always selecting div with .panel (event when clicked on the text)
const target = e.target.closest(".panel")
// Adding and removing classes on clicked target
target.classList.toggle("open")
target.classList.toggle("open-active")
})
I watched whole flex box series in one hour.I learn a lot. Thanks!
The best series ever made about js on the net. Takes a walk even for premium courses
dood i have been studying with a private teacher for over 6 months, and all these videos are like next level compared to what we've done
'Why don't you split it among yourself, children?' - chuckled. And thanks for the great content!
Mr.Bos thank you so much for this video and the entire series.
This is by far your best series. Thank you sir !
Your Course Is Amazing .....Thanks alot for this
I wanted to open the box on mouseover as opposed to click so it was bit tricky to get the transitionend working right for the top and bottom text. What I ended up doing was adding a transition-delay to those items instead.
this is really cool, but how well does the design work? if this wasn't part of a javascript tutorial i wouldn't have known that these are clickable items on an interactive page, what would be a good way to make it obvious to a user that there's more to this than a composite image with some motivational words over it?
I like the 'instant' formula of these videos but sometimes I feel a bit lost. For example, what does 'flex: 1 0 auto' means? Anyways, great series, thank you man ❤
it is a shorthand property means grow shrink basis
There is one thing that i dont quite understand about this particular project. Seems if i use any other font besides Amatic SC, when i open all the panels at the same time, all the flex items aren't sharing the space and the ones on the right get shoved off the page ....I changed font-weight,font-size, etc but it only seems to work with that one particular font .
Great tutorial. Thanks !
can we do same things with tag instead of tag?
I tried to do same but, maybe becase of 's pre-defined properties it looked like weird.
If you double click panel you can see a little bug :)
I used below code to prevent the bug.
if (e.detail < 2) {
toggleOpen();
}
@@sunjungwoo thank you
Can u make this project starting with css u already put css and html I don't understand how u this project I have done my project bt its not working plz help
dear this is JavaScript project series not CSS, but still Wes Bos explain the things, which we can achieve easily, thanks
Loving this series. I was wondering, is there a way to tie sound to the panel open on click?
Well, flexbox is powerful!!!
i started playing around with this and anything i do seems to cause the text that flies in to function in reverse (it starts in view and flies out when clicked) wtf
What is flex: 1 0 auto? You typed it but didn't say what it means
Good tutorial.i am curious what Font and theme you are using ?
Thanks
wesbos.com/uses/
Instead of listening to each panel, why not set a listener to the parent and delegate to children? (1 listener vs 5 listeners)
Probably just for simplicity and focus. Without getting into libraries, I'm not sure there is a quick way to add event delegation that wouldn't distract from the subject at hand.
Edit: The newer Element.matches api seems like it might make this more reasonable, but even then you've got to deal with it being named differently across browsers or polyfill it, not sure if babel does anything for it.
Sometimes, it's better to just do things in the most direct way available, 5 listeners isn't going to hurt anything.
You could simply add a listener to "panels". then when panels is click, trigger a click handler function "handleClick" which takes the event as parameter. then you could simply make a check inside that function like this : if ( event.target.classList.contains('panel') ) { event.target.classList.toggle('open') }
Reco Can you though? Remember that the panel has children of it's own. What will event.target be if you click on the text?
If you can't guarantee that the panel will be the event.target, you have to traverse up the tree until you find the panel.
Yeah, you are right. You could make extra checking like if event.target.nodeName === LI, but that doesn't guarantee anything if it has children with LIs. The best way would be to create a function that finds out if the event.target is a descendant of a panel but then it would just make it not worth compared to simply add listeners on each panel. Anyways, event delegation is more suited when you know from the beginning that the children elements of a parent will be added and removed from the DOM to avoid adding and removing listeners all the time, maybe like a todo list or something.
Reco Right, it's all reasonably doable with a bit of consideration. But that was my point, gets a bit off-topic ;)
Good for a different video.
Thank You!
It might be of 13 minites or so but am so beginner it took me 13 hours
You’ll get faster as you get more practice 😀
@@WesBos Thank you so much ❤️ wes for this awesome playlist ... Learnt a lot from it and started contributing in open source all thanks to you 🌸
how would this works for visual studios putting the java script in a desperate file
Link the separate javascript file by using the attribute in your html file (usually at the bottom of the body) like this:
*The src should point to the location of the js file. If it's inside another directory it might look something like this- src="/scripts/example.js"
Keep it 100
why are'nt my words in the middle
?
Great