Fensi ajax resenje za galeriju slika kao na facebook-u ?

Fensi ajax resenje za galeriju slika kao na facebook-u ? 30.11.2009. u 20:56 · pre 205 meseci #1

Dakle hteo bih da napravim galeriju (pa i albume mozda) kao sto je na fb. Prelazak na narednu bez novog ucitavanja strane, samo slika. Na fb se prilikom klika prikazuje jedna a preuzima naredna slika, tako da nema "loading" i slicno...

Imam gotov sajt na lokalu, spremne i velike i male slike.. sve. Mislim da bih uspeo sam napraviti ovo, teoretski kontam kako izvesti, ali oduzelo bi mi dosta vremena..
Znaci skripta bi trebala samo da prikazuje bez automatskog pravljenja albuma, thumb slicica itd. Valjda sam dobro objasnio. Klikom poziva narednu sliku, a kesira onu posle nje, nista vise. Uslov do kada to da radi, ako nema dodacu sam.

Da li znate neko jednostavno resenje? Verujem da je o ovome sigurno bilo price, ali nisam uspeo nista da pronadjem..

Bilo kakav link, smernica..

Hvala :)

Re: Fensi ajax resenje za galeriju slika kao na facebook-u ? 30.11.2009. u 22:12 · pre 205 meseci #2

Ti u suštini sličan efekat možeš da postigneš i samo kroz HTML i CSS, plus malo JS-a, učitavanjem svih slika iz te neke galerije slika po učitavanju stranice, a onda skrivanje/prikazivanje slika korišćenjem display: none i display: block. Na tom principu radi recimo ovaj plugin za jQuery.

Baci pogled i na ovaj jQuery plugin.

Re: Fensi ajax resenje za galeriju slika kao na facebook-u ? 30.11.2009. u 22:40 · pre 205 meseci #3

Nije dobra varijanta... za moj slucaj inace je ok. Jako mnogo slika imam koje ce samo dodatno da opterecuju server a ovo upravo radim sa namerom da ga rasteretim. :)
Moram naci varijantu da se klikom na jednu preuzima druga a pojavljuje sa novim klikom i pri tom preuzima treca.

offtopic
Bacio sam pogled na tvoj potpis i tako dodjoh do sajta za obavestenja o restrikcijama el. energije. Svaka cast! Odusevljen sam idejom i time sto si iskoristio svoje poruke od sezama za to.
Ja retko kad posaljem 2-3 mesecno, tako da ako hoces mozemo nekako povezati taj tvoj sistem da kontaktira neki moj api koji bi prosledio informacije.
Svidja mi se ideja pa ako ti je potrebno jos poruka poklonicu ti moje koje svakako ostaju neiskoristene. ;)
Pozz

Re: Fensi ajax resenje za galeriju slika kao na facebook-u ? 30.11.2009. u 22:51 · pre 205 meseci #4

Probaj onda da na Google-u tražiš malo na temu "js image preloading", ili tako nešto, ima puno primera, tutorijala, itd.

Hvala, hvala.

Al' nemoj više da idemo u offtopic, bolje je koristiti privatne poruke. A kad si me već pitao, nema potrebe da uvodim u igru još nečiji nalog na Sezam-u, jer ionako je malo ljudi prijavljeno za SMS obaveštenja. Email varijanta je mnogo pouzdanija, a valjda se ljudi plaše da prijave svoj broj mobilnog, možda misle da ću im ipak uzimati neke pare.

Re: Fensi ajax resenje za galeriju slika kao na facebook-u ? 30.11.2009. u 23:03 · pre 205 meseci #5

Ma guglao sam... iskreno nemam vise ni zivaca, posto to nije jedino sto treba uraditi. Probacu sutra ponovo, pa u krajnjem slucaju sescu nekoliko sati i probati sam da napravim.

Hvala u svakom slucaju. ;) A za onaj servis, interesantno je i korisno, treba da prodje neko vreme da se procuje. Srecno sa projektima! :)

Re: Fensi ajax resenje za galeriju slika kao na facebook-u ? 30.11.2009. u 23:20 · pre 205 meseci #6

Ok, pogledaću ja još sutra dal' ima neki konkretan primer za rešavanje takvog zahteva, sad baš nemam vremena...

Hvala, takođe!

Re: Fensi ajax resenje za galeriju slika kao na facebook-u ? 01.12.2009. u 08:12 · pre 205 meseci #7

Ako nemas slike u bazi mozes da iskoristis ovu funkciju http://php.net/manual/en/function.scandir.php .
Znaci, iscitas sve slike i cuvas ih u array sa kljucevima 1,2,3,4 i sa vrijednostima koje su nazivi slika.

Zatim imas Ajax fju. koja ce da poziva sliku iz tog array-a sa kljucem koji se nalazi u URL-u. Na primjer: http://localhost/gallery/view.php#3
- u ovom slucaju prikazuje sliku iz tog niza sa klucem 3. Ako je umjesto 3 prazno polje, onda ucita sliku sa kljucem 1 odnosno 0 (zavisi kako punis array).

Vrijednost iza znaka # mozes da mjenjas bez da se stranica mjenja/"reloaduje", a evo ti kako ga "setujes/getujes" sa JS-om: http://www.w3schools.com/jsref/prop_loc_hash.asp
Preporucujem jQuery za Ajax jer je jednostavniji od klasicnog XMLHttpRequest-a...

Ako stignem danas, napisacu ti ja funkciju ali probaj ti sam to da odradis, bolje ti je....

Re: Fensi ajax resenje za galeriju slika kao na facebook-u ? 01.12.2009. u 22:44 · pre 205 meseci #8

evo odradio sam nabrizinu "BETA" verziju. Demo ovde: http://caraudio-rs.info/ajax_gallery/ a fajlovi u attachmentu.
Kao sto se moze vidjeti, slika koja ce se ucitati je oznacena sa vrijednosti poslije # parametra u URL-u. Znaci ako hocete da odma ucitate recimo sliku sa "id-om" 3, samo se napise index.php#3.

Sutra cu ja jos malo pogledati kod, ali bi takodje molio iskusnije programere da komentarisu ovo i ako vide kakav propust da jave.
Mislim da kod Windows korisnika treba u 2 foreach petlje provjerit ako je $value != '.directory' ili tako nesto nisam siguran.
I takodje bi bilo dobro napravit neki loading indikator u slucaju da se slika duze ucitava, tako da korisnik vidi da se nesto radi tj da je skripta prihvatila njegov klik.

ajax_gallery.zip275.66k

Re: Fensi ajax resenje za galeriju slika kao na facebook-u ? 04.12.2009. u 08:40 · pre 205 meseci #9

Vatri hvala puno na pomoci. Pregledao sam i uzeo sam neke segmente. Nesto sam prilagodjavao mom slucaju.. jos nisam zavrsio, ali cim bude pri kraju zipovacu pa postaviti ovde.. mozda nekom zatreba nekada.

Odustao sam od varijante da se ucitava druga dok se gleda prva slika. Za sad samo klasicna ajax fora.. Inace pokusao sam, sa visible i hidden. Kada se ucita strana, ucitavaju se dve slike, jedna sakrivena a druga se vidi. Klikom na sliku (ili next) hidden postaje vidljiva a ona sto je bila vidljiva sakriva se i zamenjuje sa drugom (ajax). Medjutim problem je kada se klikne par puta brzo (dok se jos nije ucitala nova slika), preskoci, ucita neku drugu.. nemam pojma, pobrkano je nesto a nemam vise zivaca da se mucim s tim. Kasnije kad sve privedem kraju vraticu se na to, za sad radi i ovako, zadovoljavajuce je.

Resio sam i history za hash (back dugme u browseru). Funkcija koja se ponavlja u zadatom intervalu i vrsi poredjenje trenutne adrese u browseru (tj. samo hash) sa vrednosti iz jednog input hidden elementa u koji se upisuje nova vrednost svaki put kada se ucita nova slika.

Ako neko ima vremena i volje da se cima malo sa ovim, moze dati neki predlog kako da usaglasim ona dva elementa visible i hidden...

btw u zipu iznad (vatrijev post) na jednom mestu negde na pocetku treba dodati <?php .. ?> , ako neko bude gledao na brzinu.. da ne pomisli kako nije dobro, radi i ok je uradjeno, provereno ;)

Forum kao aplikacija na telefonu

Srodne teme