Leter etter et script som laster bilder uten å laste siden på nytt

Jooakim · 24. august 2008

Hei,

jeg har bygget opp et galleri slik:

<div id="galleri">
   <img src="xx.jpg" />
</div>
<div id="galleri_nav">
   <a href="xx2.jpg"><img src ="xx2.jpg" /></a>
</div>

Og jeg lurer på om noen av dere har et - eller vet om et - script som kan laste inn xx2.jpg inni <div id="galleri">, uten å laste om hele siden.

Joakim.

Endret 24. august 2008 av Jooakim

Wackamole · 25. august 2008

Lag en update.js fil med denne koden

update.js

function jah_switch(url,target)
{

if (document.getElementById(target).innerHTML != '')
{
	document.getElementById(target).innerHTML = '';
}
else
{

	jah(url,target);
}

}
function jah(url,target) {
// native XMLHttpRequest object
	document.getElementById(target).innerHTML = 'Laster bilde';
if (window.XMLHttpRequest) {
	req = new XMLHttpRequest();
	req.onreadystatechange = function() {jahDone(target);};
	req.open("GET", url, true);
	req.send(null);
// IE/Windows ActiveX version
} else if (window.ActiveXObject) {
	req = new ActiveXObject("Microsoft.XMLHTTP");
	if (req) {
		req.onreadystatechange = function() {jahDone(target);};
		req.open("GET", url, true);
		req.send();
	}
}
}	

function jahDone(target) {
// only if req is "loaded"
if (req.readyState == 4) {
	// only if "OK"
	if (req.status == 200) {
		results = req.responseText;
		document.getElementById(target).innerHTML = results;
	} else {
		document.getElementById(target).innerHTML="Ungdom1.no ERROR:\n" +
			req.statusText;
	}
}
}

Siden du vil vise bildet

dittnavn.html

<script type="text/javascript" src="update.js"></script>
<div id="galleri">
<img src="xx.jpg" />
</div>
<div id="galleri_nav">
<a href="java script:jah('xx2.jpg', 'galleri');">Klikk her</a>
</div>

Håper du forsto den

Jooakim · 1. september 2008

Hei,

takk for svaret - jeg kan ikke ha lagt merke til svaret før nå.

Joakim.

Jooakim · 1. september 2008

Hmm, når bildet ble lastet, var dette alt som kom opp:

�����JFIF���d�d�����Ducky�����d�����Adobe�d���������
����}�������������������� ����������������!�1AQ" a2q��R#��B3��b�$ ��Sc�4��r�C%������!1AQa"2q��B#3

Wackamole · 1. september 2008

Dær kan jeg dessverre ikke hjelpe deg hvis du ikke gir meg litt kode av det du har nå...

NikkaYoichi · 1. september 2008

Er det ikke dette Ajax er til?

Wackamole · 1. september 2008

Eller vent litt, prøv og legg bilde inn i en fil (bilde.php) med <img src="xx.jpg" alt="">.

Lokaltog · 1. september 2008

Hva med bare å sette en ID på img-taggen og deretter endre src-attributten? Funker fint vha jQuery iallefall:

$('img#id').attr('src', 'new-image.jpg');

Jooakim · 1. september 2008

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>TEST</title>
<script type="text/JavaScript" src="http://js.halovasjera.net/galleri.js"></script>
</head>


<body>
<div id="galleri">

</div>
<div id="galleri_nav">
<a href="java script:jah('/pix/dvddb/das.jpg','galleri');"><img src="http://pix.halovasjera.net/dvddb/das.jpg" /></a>
</div>

JS: http://js.halovasjera.net/galleri.js

Edit: Av en eller annen grunn, blir 'javascript' erstattet med 'java script'

Endret 1. september 2008 av Jooakim

Wackamole · 1. september 2008

Tror ikke du forsto innlegget mitt lengre opp, du lager en ny fil med

bilde.php

<img src="http://pix.halovasjera.net/dvddb/das.jpg" />

også henter du den ut med:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>TEST</title>
<script type="text/JavaScript" src="http://js.halovasjera.net/galleri.js"></script>
</head>


<body>
<div id="galleri">

</div>
<div id="galleri_nav">
<a href="java script:jah('bilde.php','galleri');"><img src="http://pix.halovasjera.net/dvddb/das.jpg" /></a>
</div>

Jooakim · 1. september 2008

Det fungerte. Jeg regner med at jeg må gjøre slik at 'req.responseText' blir postet inni <img src="" alt="" />? Jeg er rimelig nybegynner med js, så jeg vet ikke helt hvordan jeg skulle fått det til (om det er løsningen).

Endret 1. september 2008 av Jooakim

Logg inn

Leter etter et script som laster bilder uten å laste siden på nytt

Anbefalte innlegg

Jooakim

Lenke til kommentar

Videoannonse

Wackamole

Lenke til kommentar

Jooakim

Lenke til kommentar

Jooakim

Lenke til kommentar

Wackamole

Lenke til kommentar

NikkaYoichi

Lenke til kommentar

Wackamole

Lenke til kommentar

Lokaltog

Lenke til kommentar

Jooakim

Lenke til kommentar

Wackamole

Lenke til kommentar

Jooakim

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer