Forum PHP.pl > Wczytywanie zdjęć bez przeładowania strony

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: Wczytywanie zdjęć bez przeładowania strony

pirates21

4.08.2011, 12:44:10

Witam.
Chcę aby po kliknięciu zdjęcia miniaturki załadował się większy obrazek. Chcę to zrobić przy pomocy ajaxowej funkcji getdata(). Problem w tym, zę po kliknięciu w miniaturkę ukazują się tzw. "krzaki" zamiast zdjęcia. Jak to wykonać poprawnie?

[HTML] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">  
  <head>                      
    <title>jCarousel Examples     
    </title>    
    <!--
        Ajax - getdata();
        -->
<script type="text/javascript" src="../lib/ajax.js"></script>    
  </head>  
  <body>    
    <div id="wrap">      	       
      <div id="imagePane>  
      </div>		                    
      <a href="#" onclick="getdata('../obrazki/1.jpg','imagePane');">          
        <img src="../miniaturki/thumb_1.jpg"></a>                                                                               
    </div>  
  </body>
</html>
[HTML] pobierz, plaintext

[HTML] pobierz, plaintext 
 
// here we define global variable
var ajaxdestination="";
 
function getdata(what,where) { // get data from source (what)
 try {
   xmlhttp = window.XMLHttpRequest?new XMLHttpRequest():
  		new ActiveXObject("Microsoft.XMLHTTP");
 }
 catch (e) { /* do nothing */ }
 
 document.getElementById(where).innerHTML ="<center><img src='loading.gif'></center>";
// we are defining the destination DIV id, must be stored in global variable (ajaxdestination)
 ajaxdestination=where;
 xmlhttp.onreadystatechange = triggered; // when request finished, call the function to put result to destination DIV
 xmlhttp.open("GET", what);
 xmlhttp.send(null);
  return false;
}
 
function triggered() { // put data returned by requested URL to selected DIV
  if (xmlhttp.readyState == 4) if (xmlhttp.status == 200) 
    document.getElementById(ajaxdestination).innerHTML =xmlhttp.responseText;
}
[HTML] pobierz, plaintext

buliq

4.08.2011, 13:33:34

może pokażesz nam coś z tego getdata? mamy wróżyć gdzie masz błąd?

Louner

4.08.2011, 13:59:51

Mnie się wydaje, że pobierasz strumień danych i próbujesz go wyświetlić jak obrazek. Może po prostu pobieraj sam odnośnik do większego zdjęcia i go wyświetlaj? Ewentualnie sprawdź MIME tego co pobierasz, bo może w tym jest błąd.

buliq

4.08.2011, 14:20:47

HALO o.0 co ty robish

document.getElementById(ajaxdestination).innerHTML =xmlhttp.responseText;

Pobierasz zawartość pliku i umieszczasz ją w div

no z tym to się jeszcze nie spotkałem. Przecież masz już informacje o tym gdzie jest pełnych rozmiarów obrazek, powinieneś zatem co najwyżej sprawdzać czy plik tam jest i wstawiać go tak jak wstawiasz loading.gif

melkorm

4.08.2011, 14:38:19

a ja się za pytam - na jaką cholerę do tego ajax potrzebny? Wystarczy że zmienisz src na "../obrazki/1.jpg" i będzie banglać.

pirates21

4.08.2011, 15:34:29

Po raz pierwszy mam do czynienia z technologia Ajax i nie znam nawet podstaw języka. Dlatego mam prośbę o poprawienie tego skryptu. Będę bardzo wdzięczny.

buliq

4.08.2011, 15:52:26

Proszę:

[JAVASCRIPT] pobierz, plaintext 
function getdata(what,where) {
document.getElementById(where).innerHTML ='<center><img src="'+what+'"></center>';
}
[JAVASCRIPT] pobierz, plaintext

o i ajax nie był potrzebny o.0 ?

pirates21

4.08.2011, 15:58:46

Dziękuję buliq. Działa. A powiedz proszę jak to rozwiązać bez Ajax?

buliq

4.08.2011, 16:17:49

Przecież to jest rozwiązanie bez ajaxa

Poczytaj co to jest AJAX tutaj. Tutaj dane masz już dostępne więc ajax nie jest potrzebny.

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.