GoldenLine
Zaloguj się
Maja Miarecki

Maja Miarecki Senior Frontend
Developer

Temat: biblioteka do przesuwajacych sie obrazkow

Potrzebuje zrobic galerie, gdzie pliki jpg beda sie przesuwac (najlepiej z wyzanczona przeze mnie szybkoscia) zalozmy ze od lewej do prawej. Nie ma byc zadnych miniaturek, numerkow itp, tylko zapetlone przesuwanie sie, tak aby zdjecia wylanialy sie przeplywaly przez cala szerokosc kontenera i chowaly sie juz poza nim. I tak jedno za drugim, tak wiec gdy jedno jest po srodku, poprzednie chowa sie z prawej strony a nastepne wylania sie z lewej
Link do wypowiedziLink

konto usunięte

Temat: biblioteka do przesuwajacych sie obrazkow

Karuzela?
www.flshow.net
Link do wypowiedziLink
Maja Miarecki

Maja Miarecki Senior Frontend
Developer

Temat: biblioteka do przesuwajacych sie obrazkow

Nie :), choc flashyk ladny. User ma nie widziec wiecej niz 3 zdjecia na raz, to ktore jest aktualnie na srodku, to ktore chowa sie za ekran i to ,ktore sie wylania... No i w czystym JS lub z wykorzystaniem jakiejs biblioteki... ale nie flash
Link do wypowiedziLink
Adam Pawliczek

Adam Pawliczek Usability expert, UX
designer,
Interaction
specialist

Temat: biblioteka do przesuwajacych sie obrazkow

Nie rozumiem w czym problem:
- wiesz dokładnie czego potrzebujesz i jak to ma wyglądać, działać,
- jesteś programistką/projektantem (tak wynika z opisu) posiadającą odpowiednie kompetencje,
- masz stały dostęp do google.
Link do wypowiedziLink
Maja Miarecki

Maja Miarecki Senior Frontend
Developer

Temat: biblioteka do przesuwajacych sie obrazkow

Tak, mam staly dostep do google i od wczoraj nic poza tym nie robie, tylko googlam. Jak napisalam potrzebuje cos na ksztalt slide show. Zdjecia wysuwaja sie od lewej strony ekranu i plyna jedno za drugim, z kilkupixelowymi przerwami w kierunku prawej strony. Zdjec moze byc dowolna ilosc, raczej bardzo duzo.

Wszystkie biblioteki, ktore namierzylam wymagaja najpierw zaladowania zdjec do HTMLa, a ja czarno widze strone, gdzie w zrodle jest np 1200 img, a kazde zdjecie wazy z 500kb. Wiec szukam biblioteki, ktora sobie "doladowuje" zdjecia w locie ze wskazanej lokalizacji.

Dodatkowo te biblioteki, ktore znalazlam maja jeszcze jeden problem. Srednio sobie radza ze znacznikami html5.

Pewnie sie skonczy na napisnaiu dedykowanego skryptu w natywnym JS lub jQuery...
Link do wypowiedziLink

konto usunięte

Temat: biblioteka do przesuwajacych sie obrazkow

Maja Miarecka:
Tak, mam staly dostep do google i od wczoraj nic poza tym nie robie, tylko googlam. Jak napisalam potrzebuje cos na ksztalt slide show.

Jak kolega zauważył - przedstawia się Pani jako programistka. Przez ten czas spokojnie można było coś takiego napisać.
Zdjecia wysuwaja sie od lewej strony ekranu i plyna jedno za drugim, z kilkupixelowymi przerwami w kierunku prawej strony. Zdjec moze byc dowolna ilosc, raczej bardzo duzo.

Wszystkie biblioteki, ktore namierzylam wymagaja najpierw zaladowania zdjec do HTMLa, a ja czarno widze strone, gdzie w zrodle jest np 1200 img, a kazde zdjecie wazy z 500kb. Wiec szukam biblioteki, ktora sobie "doladowuje" zdjecia w locie ze wskazanej lokalizacji.

1. Kiedy rzecz jest na prawdę banalna. W PHP odczytujemy katalog i wyciągamy listę zdjęć. Twozrymy url'e do tych zdjęć i zapisujemy do tablicy. Taką listę przesyłamy w postaci tablicy json (json_encode - jedna chwila).

W Javascript lecimy po tablicy i wczytujemy kolejne zdjęcia za pomocą obiektu Image. http://www.w3schools.com/jsref/dom_obj_image.asp Będą się wczytywać w locie a jak jakieś zdjęcie się wczytaj to automatycznie zostanie wrzucone na listę.

Naszą listą będzie przesuwający się DIV do którego wrzucimy w linii poziomej wszystkie zdjęcia. Jak chcemy to zrobić łopatologicznie to można dodać drugi div będący klonem pierwszego (2 takie same).

Funkcją animate() w jquery (jeżeli chcemy to zrobić szybko, ewentualnie setInterval() i piszemy krótki kod na przesuwanie z kontrolą klatek animacji) przesuwamy oba divy. Gdy jeden wyjdzie poza wyświetlany obszar - przenosimy go przed drugiego diva co sprawi wrażenie ciągłości animacji. Ewentualnie można żaglować samymi obrazkami co też w zasadzie nie jest trudne ale wymaga więcej zachodu przy synchronizacji żeby się wszystkie równo przesuwały.

Naszym "obszarem wyświetlanym" będzie div o wybranych przez nas wymiarach z parametrem overflow: hidden;. Więc jak będziemy 2 divy przesuwać w nim to nikt nawet nie zobaczy różnicy.

Dodatkowo te biblioteki, ktore znalazlam maja jeszcze jeden problem. Srednio sobie radza ze znacznikami html5.

Pewnie sie skonczy na napisnaiu dedykowanego skryptu w natywnym JS lub jQuery...

Było by to o wiele szybsze niż szukanie biblioteczki. I trwało by na prawdę niedługo.
Link do wypowiedziLink

konto usunięte

Temat: biblioteka do przesuwajacych sie obrazkow


Pewnie sie skonczy na napisnaiu dedykowanego skryptu w natywnym JS lub jQuery...

Było by to o wiele szybsze niż szukanie biblioteczki. I trwało by na prawdę niedługo.

I jest szansa, że człowiek się czegoś po drodze nauczy (i bynajmniej nie mam na myśli nauki szybkiego przeglądania dokumentacji do jQuery).rafał krupiński edytował(a) ten post dnia 13.10.11 o godzinie 12:26
Link do wypowiedziLink

konto usunięte

Temat: biblioteka do przesuwajacych sie obrazkow

Cały skrypt można zamknąć w HTML/JS - bez dodatkowych źródeł danych (po co do tego zaprzęgać kolejnego requesta?).

Mianowicie tak:
- gdy wgra się DOM, z określonego kontenera wybrać wszystkie elementy,
- usunąć je z kontenera,
- pierwsze N+2 obrazków umieścić ponownie, gdzie N jest ilością obrazków widocznych na starcie, zamiast 2 może być inna liczba, najlepiej uzależnić ją od szybkości przesuwania.
- przesuwać obrazki i zliczać gdzieś ile obrazków już "poszło",
- kolejne obrazki dodawać do listy zgodnie z tym co napisał Dariusz dopiero wtedy gdy będzie się zbliżał ich czas (np. z wyprzedzeniem 2 obrazków).
- jak się skończy lista, obrazek z początku przerzucać na koniec

//edit
Pełne bajer byłby wtedy, większość parametrów skrypt sam wyliczy, a podaje mu się jedynie czas przesuwania.Michał Wachowski edytował(a) ten post dnia 13.10.11 o godzinie 14:01
Link do wypowiedziLink
Maja Miarecki

Maja Miarecki Senior Frontend
Developer

Temat: biblioteka do przesuwajacych sie obrazkow

Dariusz Półtorak:
Jak kolega zauważył - przedstawia się Pani jako programistka. Przez ten czas spokojnie można było coś takiego napisać.

Jasne, ale potrzebna byla gotowa biblioteka. Nie wiem, kto i kiedy bedzie chcial sie tym bawic, do istniejacych rozwiazan istnieje dobra dokumentacja.
1. Kiedy rzecz jest na prawdę banalna. W PHP odczytujemy katalog i wyciągamy listę zdjęć. Twozrymy url'e do tych zdjęć i zapisujemy do tablicy. Taką listę przesyłamy w postaci tablicy json (json_encode - jedna chwila).

I tu wszystko pada. Nie zaprzegam do tego PHP. Aczkolwiek, dziekuje za dobre checi, choc pytalam o gotowe rozwiazanie a nie opis jak powinnam napisac swoja aplikacje.
Link do wypowiedziLink
Maja Miarecki

Maja Miarecki Senior Frontend
Developer

Temat: biblioteka do przesuwajacych sie obrazkow

Michał Wachowski:
Cały skrypt można zamknąć w HTML/JS - bez dodatkowych źródeł danych (po co do tego zaprzęgać kolejnego requesta?).

Mianowicie tak:
- gdy wgra się DOM, z określonego kontenera wybrać wszystkie elementy,
- usunąć je z kontenera,

Jak pisalam, nie chce ladowac 1200 zdjec na jednej stronie... Aczkolwiek pozostala czesc posta calkiem interesujaca, dziekuje.

Problem rozwiazalam, wiec dziekuje wszytkim za wsparcie i zainteresowanie
Link do wypowiedziLink
« Wróć do tematów
Odpowiedz

Podobne tematy


Następna dyskusja:

document.getElementsByTagNa...




Wyślij zaproszenie do
Anuluj