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

Image slider

VPS Starter Arubacloud
–1 głos
112 wizyt
pytanie zadane 28 września 2016 w JavaScript przez Sławek Obywatel (1,270 p.)
Cześć,zna ktoś z was tutorial dotyczący tego jak zrobić galerię obrazów ze wszystkimi szczegółami jak np.przewijanie,powiększania obrazów etc. przykład takiej galerii:https://botland.com.pl/moduly-glowne-beaglebone/1505-beaglebone-black.html

 

.Może być tutorial,gotowe rozwiązanie cokolwiek

1 odpowiedź

+2 głosów
odpowiedź 28 września 2016 przez ShiroUmizake Nałogowiec (46,300 p.)
Jak to zrobić.

1. Po załadowaniu strony, najlepiej załadować wszystkie Image do obiektu new Image no i pakować do jakieś tablicy by nie robić zbędnego bałaganu. Jeżeli zachodzi potrzeba radzę użyć AJAX.

1. Tworzymy zdarzenie click (i tu zalecam wykorzystać funkcję anomimową , która będzie pobierała id zdjęcia, które będzie potrzebne do funkcji która reaguje na to zdarzenie) , do jakieś elementu (lub grupy elementów) lub jeśli ładujemy za pomocą AJAX. Tworzyć to zdarzenie dopiero po załadowaniu zdjęć do cache.

2.Następnie po zdarzeniu tworzymy za pomocą JS element HTML który pokryje całą stronę i bodajże daje się właściwości background , ale rgb  i jakieś opacity, pozycjonowanie absolutne, wcześniej sprawdzamy czy taki element nie został już utworzony.

3.Tworzymy kolejny element HTML z pozycjonowaniem fixed/sticky , a dokładne kordynaty jego pozycji pobierzemy (szerokośc strony => document.width) i (wysokośc strony => document.height , choć nie jestem pewny czy on nie pobierze całej wysokości (nas interesuje tylko do dolnego pasku).  Dokładna pozycja elementu w którym się wyświetli obrazek =>naszElementwKtoymBedzieObrazek.style.position.left = docuement.width/2 - (naszELementwKtorymBedzieObrazek.width/2) i to samo z pozostałymi pozycjami , no trochę tu trzeba pokombinować.

4.Element img tworzymy ładujemy nasze zdjęcia z tablicy. I voila.

Troszeczkę jest tego pisania.

A tu Gotowe rozwiązanie:

Użyj Lightbox , możebyć z jQuery: http://lokeshdhakar.com/projects/lightbox2/
komentarz 28 września 2016 przez Sławek Obywatel (1,270 p.)
Wielkie dzięki za tak wyczerpującą odpowiedz,tego szukałem,dzięki tobie zaoszczędze troche mojego czasu,jeszcze raz,Wielkie dzięki!!!!

Podobne pytania

0 głosów
0 odpowiedzi 129 wizyt
pytanie zadane 1 czerwca 2016 w Nasze projekty przez Eerie Mądrala (7,130 p.)
0 głosów
1 odpowiedź 149 wizyt
0 głosów
1 odpowiedź 144 wizyt
pytanie zadane 8 grudnia 2015 w HTML i CSS przez Wally Bywalec (2,840 p.)

92,453 zapytań

141,262 odpowiedzi

319,086 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!

...