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

Image slider

0 głosów
74 wizyt
pytanie zadane 28 września 2016 w JavaScript, jQuery, AJAX przez Sławek Obywatel (1,250 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 (45,360 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,250 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 82 wizyt
pytanie zadane 1 czerwca 2016 w Nasze projekty przez Eerie Mądrala (7,200 p.)
0 głosów
1 odpowiedź 81 wizyt
0 głosów
2 odpowiedzi 84 wizyt
Porady nie od parady
Pytania na temat serwisu SPOJ należy zadawać z odpowiednią kategorią dotyczącą tej strony.SPOJ

66,400 zapytań

113,160 odpowiedzi

239,542 komentarzy

46,665 pasjonatów

Przeglądających: 168
Pasjonatów: 1 Gości: 167

Motyw:

Akcja Pajacyk

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

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...