Bild laden ohne Seite neu laden

Jache84 · 13. September 2006, 23:33

hallo, habe ein script welches mir auf der linken seite Thumbnails anzeigt und auf der rechten Seite dann das Bild in groß angezeigt wird. Allerdings wird immer wieder die neue Seite geladen und die Variable übergeben wie der pfad wo das Bild liegt und der Bildname.

Ich möchte das ganze mit AJAX machen habe aber noch nie damit gearbeitet und hoffe hier auf Hilfe.

Hier ein Teil meines Scripts wo die Thmbnails erstellt werden und die Seite neu geladen wird.

hoffe auf Hilfe und sage schon mal danke.

Quellcode

<?
$pfad=$_GET['pfad'];
$start = isset($_GET['start']) ? (int) $_GET['start'] : 0;
$handle = opendir($pfad);
$handle2 = opendir($pfad);
$a=-1;
$i=0;
echo "<table border='0' valign='top'><tr valign='top'><td width='10'></td>";
while (false !== ($file2 = readdir($handle2)))
{
$b++;
}
$anzahl=($b/2)-1;
while (false !== ($file = readdir($handle)))
{
$pic = explode ("_thumb",$file);
$pic2 = explode (".",$pic[0]);
if ($pic[1] == ".jpg")
{
}
else
{
if ($a++ <= $start)
{
continue;
}
if ($i != 18)
{
if ($file != "." && $file != "..")
{
echo "<td valign='top' style='CURSOR: hand'><a href='index.php?pfad=".$pfad."&pic=".$pic2[0]."&anzahl=".$anzahl."'>";
echo "<img border='0' src=".$pfad."/".$pic2[0]."_thumb.jpg></a></td><td width='7'></td>";
}
$i++;
if ($i % 3 == 0)
{
echo "<td width='80'></td></tr><tr height='6' valign='top'><td></td></tr><tr valign='top'><td></td>";
}
}
}
}
closedir($handle);
$start=$start+18;
echo "</tr></table></td></tr><tr><td></td><td><table><tr><td>";
?>

Alles anzeigen

Torben Brodt · 14. September 2006, 11:02

hi

da benötigst du kein AJAX für.
ajax würdest du benutzen, wenn sich die inhalte von der linken seite ständig ändern und du diese nachladen müsstest

hier ein einfaches beispiel für die lösung deines problems

Quellcode

<script type="text/javascript">
<!--
function change(inhalt) {
document.getElementById('bild').src = inhalt;
}
//-->
</script>
<a href="#" onclick="change('easy.jpg')">easy</a>
<a href="#" onclick="change('coding.jpg')">coding</a>
<a href="#" onclick="change('coder.jpg')">coder</a>
<a href="#" onclick="change('wiki.jpg')">wiki</a>
<img src="default.jpg" id="bild" />

Alles anzeigen

Jache84 · 14. September 2006, 15:09

Cool Danke, habe Sinn verstanden.

Wenn ich alle sbei mir rein packe in mein Script läd er trotzdem nicht die Bilder.
Kann es sein, da ich ja schon vorher jedemenge Variablen überge und diese jedesmal wieder übergeben muss, da dort auf mein pfad und mein Bildname drin steht, das es deswegen nicht klappt?

denn bei mir steht die # nicht direkt hinter index.php, also sprich index.php#, sondern bei mir steht index.php?var1=12&var2=11&var3=14#

Kann das das Problem sein? Wenn ja wie bekomme ich es hin das die # vorne steht.

P.S: die Variablen brauche ich aber 100%ig da ich mir daraus meine Dateinamen mit den Pfaden zusammen bastele.

Hier mein Script wies jetzt ist:

Quellcode

<?
$pfad=$_GET['pfad'];
$start = isset($_GET['start']) ? (int) $_GET['start'] : 0;
$handle = opendir($pfad);
$handle2 = opendir($pfad);
$a=-1;
$i=0;
echo "<table border='0' valign='top'><tr valign='top'><td width='10'></td>";
while (false !== ($file2 = readdir($handle2)))
{
$b++;
}
$anzahl=($b/2)-1;
while (false !== ($file = readdir($handle)))
{
$pic = explode ("_thumb",$file);
$pic2 = explode (".",$pic[0]);
if ($pic[1] == ".jpg")
{
}
else
{
if ($a++ <= $start)
{
continue;
}
if ($i != 18)
{
if ($file != "." && $file != "..")
{
echo "<td valign='top' style='CURSOR: hand'>
echo "<a href='#' onclick=\"change(' ".$pfad."/".$pic." ')\">";
echo "<img border='0' src=".$pfad."/".$pic2[0]."_thumb.jpg></a></td><td width='6'></td>";
}
$i++;
if ($i % 3 == 0)
{
echo "<td width='80'></td></tr><tr height='6' valign='top'><td></td></tr><tr valign='top'><td></td>";
}
}
}
}
closedir($handle);
$start=$start+18;
echo "</tr></table></td></tr><tr><td></td><td><table><tr><td>";
?>

Alles anzeigen

weiter oben im Script ist dann noch das Stück wo das Bild hin soll. Das sieht so aus:

blank.jpg ist einfach ein weißes rechteck, da ich am Anfang nicht möchte das ein bild angezeigt wird.

Quellcode

<? php
echo "<img src='blank.jpg' id='bild' />";
?>

Danke und Gruß
Jochen

Quellcode

Torben Brodt · 14. September 2006, 20:27

die raute hat damit nix zu tun

hast du das script nicht online, wo ich mir den geparsten code mal anschauen kann?
btw: zum <td> oder zum <img> kannst du den onclick handler auch hinzufügen... cursor hast du ja bereits geändert

meldet der browser auch keine javascript fehler?

Jache84 · 14. September 2006, 21:26

na habs leider nicht online, da noch kein Webspace, ich könnte es dir zumailen, wen du magst als gepacktes file.

Ist das okay?

Vielen Dank schon mal, echt top Forum

LG
Jochen

Jache84 · 14. September 2006, 21:41

ah okay, funktioniert soweit, jetzt alles top. Bild wird geladen und ich bin soweit echt happy. Allerdings habe ich folgendes Problem.
dieses Script

Quellcode

echo "<a href='#' onclick=\"change(' ".$pfad."/".$pic[0]." ')\"><img border='0' src='".$pfad."/".$pic2[0]."_thumb.jpg'></a>";

steht unter diesem:

Quellcode

echo "<img src='default.jpg' id='bild' />";

somit funktioniert es nicht und mein IE sagt mir immer das ein Fehler auf der Seite sei.

Sobald ich das Script wo mein bild angezeigt wird unter das andere mache geht es. Allerdings kann ich das nicht machen, da es bei mir nach oben muss. Sonst ist das Bild später nicht da wos hin soll.

Was kann ich tun?

LG
jochen

michi2002k2 · 18. Juni 2008, 09:48

hi!

sorry wegen der totengräberei. Ja ich weiss, dass sich sowas eigentlich nicht gehört..

aber ich habe ein problem, dass perfekt auf dieses hier projezieren lässt. Links sind die thumbnails, rechts soll das bild groß angezeigt werden. Jedoch funktioniert das ganze noch NICHT so wie erhofft...
Mein code:

Quellcode

<script type="text/javascript">
<!--
function change(inhalt) {
document.getElementById('bild').src = inhalt;
} //-->
</script>
<style type="text/css">
//blabla
</style>
<?php
//datenbank anfragen
$sql = "SELECT Pfad,PfadLang FROM FotosTH WHERE Ort='Bayreuth 06'";
$result = mysql_query($sql) OR die(mysql_error());
?><table border=2 width=1000 height=400><tr><td class="scroll" style="overflow:scroll;"><div align="center" style="width: 100%; height: 100%; overflow: scroll;">
<?php
while($row = mysql_fetch_assoc($result)) {
?><a href="#" onclick="change('<?php $row['PfadLang']?>')"><?php
echo "<img border=\"0\" src=\"".$row['Pfad']."\"><br>";
?></a><?php
}
?></div>
</td><td>
<img src="" id="bild" >
</td></tr></table>

Alles anzeigen

Hab das ganze etwas bearbeitet der übersicht halber.
Wie man sieht ist oben einfach das script tag (wie oben erwähnt) und dann auch der link ist kopiert, das image ganz unten hat die id "bild" . Nun scheint es aber noch irgendwo eine winzigkeit falsch zu sein. Ich komme einfach nicht von selbst drauf... hat einer bitte eine idee für mich?

Torben Brodt · 18. Juni 2008, 10:48

*räusper* das ist das html forum und daher ist nur der html code relevant.
poste den html code und du siehst das problem sofort.

Quellcode

<a href="#" onclick="change('')"><img borde...

Kein echo.

michi2002k2 · 18. Juni 2008, 11:14

Sorry, kann dem nicht ganz folgen.

Das ganze <a href ... > tag liegt doch ausserhalb von ?> ... <?php tags. Dh es ist kein echo notwendig.

Bitte bitte nochmal etwas langsamer für mich erläutern...

/edit:
ah entschuldigung. Hab das nun doch modifiziert ausprobiert: das mit den tags ?> ...<?php gelöscht und alles in das echo reingepackt. Nun funzt es tatsächlich! Super sache

Danke für die schnelle antwort und auch allgemein für die hilfe in diesem thread

(kannst ja unter hits sehen, wie oft der thread in google gefunden wird und wievielen damit bestimmt schon geholfen wurde

)

Bild laden ohne Seite neu laden

Bild laden ohne Seite neu laden

Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

Teilen

Tags