X
ďťż

[JS][AJAX][PHP] galeria zdjęć

       

Podstrony


telcocafe

Witam,

Chciałbym stworzyć glaerię taką jak jest na stronie http://poltroter.pl/galeria.php
Czyli jak klikam po prawej miniaturki to po lewej wczytuje mi zdjęcie bez przeładowania strony. Jak coś takiego wykonać ? Podejrzewam że AJAX + PHP gdyż zdjecia są przechowywane w bazie mysql



Akurat w tym wypadku to jest banalne niż się wydaje ;)
Galeria jest wpakowana w iframe i tylko ta ramka się odświeża.

A gdybyś chciał to zrobić w bardziej nowoczesny sposób, to wystarczy nazwy plików zapakować przy pomocy php do javascriptowej tablicy, potem tylko przypisujesz każdej miniaturce zdarzenie onclick zmieniające atrybut src dużego obrazka na tablica_z_nazwami_plików[numer], gdzie numer jest pozycją nazwy pliku z dużym obrazkiem odpowiadającemu danej miniaturce.
Użytkownik someone edytował ten post 05 sierpień 2009, 23:09
OK działa zdjęcia mi zmienia, ale ja muszę jeszcze pobrać odpowiednie opisy do zdjęć z bazy danych. Więc tutaj chyba sam JS nie wystarczy ?

Zależy, możesz równie dobrze wpakować je w tablice tak samo jak nazwy plików, ajax opłaci się dopiero, kiedy opisy będą długie, albo zdjęć będzie bardzo dużo. Zresztą jeśli chcesz ajaxa to przy pomocy jQuery bardzo łatwo możesz go zrealizować. Wystarczy do onclick miniaturek dołączyć

$.ajax({ url: "opisy.php", method: "GET", data: "id_miniaturki="+id, success: function(data){$("#jakiś_div_na_opis").html(data)} });

no i wypisywać odpowiednie opisy w opis.php zależnie od pobranego $_GET['id_mianiturki'].



Zrobiłem coś takiego:

function zmienObrazek (adres, tytul, autor, miejsce, wojewodztwo, region, polozenie, krajobraz, pora, opis, id) { document.getElementById('zdjecie').src = adres; document.getElementById('tytul').innerHTML = tytul; document.getElementById('autor').innerHTML = autor; document.getElementById('miejsce').innerHTML = miejsce; document.getElementById('wojewodztwo').innerHTML = wojewodztwo; document.getElementById('region').innerHTML = region; document.getElementById('polozenie').innerHTML = polozenie; document.getElementById('krajobraz').innerHTML = krajobraz; document.getElementById('pora').innerHTML = pora; document.getElementById('opis').innerHTML = opis; $.ajax({ url: "komentarze_galeria.php", //method: "GET", data: id, success: function(data){$("#komentarz").html(data)} }); }

i wywołuję w taki sposób:

<a href="java script:zmienObrazek('fotogaleria/394.JPG','lorem ipsum dolor','witek010','Łeba','kujawsko_1_pomorskie','Bydgoszcz i okolice','','','','max 300 znaków','394' )"><img src="fotogaleria/394.JPG" width="110px" height="70px" alt="ex8" /></a>

Ale coś nie działa, wszystkie opisy zmienia ale nie pojawiają się komentarze w <div id="komentarz"></div>

data musi mieć format listy, albo queryStringa, czyli {zmienna: "wartość", zmienna2: "wartość2"}, albo "zmienna=wartość&zmienna2=wartość2".
W tej chwili nie przekazujesz, żadnego id do skryptu php.

a tak pozatym, to polecam firebuga, szybciej zlokalizujesz problem :)


data musi mieć format listy, albo queryStringa, czyli {zmienna: "wartość", zmienna2: "wartość2"}, albo "zmienna=wartość&zmienna2=wartość2".
W tej chwili nie przekazujesz, żadnego id do skryptu php.

a tak pozatym, to polecam firebuga, szybciej zlokalizujesz problem :)


Czyli tak powinno być ? :

$.ajax({ url: "komentarze_galeria.php", //method: "GET", data: "id", success: function(data){$("#komentarz").html(data)} });

powinno być, albo:
$.ajax({ url: "komentarze_galeria.php", //method: "GET", data: "id="+id, success: function(data){$("#komentarz").html(data)} });

albo:
$.ajax({ url: "komentarze_galeria.php", //method: "GET", data: {id: id}, success: function(data){$("#komentarz").html(data)} });

musisz to id do jakiejś zmiennej przypisać ;)

A jak przekazać dwie zmienne ?

Mam kod
$.ajax({ url: "?m=komentarzeGaleria", method: "GET", data: "id="+id, data: "autor="+autor, success: function(data){$("#komentarz").html(data)} });

ale potem jak odczytuję za pomocą $_GET to widzi tylko autor a id nie widzi, mimo że oba parametry są do funkcji JS. Jak wykomentuję linię:

data: "autor="+autor,

to wtedy działa $_GET['id']

data: "autor="+autor+"&m=mkomentarzgaleria&id="+id,

albo

data: {autor: autor, m: "mkomentarzgaleria", id: id},

a w url wystarczy kropkę wstawić :)

data to jest to co występuje w urlu po ?
Użytkownik someone edytował ten post 12 sierpień 2009, 14:28
  • zanotowane.pl
  • doc.pisz.pl
  • pdf.pisz.pl
  • nvm.keep.pl

  • Sitedesign by AltusUmbrae.

    Drogi uzytkowniku!

    W trosce o komfort korzystania z naszego serwisu chcemy dostarczac Ci coraz lepsze uslugi. By moc to robic prosimy, abys wyrazil zgode na dopasowanie tresci marketingowych do Twoich zachowan w serwisie. Zgoda ta pozwoli nam czesciowo finansowac rozwoj swiadczonych uslug.

    Pamietaj, ze dbamy o Twoja prywatnosc. Nie zwiekszamy zakresu naszych uprawnien bez Twojej zgody. Zadbamy rowniez o bezpieczenstwo Twoich danych. Wyrazona zgode mozesz cofnac w kazdej chwili.

     Tak, zgadzam sie na nadanie mi "cookie" i korzystanie z danych przez Administratora Serwisu i jego partnerow w celu dopasowania tresci do moich potrzeb. Przeczytalem(am) Polityke prywatnosci. Rozumiem ja i akceptuje.

     Tak, zgadzam sie na przetwarzanie moich danych osobowych przez Administratora Serwisu i jego partnerow w celu personalizowania wyswietlanych mi reklam i dostosowania do mnie prezentowanych tresci marketingowych. Przeczytalem(am) Polityke prywatnosci. Rozumiem ja i akceptuje.

    Wyrazenie powyzszych zgod jest dobrowolne i mozesz je w dowolnym momencie wycofac poprzez opcje: "Twoje zgody", dostepnej w prawym, dolnym rogu strony lub poprzez usuniecie "cookies" w swojej przegladarce dla powyzej strony, z tym, ze wycofanie zgody nie bedzie mialo wplywu na zgodnosc z prawem przetwarzania na podstawie zgody, przed jej wycofaniem.