Bilder laden

[sly]

Hallo zusammen,

ich habe ein riesen Problem:

ich habe auf meiner Seite Thumbs gebastelt ... wenn ich da drauf klicke möchte ich die großen Bilder in einer Tabelle AUF DER GLEICHEN SEITE laden ...

das habe ich auch wunderbar realisiert, zB hier ...

Astrofotografie DeepSky


wenn ihr auf ein kleines Bild drückt wird über Javascript eine Tabelle eingeblendet in der das Originalbild angezeigt wird ...
das SAUDUMME ist nur das die großen Bilder auch schon geladen werden wenn man die Seite öffnet ... genau das wollte ich eigentlich vermeiden ... die großen Bilder sollen erst geladen werden wenn man auf die kleinen klickt

... wie kann ich das realisieren (ich möchte ja das auch Leute ohne DSL mal meine Seite besuchen ;-)

LG Sebastian

 

[Frank]

Das erreichst du mittels einem Asynchronen Laden von Inhalten über AJAX
(Asynchronous JavaScript And XML)
Du lädst bei dieser Methode die Bilder nach wenn sie benötigt werden.

Bitte nicht über die komplexität wundern ^^

JavaScript

//globale Instanz von XMLHttpRequest
var xmlHttp = false;
//XMLHttpRequest-Instanz erstellen
//... für Internet Explorer
try {
    xmlHttp  = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
    try {
        xmlHttp  = new ActiveXObject("Microsoft.XMLHTTP");
    } catch(e) {
        xmlHttp  = false;
    }
}
//... für Mozilla, Opera, Safari usw.
if (!xmlHttp  && typeof XMLHttpRequest != 'undefined') {
    xmlHttp = new XMLHttpRequest();
}
function loadData(url,id)
{
  if (xmlHttp)
  {
    xmlHttp.open('GET', 'loadimage.php?id=' + id + '&url=' + url, true);
    xmlHttp.onreadystatechange = answere;
    xmlHttp.send(null);
 }
}
function answere()
{
  if (xmlHttp.readyState == 4)
  {
    var idpart = xmlHttp.responseText.split("|");
    var id = idpart[0]
    document.getElementById(id).innerHTML = idpart[1]
  }
}

loadimage.php

<?php
$url = $_GET["url"];
$id = $_GET["id"];
echo $id;
?>
|
<img src="<?php echo $url; ?>" border="0" alt="">

Deine Datei mit der Tabelle

<a href="javascript:loaddata('Bild.jpg','anzeige');">hier dein minibild</a>
<table>
<tr>
<td>
<div id="anzeige"></div>
</td>
</tr>
</table>

 

[sly]

Hallo Frank,

hab ich mir schon gedacht das das nur mit Ajax funktioniert ... leider habe ich damit noch keine Erfahrung .. naja irgenwann ist immer das erste mal ...

Ich habe jetzt dein Beispiel mal eins zu eins übernommen und Bilder eingefügt,
siehe hier (seitenquelltext kannste ja einblenden):

Versuch mit Ajax

Das Javascript habe ich dabei direkt in die HTML-datei übernommen

die Datei loadimage.php hab ich ebenfalls 1 zu 1 übernommen und in das gleiche Verzeichnis hochgeladen ...

hier nochmal der CODE

<?php
$url = $_GET["url"];
$id = $_GET["id"];
echo $id;
?>
|
<img src="<?php echo $url; ?>" border="0" alt="">

leider bekomme ich im IE ne Fehlermeldung und im Firefox tut sich gar nix wenn ich das Bild anklicke ... puuh

haste ne Idee woran das liegen könnte

LG Sebastian

 

[sly]

Hallo Frank,

jetzt funktioniert es ... in Javascript stand einmal loaddata und in Html ... loadData .... das war das Problem ...

jetzt klappts, siehe hier: Versuch mit Ajax

schön das das schon mal hinhaut ... jetzt muss ich nur noch verstehen was mir der Code sagen will ... dann schaffe ich es vielleicht das in meine Seite einzubauen

LG Sebastian

 

[Frank]

schön das es jetzt funktioniert *fehlersucheabbrech*

was der Code dir sagen will, wirst du schon herausbekommen, falls nicht helfen vielleicht ein paar ajax tutorials nach ^^

 

[sly]

Hallo Frank,

bis ins Detail habe ich das zwar immer noch nicht verstanden, aber meine Seite habe ich schon angepasst ... schaust du zB hier: Astrofotografie DeepSky

das mit den Ajax-Tutorials werde ich mir unbedingt mal zu Herzen nehmen ... vorher vielleicht noch bissl DOM und PHP auffrischen ;-)

Vielen Dank nochmal für deine Hilfe

LG Sebastian