Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JS][AJAX][PHP] galeria zdjęć
Forum PHP.pl > Forum > XML, AJAX > AJAX
wiciu010
5.08.2009, 22:31:46
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
Fafu
5.08.2009, 22:39:55
Moim zdaniem nie jest do tego potrzeby zaden ajax i php smile.gif wystarczy prosty skrypt w js:
[HTML] pobierz, plaintext 
  1. <script type="text/javascript">
  2.   function zmien(adres) {
  3. 	document.getElementById('zdjecie').src = adres;
  4.   }
  5. </script>
  6.   <img src="zdjecie.jpg" id="zdjecie">
  7.   <a href="javascript:zmien('cos.jpg')"><img src="miniaturka.jpg"></a>
  8.   <a href="javascript:zmien('cos2.jpg')"><img src="miniaturka2.jpg"></a>
[HTML] pobierz, plaintext

Jeśli coś niejasne moge wytłumaczyć.
wiciu010
6.08.2009, 20:02:27
Cytat(Fafu @ 5.08.2009, 23:39:55 ) *
Moim zdaniem nie jest do tego potrzeby zaden ajax i php smile.gif wystarczy prosty skrypt w js:
[HTML] pobierz, plaintext 
  1. <script type="text/javascript">
  2.   function zmien(adres) {
  3. 	document.getElementById('zdjecie').src = adres;
  4.   }
  5. </script>
  6.   <img src="zdjecie.jpg" id="zdjecie">
  7.   <a href="javascript:zmien('cos.jpg')"><img src="miniaturka.jpg"></a>
  8.   <a href="javascript:zmien('cos2.jpg')"><img src="miniaturka2.jpg"></a>
[HTML] pobierz, plaintext

Jeśli coś niejasne moge wytłumaczyć.


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 ?
Fafu
6.08.2009, 20:50:28
A po co? smile.gif
Taki przykład, możesz go sobie rozbudować:
[HTML] pobierz, plaintext 
  1. <script type="text/javascript">
  2. function zmien(adres, tytul, opis) {
  3. document.getElementById('zdjecie').src = adres;
  4. document.getElementById('tytul').innerHTML = tytul;
  5. document.getElementById('opis').innerHTML = opis;
  6. }
  7. </script>
  8. <b id="tytul">tytul</b>
  9. <i id="opis">opis</i>
  10. <img src="zdjecie.jpg" id="zdjecie">
  11. <a href="javascript:zmien('cos.jpg', 'tytul 1', 'opis cos 1')"><img src="miniaturka.jpg"></a>
  12. <a href="javascript:zmien('cos2.jpg', 'tytul 2', 'opis cos 2')"><img src="miniaturka2.jpg"></a>
[HTML] pobierz, plaintext
wiciu010
7.08.2009, 12:16:56
Zrobiłem coś takiego:

Kod
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:

Kod
<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>

Do wyświetlania komentarzy chciałem skorzystać z jQuery
Fafu
8.08.2009, 00:14:30 
[JAVASCRIPT] pobierz, plaintext 
  1. $.ajax({
  2.             url: "komentarze_galeria.php",
  3.             method: "POST",
  4.             data: 'id='+id,
  5.             success: function(data){$("#komentarz").html(data);}
  6.             });
[JAVASCRIPT] pobierz, plaintext

chyba tak powinno być winksmiley.jpg
No ale pokaż jeszcze ten twój skrypt "komentarze_galeria.php"

aha i taka mała uwaga: skoro masz jquery to czemu go nie używasz? smile.gif
[JAVASCRIPT] pobierz, plaintext 
  1. $("#zdjecie").attr('src', adres);
  2.     $("#tytul").html(tytul);
[JAVASCRIPT] pobierz, plaintext
esiek
12.09.2009, 23:59:36
Dzieki za pomysł smile.gif bede o nim pamietał przy tworzeniu sobie galerii zdjec tongue.gif

a wogole to polecam lekture
http://funkcje.net/pod_kat/2/10.html

kilka fajnych scryptow ktore mozna przerobic i wykorzystać

a tu masz konkretny przykład fajnej galerii z wykorzystaniem ajaxu winksmiley.jpg
http://www.internetmaker.pl/artykul/3308,1...ajax_-_php.html



Jak znasz troche PHP to zalapiesz AJAX i stworzysz cos fajnego winksmiley.jpg
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.