• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Galeria typu lightbox

VPS Starter Arubacloud
0 głosów
438 wizyt
pytanie zadane 29 lipca 2018 w JavaScript przez bicnet Gaduła (4,800 p.)
Cześć,

chciałbym zrobić SWOJĄ galerię typu lightbox i nie chcę użyć gotowe , ponieważ chcę się nauczyć czegoś :)

Tylko potrzebuje od Was kilku porad jak zrobić to najlepiej, zacząłem już, na razie mam kontener ze zdjęciami i diva , w którym by się wyświetlały większe zdjęcia. W JS zacząłem robić na zasadzie zdjęcia wrzucić w tablice i później robić na tablicach. Tylko właśnie w tym miejscu stoję i nie wiem jak to poukładać do kupy.

 

Myślicie, że na tablicach to zrobię bez większego problemu , a może jest szybszy i wygodniejszy sposób?

1 odpowiedź

+3 głosów
odpowiedź 29 lipca 2018 przez Tomek Sochacki Ekspert (227,510 p.)
wybrane 30 lipca 2018 przez bicnet
 
Najlepsza

Miałem akurat chwilkę więc zrobiłem Ci małego poglądowego codepena:

https://codepen.io/Tomek_Sochacki/pen/mjqgVX

tam nie ma zdjęć, są tylko zwykłe węzły tekstowe w elementach DIV, i w modalu również wyświetlam ten pobrany węzeł tekstowy.

Generalnie zasada tam jest taka, że przypinam eventa do kontenera i w ten sposób nie muszę podpinać event click do każdego div (u Ciebie będzie to "do każdej miniaturki"). Następnie analizuję czy kliknięcie dotyczy elementu o klasie item (czyli tej miniaturki) i jeśli tak to pobieram sobie wartość textContent tego elementu - u Ciebie będzie to np. wartość src obrazka img umieszczonego w elemencie item.

Następnie ja do modala przekazuję bezpośrednio tę wartość, Ty natomiast możesz mieć na serwerze np. dwie wersje każdego zdjęcia - miniaturkę oraz pełne, np.

foto-thumbnail.jpg
foto-full.jpg

i po prostu jak pobierzesz ten ciąg zapisany w src to podmienisz sobie thumbnail na full i w modalu umieścisz img, któremu ustawisz właśnie to nowe src z obrazkiem "full".

 

Tak z grubsza myślę, że na początek takie rozwiązanie może być. Masz w sumie prawie że gotowca :) tylko troszkę nad nim popracuj, a jakby co to pytaj, chętnie pomogę.

komentarz 30 lipca 2018 przez bicnet Gaduła (4,800 p.)
Cześć,

też masz na to fajny pomysł, tylko ja chce jeszcze mieć tam arrow left/right ,a przy 1 obrazku brak arrow left i przy ostatnim brak arrow right i dlatego zacząłem myśleć nad tablicami i nie wiem czy w twoim przykładzie również osiągnę ten efekt.

 

Pozdrawiam
komentarz 30 lipca 2018 przez Tomek Sochacki Ekspert (227,510 p.)
Jak chcesz tablice to jest kilka sposobów, możesz np. stworzyć galerię z poziomu JS i po prostu na podstawie danych obrazków trzymanych w tablicy... pozwoli Ci to na bardzo łatwe tworzenie paginacji i jej konfigurację albo wyłączenie i np. podciąganie na onscroll kolejnych obrazków itp. Dzięki temu możesz dowolnie poruszać się po elementach tablicy.
komentarz 30 lipca 2018 przez bicnet Gaduła (4,800 p.)
Tutaj na razie zacząłem i zrobiłem takie coś, tylko właśnie utknąłem na tym, gdzie mam forEach i żeby mainImg miał src obrazka wcześniej klikniętego, do tego chce te strzałki to żeby .screen wiedział, że to jest zdjęcie 4/8 a nie przykładowo pierwsze.

https://codepen.io/anon/pen/xJpEZV
komentarz 30 lipca 2018 przez Tomek Sochacki Ekspert (227,510 p.)
Tu masz na mega szybko trochę zmodyfikowany mój przykład, bo nie mam teraz zbytnio czasu wdrażać się w Twój kod:

https://codepen.io/anon/pen/PBEbog?editors=1010

Zrobiłem tak, że galerię generuję z poziomu JS na podstawie elementów trzymanych w tablicy "data", a następnie analizuję różne eventy itp.

Generalnie ten kod nie jest dobry... np. id jest jako zmienna globalna co nie powinno mieć miejsca ale wydaje mi się, że na początku nauki łatwiej będzie Ci zrozumieć ideę tego rozwiązania więc nie bawiłem się tu w żadne lepsze praktyki itp.

Tak samo zauważ dużą powtarzalność kodu, np. event dla prev i next jest praktycznie identyczny z różnicą w inkrementacji/dekrementacji id. Spróbuj sobie sam to zrefaktoryzować, taki zapis powinien być jednak na początku dla Ciebie jaśniejszy.

 

Wydaje mi się, że ogólnie masz tam pokazany jakiś sposób, może nie najlepszy ale chodzi o ogólną ideę :) (do żadnego code review firmowego to takiego kodu nie dawaj bo Cię zjedzą żywcem :)
komentarz 30 lipca 2018 przez bicnet Gaduła (4,800 p.)
Okej, dzięki :)
komentarz 30 lipca 2018 przez bicnet Gaduła (4,800 p.)

@Tomek Sochacki,

Jednak nie dawało mi spokoju to, że nie jestem w stanie napisać takiej galerii sam i zacząłem, po kilku godzinach, prawie że skończyłem, tylko nie wiem jak zrobić, żeby każde zdjęcie się animowało (nie tylko pierwsze). Dla pierwszego działa, no bo jest animation na img , a później się zmienia tylko src i nie wiem jak to animować. Masz jakiś pomysł?

A no i jeszcze to z miniaturkami muszę ogarnąć , ale też nie wiem jak.

 

https://kosek1.github.io/small-projects/gallery/

https://github.com/kosek1/small-projects/tree/master/gallery

https://codepen.io/anon/pen/jpYZYM (wrzuca na arrow display: none, nie wiem czemu, bo na github pages działa normalnie)

komentarz 30 lipca 2018 przez Tomek Sochacki Ekspert (227,510 p.)
Dziś nie wiem czy będę miał czas, najwyżej przypomnij mi się jutro (na PW albo komentarzem tutaj) pod wieczór to spróbuję przeanalizować  Twój kod i zobaczymy.
komentarz 30 lipca 2018 przez bicnet Gaduła (4,800 p.)
Nie no na spokojnie , w wolnym czasie :)

Dzięki

Podobne pytania

0 głosów
0 odpowiedzi 712 wizyt
pytanie zadane 10 lutego 2019 w HTML i CSS przez GaryNJ Nowicjusz (240 p.)
+3 głosów
1 odpowiedź 338 wizyt
pytanie zadane 2 września 2015 w Nasze projekty przez Schizohatter Nałogowiec (39,600 p.)
0 głosów
0 odpowiedzi 124 wizyt
pytanie zadane 10 października 2019 w HTML i CSS przez livinsky Nowicjusz (230 p.)

92,453 zapytań

141,262 odpowiedzi

319,087 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...