Review and problems on small image gallery project
Hello guys, can someone just review my image gallery and give me some feedbacks what need to be modified or enhanced please.... I have some bug though, when I click on some image, the main image overflow, I don't understand why, can someone explain please
Here is my codepen:
https://codepen.io/Fakeur/pen/oNKMxbv
Untitled
...
12 Replies
things don't look very good if u add more images
and considering the containers class is called scroller, the obvious assumption would be that it should be scrollable
in order to take into account the overflow, how should I handle it please
like overflow-x: scroll; ?
something like that ?
I forgot about its value 😅
also u r adding event listener to all images
considering this is an image gallery which will contain a large amount of images, this is not gonna be very good
instead you should use event delegation
that would work fine yes
might wanna add some gap as well
like 0.5rem or so
yeah, why using event listener to all images is not recommended here? Like it takes more processing power, something like that? Because we have to register all the img tag within that particular class?
i mean just think about it
when u have a large amount of event listeners, browser has to listen for click events on so many elements. this is a big overhead
it's like listening to 4 people giving you 4 information vs listening to 1 person giving u all 4 information
😂
yeah I see, nice analogy, will use event delegation , thanks !!
welcome
I also notice in a video that a for loop was used to register all the img tags, this is also bad practice right ? Because here also we are registering too many events ?
if u r looping through all inage and adding event listeners to them then yes it's the same thing
yep I see , thanks !