Galeria zdjęć w HTML, CSS i Javascript - poradnik dla początkujących! Bez jQuery!
HTML-код
- Опубликовано: 25 янв 2022
- 👉 Zapisz się na newsletter: zaczynamyprogramowac.pl 👈
🎤 Discord: / discord 🎤
🔥 Zapisz się do grupy na FB: / zaczynamy.programowac 🔥
Link do Githuba:
github.com/FilipMam/lightboxl...
O tagach img pełniących rolę przycisków:
dequeuniversity.com/rules/axe...
Pierwsza strona internetowa to dla wielu osób prawdziwe wyzwanie - nic więc dziwnego, że podczas jej tworzenia sięgamy po zewnętrzne narzędzia takie jak React, Tailwind czy jQuery. Niestety w przypadku tego trzeciego nie jest on zbyt mile widziany wśród potencjalnych pracodawców, dlatego dzisiaj krok po kroku zbudujemy galerię bez użycia jQuery i Lightbox!
Filip Mamcarczyk
Kacper Sokołowski
Serdeczne dzięki dla osób z Discorda, które doradzały mi jak powienien wyglądać projekt
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.
Dzięki za komentarz i radę!
Ś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.
Totalnie się zgadzam, dzięki za miły komentarz!
Super, super dziękuję bardzo 🥰 Wcześniej zrobiłam przy użyciu lightboxa..
Super film jak zawsze 🥰
Super materiał, dziękuję :)
Świetne! Wreszcie zrozumiałem jQuery!
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
Super poradnik. Czekam na lekcje z Reacta :)
Boskie i proste... Przerób to teraz na wersję dla komórek... Będziesz gooroo!!!
Dzięki za materiał ;)
Świetne tego szukałem
Propagacja i delegacja w JavaScript. Fajny pomysł. Pozdrawiam :)
Sztos materiał :)
Dzięki!
Dzięki!
Zrobiłam na raty przez kilka dni, w miarę możliwości czasowych ale jaka radość gdy wszystko działa. Rewelacja wykład super. Dziękuję 🌞🥰
super!
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
Dzięki! To mega miłe :)
Dziękuję:)
Dziękuje! :)
Proszę
Fajny odcinek zwłaszcza że mój CSS kuleje a taka galeria będzie bardzo przydatna
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
Możesz np. przytrzymać alt i kliknąć w różnych miejscach :)
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?
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?
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
dla poczatkujacych byłoby to prawie ze nie do ogarniecia plus odcinek by trawal z 4h
Mógłbyś podpowiedzieć, jak wykonać slidera twoim sposobem ?
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 :)
jak zrobić stronę dla bloga VSC ???proszę o video na ten temat
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
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)
Chcemy odcinek z Event Delegation! 😀
Już jest 😁 sprawdź w dodanych filmach!
@@JZP a to przepraszam ! 😁👍🏼
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
Ś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?
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?
Żeby nie obciążać nowych osób zbyt dużym natłokiem informacji :(
No i gitara
a jak zrobić tak żeby móc wrzucać zdjęcia bezpośrednio przez stronę a nie przez kodowanie? coś jak na instagramie czy facebooku?
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ć.
Prawdopodobnie musisz zmienić jej style w CSS :)
W moim przypadku po console.log(e) dostaje odrazu img src tak jak u ciebie e.target
a dopiero po pod koniec projektu gdy modyfikowalem forEach'a juz moglem uzyc e.target ...
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 :)
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 ;)
Lajk za kotki :D
można wiedzieć co to za motyw do vsc? :)
Winter is coming Dark :)
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
Cześć! Wyjaśniamy to w naszym filmie 'Kurs Javascript od zera'
@@JZP Cóż za szybką odpowiedź! Sprawdzę gdy obejrzę ten świetny film. Dziękuję za odpowiedź!
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
@@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 :)
Jak zrobić galerie filmów, które są na RUclips czyli, żeby była galeria a następnie klikając na miniaturkę filmu by się przenieść na RUclips.
Najrpościej jest objąć zdjęcia w element
co robić gdy te zdjęcia wolno się ładują ?
W pierwszej kolejności najlepiej jest zmniejszyć ich rozmiar a same zdjęcia poddać kompresji :)
@@JZP ok, dzięki
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?
Hej! Czy wiesz czym jest Responsive Web Design (RWD)?
@@JZP nie wiem, ale już wygooglowalem i spróbuje to ogarnąć, dzięki 😁
@@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😁
@@WitSzu97 Tak, planujemy taki poradnik!
Strasznie szybko tu tłumaczysz.
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.