Aplikacje no-code z Bubble: Popup z przeglądarką zdjęć

0:00W tej lekcji nadal kontynuujemy naszą

0:02przygodę ze stroną listingu i tym razem zajmiemy się tutaj sekcją Photos.

0:06Na chwilę obecną mamy ją tutaj tylko za

0:08modelowane, a powinna ona domyślnie wyglądać w ten sposób, czyli będziemy

0:12wyświetlać tutaj zdjęcia, a także dodamy taką własną,

0:16bardzo prostą przeglądarkę do zdjęć, która wzorowana jest przykładem

0:19pochodzącym z kursu Gregory'ego Johna z serwisu Bild am Radio.

0:24Zresztą w tym kursie znajdziesz mnóstwo

0:25wskazówek i mnóstwo rad, które tam udziela.

0:28Ja staram się je przenosić, ponieważ uważam, że są niesamowicie przydatne

0:32i każdy szanujący się Babel developer powinien z nich korzystać.

0:35A więc przystąpimy do pracy.

0:38Wracamy na stronę naszego listingu.

0:41Jeżeli przekazujesz tutaj dynamicznie wartości, tak jak pokazałem to w

0:44poprzedniej lekcji i teraz po odświeżeniu strony, nie masz tutaj żadnych tekstów,

0:49to winowajca jest jeden, czyli Twój pasek adresu URL.

0:52Pamiętaj, że musisz tu przekazywać zawsze

0:54parametr l równy właśnie temu listing owi, który chcesz akurat tutaj wyświetlić.

1:00Jeśli dziwi Cię ten zapis tutaj, ten procent i 20, to jest to po prostu nazwa

1:05Sakura Heaven ze spacją, która została przez Babel odpowiednio zakodowana.

1:09To tak zwanego URL encoder.

1:12Ponieważ w pasku adresu nie możemy

1:14wyświetlać spacji, nie możemy wyświetlać znaków specjalnych, to Bubble zadbało o

1:17to, aby się to odpowiednio wyświetlało i właśnie tak zostało to zakodowane.

1:22Tak więc jeżeli nie masz tutaj tekstów,

1:24nie przekazałeś sobie tego parametru, to wróć na stronę index ową lub gdziekolwiek,

1:28gdzie korzystamy właśnie z tej grupy i wyświetlamy rekordy z OZ Listing.

1:34Tam kliknij na kartę i wtedy zostaniesz

1:36przeniesiony na tą stronę z tym odpowiednim parametrem przekazanym.

1:41A więc wracamy do edytora i przystępujemy do pracy nad grupą Photos.

1:47To, co chcę zrobić tutaj w pierwszej kolejności.

1:50Całej tej grupy przekazać.

1:52Ustawić w zasadzie typowy content na iOS Listing.

1:56I będzie to parent group Listing.

2:00Pozbywamy się tego koloru.

2:04Następnie layout zmieniamy w tym przypadku na All in Parent.

2:10Kolejno podajemy tutaj następną grupę.

2:13Ja będę ją sobie chciał tutaj wyceny ować.

2:17Nazwiemy ją.

2:19Po prostu photos i na rok.

2:25I tym razem będzie to rok.

2:29Gap Space ustawiony dla kolumn na 32 piksele.

2:34Pozbywamy się tutaj minimalnej szerokości.

2:38Minimalną wysokość chwilowo możemy zostawić taka jaka jest.

2:41Oczywiście potem sobie to wyzeruje.

2:44Następnie dodaję tutaj obrazek.

2:50Nazwijmy go.

2:53Main image, czyli main img.

3:00Będę tutaj chciał przekazać dynamicznie wartość, jaką?

3:03Oczywiście nasz główny obrazek z setu,

3:07a więc parę grup wink, którego chwilowo tutaj nie mamy

3:10ustawionego, bo nie przekazaliśmy tego do Photos i Nero Group.

3:14Musimy oczywiście o to zadbać, czyli ustawić OS listing.

3:18Parents Group a jest listing i dopiero

3:21teraz mogę się odnieść do elementu rodzica.

3:25I wskazać tutaj. Image Mail.

3:28Jak pamiętasz ustawiliśmy to jako listę, więc można tutaj wskazać pierwszy item,

3:32ponieważ z resztą i tak zawsze będziemy mieć tam tylko jeden obrazek.

3:36Unikam w ten sposób.

3:38Tu odznaczamy minimalną szerokość X, aby

3:41zachować aspect ratio, w tym przypadku równe 1 do 1.

3:47OK, wróćmy tutaj do edytora i wybierzmy

3:50sobie tym razem grupę i wstaw ją w odpowiednie miejsce.

3:55Czyli do grupy Photos inner.

3:58Obrazek chcę przesunąć do lewej strony tą grupę tutaj do prawej.

4:05Nazwijmy ją.

4:08I photos list.

4:12Grób.

4:13Będzie to kolumn.

4:17Gap Space Ring 32 piksele.

4:22Odznacza on tutaj minimalną szerokość.

4:28I to co chcę zrobić, to tak zaznaczyć sobie ten obrazek.

4:34Skopiować.

4:36Zanim go tutaj wkleję,

4:37to do tej grupy photos list G jeszcze muszę przekazać oczywiście

4:41odpowiedni set, czyli OST listing i Parent group as listing.

4:47Dopiero teraz, jeżeli wkleję tutaj ten obrazek.

4:52Tu nie będę miał błędu, że odnosimy się do elementu rodzica, który nie istnieje.

4:56Tylko jeszcze tak to ustawmy.

4:58Suma dla obrazka i tu też ustawmy sumę dla obrazka.

5:03I teraz tu chcę się odnieść nie do image

5:07main, tylko images list i wybrać tutaj First item.

5:13Przechodzimy.

5:15To będzie tak.

5:17Image.

5:18On.

5:20MG Na razie zostawmy taką nazwę.

5:24To co chcę zrobić to odznaczyć, odznaczyć aspect ratio, wywalić minimalną wysokość,

5:29ale ustawić minimalną szerokość na 280 pikseli.

5:35I odznaczyć tę opcję Visit content.

5:40Teraz zaznaczam ten obrazek i go do pliku.

5:46Będzie to Image 2.

5:50Pozostawiam.

5:51Dokładnie takie same właściwości zaznaczam grupę foto z list.

5:59Odznaczamy minimalną wysokość.

6:03To, co jeszcze muszę dla niej zrobić, to rozciągnąć ją na całą dostępną wysokość.

6:07A więc zaznaczam tą opcję.

6:10Teraz wygląda to już mniej więcej tak jak powinno.

6:12Czyli mamy tutaj główny obrazek po lewej stronie i obrazki z listy.

6:18Pierwszy to oczywiście musimy wskazać drugi, czyli.

6:22Hitem.

6:25Wybieramy opcję Item hash i mówimy, że ma to być.

6:302. Czyli.

6:32To wyświetlamy pierwszy obrazek to wyświetlamy drugi.

6:35Dla ułatwienia możemy to zmienić w ten sposób.

6:38Czyli nie Wheels item tylko item 1o.

6:42Teraz wygląda to dużo lepiej.

6:44Czyli odnieść się do listy i Magic list i

6:46wyślij mi tu item 1 a to wyświetli numer 2.

6:50Dodajmy jeszcze zaokrąglanie narożników

6:53równe 8 pikseli dla wszystkich tych obrazków.

7:02I zerknijmy do podglądu.

7:05Odświeżamy.

7:09Jak widzisz, przekazaliśmy tutaj

7:10odpowiednie obrazki z naszego rekordu Status listing, czyli tutaj Sakura Heaven.

7:17Mamy główny obrazek i mamy obrazek

7:19pierwszy z tej listy i obrazek drugi z listy.

7:21Ta co go jeszcze tutaj potrzebuje, to.

7:26Tego przycisku mogę go sobie zaznaczyć, czyli Share Group.

7:30Wstawić go bezpośrednio tutaj do Photos

7:33Group, gdzie mieliśmy ustawione all in to parent.

7:38Wybieram pakiet.

7:40Przesuwam go tutaj w prawy dolny róg.

7:44I ustawiam marginesy równe.

7:48Szesnaście pikseli od prawej.

7:51I 16 pikseli od dołu.

7:55Zmieniamy nazwę na.

7:59Photos Group.

8:03Tutaj ten tekst.

8:06Na wallu Photos.

8:12Kolejno zmieniam ikonkę na.

8:18Gallery wait linear.

8:20Zmień jej nazwę na Gallery.

8:25I zerknijmy teraz do podglądał.

8:29Odświeżamy.

8:32Tutaj nasz przycisk wyświetla się w odpowiednim miejscu,

8:35a my musimy teraz zadbać o to, aby po jego kliknięciu wyświetlił się nam pop up.

8:40A tam dodamy zaraz właśnie taką prostą przeglądarkę, żeby ułatwić sobie życie.

8:44Wróćmy do edytora i skopiuj my pop up ze strony Serge'a.

8:53To pokażę Ci dodatkową sztuczkę.

8:55Jak pamiętasz.

8:56Tutaj dla tego popup u dodaliśmy już jedno

8:59workflow, które po kliknięciu w tą ikonkę go zamyka.

9:02Jeżeli chcesz przenieść element razem z workflow, które już do niego dodałeś,

9:06wystarczy, że zaznaczysz cały taki element.

9:08U nas jest to Filters Popup.

9:10Wybierzesz Edit i wybierzesz tutaj opcję kopii Special.

9:15I kopie ład Workflow.

9:17Teraz możemy wrócić na stronę listingu.

9:23Zaznaczyć całą stronę i wybrać Edit Pass Special base Tweet Workplace.

9:29I teraz nasz popup zostanie dodany.

9:30A ja jeżeli przejdę do workflow to jak widzisz mam

9:34już ten workflow, którego zamyka po kliknięciu w ikonkę Close.

9:39Wróćmy więc do designu i poprawimy sobie cały ten popup.

9:44Tym razem będzie to po prostu Gallery popup.

9:49Przechodzę do layoutu i zmieniam tak layout na.

9:53Column maksymalna szerokość 768 pikseli.

9:58Nie potrzebuję tutaj minimalnej wysokości.

10:06I tak co mamy tutaj jeszcze do zrobienia?

10:09Tą górną sekcję, czyli header możemy sobie zostawić.

10:13To będzie.

10:16Gallery pop up Cheddar Group.

10:19To co będę chciał zrobić tutaj, to przekazywać nazwę listingu.

10:23Jak to zrobić? Najpierw muszę sobie tutaj ustawić.

10:27Typowy content dla całego pop upu.

10:29Będzie to, jak się domyślasz, jest

10:31listing, a kolejno musimy przekazać tutaj data source.

10:34Jaki listing chcemy wyświetlić.

10:36Oczywiście ten, który mamy tutaj ustawiony już dla Page wrapper, a dodatkowa para.

10:41Wybieramy sobie ten listing po prostu pobierając go z paska adresu URL.

10:45A więc mogę się tutaj odnieść do Page wrapper.

10:51I wybrać listing, który jest tam przypisany.

10:54Dzięki temu mogę przekazać to teraz tutaj do header a.

11:01Parents Group of Listing.

11:04I tutaj ten tekst zmienić na Parents Group as Listing Display.

11:10To co chcę zrobić, to tutaj dla całego tego kontentu pozbyć

11:14się wszystkiego i wszystkich tych elementów.

11:21DVD itd.

11:23Jest to mi chwilowo niepotrzebne.

11:34Zaznaczam całą tą grupę to będzie.

11:39Gallery Popup Content.

11:49Przechodzę do layoutu.

11:52Ustaw ma tutaj przynajmniej chwilowo.

11:54Oznaczmy tę opcja minimalną wysokość na powiedzmy 340 pikseli.

11:58Tylko chwilowo.

12:00Pozbywamy się też tych marginesów.

12:02Ponieważ nie mamy tutaj już all in to parent, są one niepotrzebne.

12:07Taka mamy header chwilowo content i sprawmy sobie jeszcze tutaj ten footer.

12:13Zmieńmy tak jego nazwę na.

12:18Gallery.

12:21Pop up footer group.

12:24I tak będę chciał się pozbyć.

12:27Tego i tego.

12:30Następnie wracam na naszą stronę listingu i wykorzystuję elementy, które już tutaj

12:35mamy dodane, mianowicie tą grupę z ratingiem.

12:39Po prostu ją sobie kopiuję.

12:43Otwieram pop up i wstawiam do naszego foldera.

12:49Co ją tak przenieść w to miejsce?

12:53I tak ikonka 24 na 24 piksele.

12:56A ten tekst.

12:59Chcę się pozbyć.

13:01Tej wartości, natomiast czcionkę tutaj zmienić na body.

13:05A w zasadzie może nie na body, tylko na healing szóstego typu.

13:11I jeszcze odsunąć te elementy w środku.

13:13W tej grupie nie 4 tylko a powiedzmy 8 pikseli.

13:19Wracamy znowu na stronę listingu

13:22i tym razem zaznaczam tutaj całą tą grupę Host Info Group.

13:29Jak widzisz ja tutaj dodałem delikatną

13:30poprawkę, a mianowicie wstawiłem tutaj ikonkę.

13:34O takiej wartości i o takim kolorze.

13:37Zaraz zobaczysz jak ona wygląda.

13:39Ja zaznaczam całą tą grupę kopiuję.

13:42Przechodzę do pop upów i wstawiam ją sobie tutaj.

13:50To co chcę zrobić, to dostosować szerokość tej grupy do contentu.

13:55Powinniśmy to zrobić?

13:56Zaraz zobaczmy.

13:57Tak, tylko pewnie będziemy musieli jeszcze

13:59zadbać o to, aby ta grupa w środku też się dostosowywała.

14:03Czyli grupa hostess grup też powinna dostosować sobie szerokość do contentu?

14:08OK, teraz wyświetla nam się to już całkiem fajnie.

14:12Mieliśmy tę grupę w takim położeniu.

14:16I tutaj zmienimy tylko na futra.

14:19Oznaczmy sobie tą szerokość.

14:22Pozbądźmy się tej minimalnej wysokości.

14:27I dodajmy padding.

14:29Od góry i od dołu równe szesnaście pikseli.

14:33I to co chcę jeszcze zrobić dla całego

14:35futra, to ustawić tutaj background flat color.

14:40Nasz kolor Primary 25. OK.

14:45Teraz zadbajmy o to, aby ten footer się tutaj wyświetlał po kliknięciu w ten

14:48przycisk vol photos, a więc dodajemy do niego workflow.

14:54I oczywiście.

14:57Stały element.

15:00Gallery Popup.

15:02Przejdźmy do podglądu.

15:08Klikam na przycisk.

15:10W to miejsce została przekazana nazwa

15:11naszego listingu, którą aktualnie wyświetlamy, czyli Sakura Heaven.

15:15Mamy tu informacje o hoście, o jego ratingu.

15:18Możemy zamknąć nasz popup i uzupełnić oczywiście tutaj content.

15:22A więc zamykamy i wracamy do edytora.

15:27To, co będę chciał zrobić.

15:30To tak zaznaczyć sobie cały ten obrazek

15:33mamy mieć i go po prostu chwilowo skopiować.

15:39Otworzyć pop up.

15:41Wstawić go tutaj do Gallery Popup Content Group.

15:45Oczywiście mamy tutaj błąd, że odnosimy

15:47się do elementu rodzica, który nie istnieje.

15:49Ale to nic. Zaraz to poprawimy.

15:52Na razie kliknij Clear Expression, żeby nie mieć tutaj błędu.

15:56I weźmy tak to będzie Gallery.

16:00Main Image.

16:02Przechodzę do layoutu i tym razem zmieniam aspect ratio na 3 do 2.

16:13Kolejno dodaję tutaj sobie repeat thing grupę.

16:18Jej nazwa to galery.

16:24Images.

16:25R.G..

16:29I tak odznaczamy tutaj.

16:32Minimalną szerokość.

16:34Wysokość chwilowo sobie zostawmy.

16:36Natomiast tutaj zmieniamy to na RAW.

16:41Typowy content.

16:43Zaraz będziemy to musieli ustawić.

16:45To co ja chcę zrobić, to zostawić tutaj.

16:49Jeden rząd, a w zasadzie może niejeden rząd, ponieważ nie wiemy ile obrazków

16:54haseł doda do swojego listingu, więc zróbmy to nieco inaczej.

16:58Odznaczamy tę opcję tu wybieramy 100%,

17:01natomiast będę chciał wyświetlać standardowo 6 kolumn.

17:06Separatory ustawiamy na solid.

17:10Nasz kolor biały, bo taki kolor ma również pop up i tutaj szerokość 16 pikseli.

17:19I tak do środka będę chciał wstawić obrazek.

17:24Zerknijmy, czy nam to wystarczyło we właściwe miejsce.

17:29Wskoczyła do Rep thing grupy to będzie po prostu.

17:34Galery.

17:37Image img.

17:40Oczywiście bez literówek.

17:47Zaokrąglenie narożników równe 8 pikseli.

17:52I teraz przejdźmy do zakładki Layout.

17:56Tu będę chciał nadać stałą szerokość.

17:59W moim przypadku będzie to 90 pikseli i aspect ratio 3 do 2.

18:08To co mogę zrobić, to zaznaczyć całą grupę i pozbyć się minimalnej wysokości.

18:16I jeszcze tak dostosować tutaj fit fit tu

18:19content i olać całą tą repeat grupę w naszym popie.

18:24Czyli oczywiście nie tutaj, tylko tutaj.

18:28I teraz.

18:30Co chcę tutaj przekazywać.

18:32Obrazek z Karen Self Think.

18:34Tego na razie nie ustawiliśmy, więc musimy

18:37zadbać o przekazanie odpowiedniego kontentu i tutaj odpowiedniego kontentu.

18:41Aby to zrobić, zastosujemy pewną sztuczkę,

18:44a mianowicie wykorzystamy State Custom State do tego, aby wyświetlać

18:49odpowiednie elementy i kolejno je przełączać.

18:51Zaraz zobaczysz jak to zrobimy.

18:53Dla całego pop upów będę chciał dodać dwa custom state.

18:58Będzie to tak.

19:01Main Image.

19:06A może inaczej image main.

19:08Zróbmy to tak image main będzie to po prostu obrazek.

19:15Czyli typ image.

19:18Na razie nie ustawiamy tutaj żadnego

19:19default value, ponieważ musielibyśmy tutaj na stałe

19:22wczytać jakiś obrazek, a ja tego nie chcę robić.

19:26Następnie dodajemy tu images list.

19:31To będzie też image.

19:34Ale oczywiście lista, skoro tu jest lista w nazwie.

19:38I teraz zróbmy to w ten sposób.

19:41Dla głównego obrazka.

19:43Tu chcę sobie wyciągnąć wartość z tego custom statu.

19:47Czyli.

19:50Gallery Popup.

19:52Image Small.

19:55I to wszystko.

19:56Czyli po prostu ten obrazek, który przypiszemy jako State Image Machine.

20:01To z kolei dla tej całej grupy znowu chcę wybrać.

20:08Typ to muszę wskazać, że to będą obrazki, czyli to będzie image.

20:12A data Source będzie to po prostu ten

20:15stats z obrazkami, czyli znowu gallery pop up i tym razem state o nazwie Images List.

20:23Już tutaj mamy po prostu stały typ contentu.

20:25Będą to obrazki, a pochodzące właśnie z tego custom stage.

20:30I tak na chwilę obecną nic nam to nie da,

20:32ponieważ jak pamiętasz nasz custom stat jest chwilowo pusty.

20:36Jak więc możemy zadbać o to, aby go tutaj odpowiednio ustawiać?

20:40Możemy do tego wykorzystać workflow, ale kiedy ja chcę to zrobić w ten sposób,

20:45że klikając tutaj w ten przycisk View All photos będę chciał nie tylko wyświetlić

20:51nasz popup, ale również ustawić tam dynamicznie state.

20:55Możemy to zrobić mega prosty sposób, po prostu przechodząc do tego workflow.

20:59Tutaj foto z grupy script.

21:01Tu pokazujemy nasz popup, ale jako pierwszy krok chcę tutaj wybrać State.

21:07I zdefiniować status elementu jakiegoś oczywiście naszego.

21:10Gallery Popup.

21:12I teraz mamy tutaj custom state do wyboru.

21:15Ja chcę zdefiniować oba.

21:21I tak.

21:22Wariat dla Image Pan to będzie.

21:26Parents Group as Listing.

21:29Bo jak pamiętasz tutaj cała ta grupa to właśnie ta Photo Group.

21:33Aha, tutaj nie mamy.

21:34Możemy ustawić jej content.

21:36To będzie OS Listing

21:38i Parent group of listing, czyli po prostu ten listing, który tutaj wyświetlamy.

21:42W ten sposób możemy się w Workflow odwołać do $this group a jest listing.

21:50I co tu chcemy wyświetlić?

21:52Co by tu przekazać?

21:53Główny obrazek, czyli image main.

21:57First item, czyli jako ten główny obrazek

22:00w pobawię wyśle główny obrazek jaki jest przypisany do tego listingu.

22:05Natomiast co chcemy wyświetlić tutaj w Images List.

22:08Otóż chcemy to wyświetlić zarówno te

22:10pozostałe obrazki, jak i ten główny obrazek.

22:13Dlatego też mówiłem Ci, że

22:15musieliśmy to Image Mail ustalić jako listę, a nie jako pojedynczy obrazek.

22:19Ponieważ teraz możemy wykorzystać kolejną

22:21sztuczkę w Babel i połączyć dwie listy w jedną.

22:25Aby to zrobić, najpierw odnosimy się do DIV Group.

22:29To jest listing.

22:32Image Mail to jest lista jak pamiętasz nie pojedynczy obrazek tylko lista.

22:36I teraz wybieram sobie tutaj merge, a w zasadzie przez to zaczynam wpisywać merge

22:40i mam Merge white, czyli połącz to listę z.

22:43I teraz muszę przekazać drugą listę, czyli DIS Group a S Listing.

22:48Images List.

22:50I Babel zrobi to za nas.

22:52Powiedzieliśmy Babel, aby teraz połączył ze sobą obie te listy i ustawił je jako

22:57custom state o nazwie Images List dla naszego Popup u.

23:02Wiem, że na początek może to dosyć

23:03skomplikowanie wyglądać, ale jak widzisz nie jest bardzo trudne.

23:06Gdybym tutaj po prostu ten image zestawił jako pojedynczy obrazek, to nie jestem w

23:10Babel w stanie w prosty sposób połączyć jednego itemu z listą.

23:15A ponieważ zamieniliśmy to image main na listę, to mogę wykorzystać po prostu merge

23:19width i połączyć w taki prosty sposób obie listy.

23:23Skoro to już mamy ustawione, to zobaczmy czy nam to odpowiednio zadziała.

23:27Przejdźmy do podglądu.

23:29Odświeżamy.

23:32Klikamy Wolf Photos.

23:35Jak widzisz tutaj to zadziałało.

23:37Ten główny obrazek się ustawił tak jak powinien.

23:39Jest to dokładnie ten sam obrazek.

23:42Które mamy tutaj, czyli ten główny.

23:44Natomiast nie wyświetla nam się tutaj ta

23:45lista z obrazkami, ale musimy to pewnie zaraz poprawić.

23:49Wracamy do designu i zerknijmy sobie na nasz popup.

23:56Na tą listę gallery images to przekazujemy

23:58odpowiednia odpowiednią lista obrazków, czyli nasz custom stats.

24:03Ale nie ustawiłem tutaj tego.

24:06Przekazywania danych do poszczególnego itemu.

24:08Jak się domyślasz, wybieramy tu po prostu Current image.

24:13I to wszystko co musimy zrobić.

24:16Otworzyliśmy stronę jeszcze raz.

24:18Klikamy na.

24:19Tutaj ten przycisk.

24:22Jak widzisz wszystko działa fantastycznie.

24:25Mamy tu ten pierwszy obrazek główny i dodatkowo te pozostałe, które mamy tutaj.

24:30A więc Bubble zadbał o to, aby połączyć te

24:32wszystkie obrazki w jedną listę i je w tym miejscu wyświetlić.

24:35Teraz chciałbym, aby po kliknięciu w taki

24:37obrazek, ten tutaj pojedynczy zmieniał się ten główny.

24:41Jak to zrobić? Już ci pokazuję.

24:44Wracamy tutaj.

24:46Tutaj tylko muszę osobiście ustawić zoom,

24:49żeby mi zadziałało zaokrąglenia narożników, żeby ten obrazek został

24:51dostosowany do tego elementu, który tutaj wyświetlamy.

24:55Jeżeli obrazek jest za duży to bubble jak

24:57mówiłem przytnie go odpowiednio i renderuje, a my teraz dla takiego

25:01pojedynczego itemu znów musimy nadać workflow.

25:06Klikamy więc tutaj.

25:08I co się ma stać po kliknięciu w taki obrazek z listy.

25:12Otóż chcemy ten obrazek, który właśnie

25:15klikniemy ustawić jako state na popup gallery o nazwie mail Czytam Image Mail.

25:23A więc znowu state.

25:27Odnosimy się do galerii pop up.

25:30Kolejno odnosimy się do statku o nazwie Image Main.

25:35Jako wartość chcemy tam przekazać.

25:38Current select image.

25:39Jak widzisz bóbr stara się nam pomóc w każdym momencie w naszej pracy

25:43i sam już wie, że jeżeli kliknę w ten obrazek to po prostu go sobie pobierz i

25:48przekaż tutaj do tego statu, czyli wybrać ten obrazek, który masz w aktualnej

25:52komórce i przekaż go właśnie tutaj jako custom stats.

25:56I to w zasadzie wszystko, co musieliśmy

25:58zrobić, aby zbudować taką naszą customowe przeglądarkę zdjęć.

26:02Możemy wrócić, odświeżyć.

26:07Klikam View photos.

26:10Klikam tu.

26:12I ten obrazek został przekazany.

26:14Klikam tu.

26:15I to się zmienia.

26:16Pablo mówił chwilę to zajmuje tylko dlatego, że obrazki są dość spore.

26:20Natomiast jak widzisz mamy taką super prostą, fajną przeglądarkę zdjęć.

26:23Oczywiście moglibyśmy zadbać o to, żeby była ona dużo większa, albo zainstalować

26:27jakiś plugin, który wyświetlał by te obrazki na pełnej rozdzielczości.

26:31Natomiast jak mówię, ja chcę, żeby

26:33ten kurs był jak najprostszy, żebyśmy korzystali z jak najmniejszej ilości

26:36pluginów, ponieważ te lepsze pluginy z reguły są niestety płatne.

26:40Dlatego też mogliśmy to obejść i zbudować sobie taką własną przeglądarkę.

26:46Mam nadzieję, że zasada działania jest dla Ciebie jasna.

26:49Jak to zrobiliśmy?

26:50Mamy tutaj 2 staty, które nie ustawiamy od razu, ale przekazujemy te wartości

26:54dynamicznie w momencie kliknięcia właśnie w ten przycisk.

26:59Ten przycisk ma tutaj ustawiony Data type na cały listing, który tutaj wyświetlamy.

27:05Dzięki czemu właśnie po kliknięciu w niego

27:09możemy sobie tutaj przekazać dynamicznie ten stat i pobrać właśnie te wartości.

27:15Z tej grupy, czyli z listingu, który tam jest przepisany i powiedzieć, że

27:19image main first item chcemy ustawić jako state image main.

27:25A tutaj, jak już pamiętasz, reagujemy obie

27:28te grupy i uzyskujemy listę ze wszystkimi obrazkami.

27:32Jak więc sam widzisz, Babel pozwala nam na

27:34dynamiczne przekazywanie wartości na kilka różnych sposobów.

27:38W tej lekcji nauczyłeś się, jak przekazywać sobie dynamicznie wartości z

27:42jednego elementu do drugiego za pomocą właśnie statów i odpowiednich workflow.

27:47Ja dziękuję Ci za uwagę.

27:49Zasłużyłeś na nagrodę, że dotarłeś ze mną do tej lekcji.

27:52Zasłużyłeś na chwilę odpoczynku, a my widzimy się już w kolejnej lekcji.