Image slider

Question

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

Answer 1

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/

Comments

Wielkie dzięki za tak wyczerpującą odpowiedz,tego szukałem,dzięki tobie zaoszczędze troche mojego czasu,jeszcze raz,Wielkie dzięki!!!!