Galeria zdjęć w HTML, CSS i Javascript - poradnik dla początkujących! Bez jQuery!

[@Edoka7]

Taka ciekawostka. W 17:30 wyskoczył Ci pasek od przewijania poziomego. Wynika to z tego, że gdy ustawimy width na body 100vw i pojawi nam się scrollbar pionowy to body jest za duże o szerokość scrollbara i pojawia się scrollbar poziomy. Można to rozwiązać tak jak Ty użyciem overflow'em ale można też ustawić szerokość (w tym wypadku body) na 100% a nie 100vw. Różnica pomiędzy % a VW załatwia nam tę sprawę, drobnostka a dobrze wiedzieć, że te wartości się między sobą różnią. Procent wylicza szerokość strony jako takiej a vw oblicza szerokość view portu czyli okna przeglądarki. Scrollbar pionowy zabiera z szerokości strony jako takiej ale wlicza się w szerokość view portu.

[@JZP]

Dzięki za komentarz i radę!

[@vadimgierko]

Świetnie się ogląda taki tutorial po ponad dwóch latach programowania w Reakcie i stylowaniu w Bootstrapie - aż miło jest sobie powspominać kodowanie w Vanilla JS. Czysta przyjemność. Zastanawiam się, czy wrócę (lub będę musiał wrócić) jeszcze do pisania w czystych HTML/CSS/JS... PS. super, że zadbałeś o (i pokazałeś) tabowanie i obsługę key eventów oraz accessibility, gdyż naprawdę często jest to odkładane na kiedyś tam, a w związku z tym w ogóle pomijane - warto wyrobić sobie nawyk dbania o te rzeczy od samego początku swojej przygody z programowaniem webowym.

[@JZP]

Totalnie się zgadzam, dzięki za miły komentarz!

[@JZP]

Serdeczne dzięki dla osób z Discorda, które doradzały mi jak powienien wyglądać projekt

[@smartpawel]

Boskie i proste... Przerób to teraz na wersję dla komórek... Będziesz gooroo!!!

[@bodzisław]

Szczerze oglądałem już kilka kursów z JS. ŻADEN nie był tak merytoryczny i świetnie wytłumaczony, jak twój (chociaż to nie kurs z samego JS). Oglądając ten poradnik czuję, że na prawdę rozumiem każdą linię kodu. Świetna robota

[@JZP]

Dzięki! To mega miłe :)

[@janwierzchowski6825]

Zacząłem oglądać, ale WOW! Muszę ten kanał rozpromować wśród znajomych, taka jakość filmów nie zasługuje na 10 tys. sukskrybcji. Trzymam za Ciebie kciuki :D

[@elvispreslay8112]

Super materiał, dziękuję :)

[@_SadekTV]

Super film jak zawsze 🥰

[@qw3qw378]

Sztos materiał :)

[@JZP]

Dzięki!

[@michu-programmer]

Super poradnik. Czekam na lekcje z Reacta :)

[@arek4820]

Propagacja i delegacja w JavaScript. Fajny pomysł. Pozdrawiam :)

[@themixhelp]

Świetne! Wreszcie zrozumiałem jQuery!

[@1982neopoznan]

Świetne tego szukałem

[@adigotuje9731]

Hej. z tym kotkiem i popupem. Moje zdjęcie nie jest wycentrowanie, tylko przy kliknięciu jest na cały ekran. Jakiej komendy użyć, aby je wyskalować? Pozdrawiam (32:16)

[@mioszkordaczuk5475]

jak zrobić stronę dla bloga VSC ???proszę o video na ten temat

[@kaazio]

Dzięki za materiał ;)

[@Gustawhp]

Mógłbyś podpowiedzieć, jak wykonać slidera twoim sposobem ?

[@tomwar4564]

hey wytłumacz proszę dlaczego ---left --right? Proszę doprecyzuj działanie tego rozwiązania -- :) Czemu akurat js a nie jq w którym jest coś takiego jak toggleClass? Dzięki

[@mwohae4372]

Dziękuje! :)

[@JZP]

Proszę

[@michacebula1880]

Chcemy odcinek z Event Delegation! 😀

[@JZP]

Już jest 😁 sprawdź w dodanych filmach!

[@michacebula3692]

@@JZP a to przepraszam ! 😁👍🏼

[@ukaszkendra6606]

mam pytanie odnośnie dwóch funkcji, w 46 linii kodu zaczyna się funkcja która odpowiada za operowanie galerią za pomocą klawiszy na klawiaturze wyszedł tam dość rozbudowany if czy zastąpienie go switch nie uprościło by trochę kodu? Druga rzecz w 62 drugiej linii jest funkcja "zamykania" POPUP przy kliknięci poza zdjęciem i czy if w tej funkcji nie można zastąpić operatorem warunkowym?

[@kacper4368]

Zacząłem swoją przygodę z programowaniem od kilku dni, materiały z Waszego kanału świetnie się sprawdzają. Chciałbym się spytać jak zrobić to co na materiale 1:17:05 z tym wpisaniem pomiędzy kilka wierszy "tabindex"? Nie ukrywam że mocno by to ułatwiło w pisanie kodu w przyszłości. Świetna robota :D

[@JZP]

Możesz np. przytrzymać alt i kliknąć w różnych miejscach :)

[@PURPLEBLACK]

Spytam tutaj żeby był ruch: Czemu wstawiles script na koniec body jak script + defer w head spowoduje ze script bedzie sie pobieral jednoczesnie ze strona i dzieki temu strona cala pobieze sie szybciej?

[@JZP]

Żeby nie obciążać nowych osób zbyt dużym natłokiem informacji :(

[@MT-07-Rookie]

a jak zrobić tak żeby móc wrzucać zdjęcia bezpośrednio przez stronę a nie przez kodowanie? coś jak na instagramie czy facebooku?

[@dzejes396]

Bardzo pomocne nagranie - dałem radę! :) Mam tylko taki problem, że jak otworzę zdjęcie (powiększenie) i je zamknę chcąc otworzyć inne - następuje mignięcie dużego zdjęcia i szybki powrót do galerii. Momentalnie "łapka" zmienia się w kursor i muszę odświeżyć stronę, żeby znowu poprawnie działało - co może być przyczyną takiego stanu rzeczy?

[@krzysztofozga4842]

Dziękuję:)

[@DK-ug4tn]

Hej. Super materiał! Mam tylko pytanie. Dodaję strzałkę lewą w html i jest czerwona, przez to nie mogę jej dodać jako finalny "przycisk" w lewo na stronie. Widziałem, że robisz podkreślenie jej, ale nie mogę tego zrobić.

[@JZP]

Prawdopodobnie musisz zmienić jej style w CSS :)

[@fuukowatty9817]

W moim przypadku po console.log(e) dostaje odrazu img src tak jak u ciebie e.target

[@fuukowatty9817]

a dopiero po pod koniec projektu gdy modyfikowalem forEach'a juz moglem uzyc e.target ...

[@truix1255]

Świetny tutorial!!! :) Prośba o podpowiedź Szanowną Społeczność. Chciałbym w głównej galerii zostawić tylko dwa zdjęcia na pierwszym "KOT" na drugim "PIES". Klikając w zdjęcie "KOT" wyświetli mi się ono w popup'ie i będę mógł przeglądać, dajmy na to jeszcze, 3 zdjęcia innych kotów, które NIE są widoczne w głównej galerii (gdy popup jest zamknięty). Analogicznie dla drugiego zdjęcia PIES. Co w takim przypadku? Utworzyć dwa elementy Node List np THUMBNAILS_KOT i THUMBNAILS_PIES?

[@Cherryyy__]

można wiedzieć co to za motyw do vsc? :)

[@JZP]

Winter is coming Dark :)

[@jaskier__]

Fajny odcinek zwłaszcza że mój CSS kuleje a taka galeria będzie bardzo przydatna

[@kng-jw3sr]

co robić gdy te zdjęcia wolno się ładują ?

[@JZP]

W pierwszej kolejności najlepiej jest zmniejszyć ich rozmiar a same zdjęcia poddać kompresji :)

[@kng-jw3sr]

@@JZP ok, dzięki

[@konradkedron5676]

Fajnie by było gdybyś nakręcił odcinek jak do takiej strony dodać interaktywne menu plus np możliwość założenia konta i zalogowania oraz dodatkowe podstrony (na jednej stronce koty na następnej psy a na kolejnej yyy jeże?) 😁 ogólnie pełnoprawna strona

[@_SadekTV]

dla poczatkujacych byłoby to prawie ze nie do ogarniecia plus odcinek by trawal z 4h

[@Informatyka-u3p]

Jak zrobić galerie filmów, które są na KZbin czyli, żeby była galeria a następnie klikając na miniaturkę filmu by się przenieść na KZbin.

[@JZP]

Najrpościej jest objąć zdjęcia w element

[@RobertTracz-fg7tp]

Chyba jakieś modyfikacje weszły finalnie bo u mnie nie mogę zmienić wielkości X do zamykania okienka i < > zamieniłem na graficzne ale nie mogę pozbyć się tła w kształcie koła. Po za tym petarda :)

[@WitSzu97]

Super film! Tylko mam pewien problem, mianowicie zrobiłem podobną galerię, ale gdy w DevTols zmieniam urządzenie na którym ma być wyświetlana strona to wszystko się psuje, jak to mogę naprawić, żeby ta strona się na wszystkich urządzeniach się dobrze otwierała?

[@JZP]

Hej! Czy wiesz czym jest Responsive Web Design (RWD)?

[@WitSzu97]

@@JZP nie wiem, ale już wygooglowalem i spróbuje to ogarnąć, dzięki 😁

[@WitSzu97]

@@JZP ciężko mi to pojąć, czy moglibyście nagrać taki poradnik jak to zrobić? Szukałem w Google i na yt, ale słabo to jest wyjaśnione, a wiem, ze Wy to zrobicie idealnie, żeby taki lajk jak ja to zrozumie😁

[@JZP]

@@WitSzu97 Tak, planujemy taki poradnik!

[@Rudzix66]

Cześć, po pierwsze super film! Muszę zrobić u siebie coś podobnego tylko że mam z 12 zdjęć i one musza być w jednym wierszu a nie w kolumnach. Jak zrobić strzałkę żeby zdjęcia się przewijały - czyli na ekranie widać 5 zdjęć a user klika strzałkę w prawo i zdjęcia się przewijają od prawej do lewej żeby było widać 5 kolejnych

[@JZP]

Cześć! Wyjaśniamy to w naszym filmie 'Kurs Javascript od zera'

[@Rudzix66]

@@JZP Cóż za szybką odpowiedź! Sprawdzę gdy obejrzę ten świetny film. Dziękuję za odpowiedź!

[@Rudzix66]

Oj chyba się nie zrozumieliśmy 😆. Mam na stronie 12 zdjęć w rzędzie (flex row) około 5 się mieści na moim ekranie a pozostałe wychodzą po za diva ale jest overflow hidden. Mam strzałki które po kliknięciu powinny przesuwać zdjęcia zależnie od kierunku w którym prowadzi strzałka i tu się zaczyna problem. Jak zrobić aby po kliknięciu w strzałkę zdjęcia się przesuwały i było widać kolejne załóżmy 5

[@JZP]

@@Rudzix66 No tak, zrozumiałem o co chodzi - możesz użyć podobnego mechanizmu do manipulowania transform: translateX i przesuwać swoją galerię w prawo lub lewo :)

[@spoonfilms4937]

Może czas na jakiś dłuższy odcinek dla osób które są już na jakimś etapie coś typu tworzenia forum internetowego albo coś jeszcze bardziej skomplikowanego

[@lechf1]

Ja wiem, że głównie o froncie tutaj mówcie, ale może coś o GraphQLu dla laików? :) P.S Pozdro Kapa z Bursztynowej :)

[@JZP]

Możliwe, że GraphQL pojawi się przy okazji Next.jsa - a planujemy coś na ten temat nagrać. Kłaniam się nisko i również pozdrawiam ;)

[@PURPLEBLACK]

No i gitara

[@nyupyu]

Lajk za kotki :D

[@JanKowalski-dw1hk]

Strasznie szybko tu tłumaczysz.

[@normanfpv5977]

w eventListenerze pod przycikaniem klawiszy, odwróciłbym logikę i dałbym if(POPUP.classList.contains("hidden")) return; Dzięki temu nie ma dodatkowej klamry w funkcji i dzięki temu kod jest jeszcze bardziej czytelny.

[@yansfourkipi3700]

Dzięki!