Enkel bildvisning

3 svar · 398 visningar · startad av learn 11 aug. 2006

learnMedlem sedan jan. 20051 130 inlägg

Frågan11 aug. 2006 11:37#1

Nu står det helt still... Så nu får ni ett uppdrag ;)

Jag vill ha en väldigt simpel bildvisning på min sida. Jag ett antal bildnamn sparade i en array, $bild_array = array('bild1.jpg','bild2.jpg','bild3.jpg', osv..). Bilderna skall synas 1 i taget och växlas genom att klicka på "Föregående" eller "Nästa" (i den ordning som arrayen visar).

Jag tänkte mig att alla bilder kan laddas in på sidan men med "display:none", och de sedan visas genom ngn typ av JS-funktion vid klick...

Kan ngn hjälpa mig på traven med funktionen så skulle jag bli glad! Tack! :bire

learnMedlem sedan jan. 20051 130 inlägg

12 aug. 2006 16:02#2

Någon som har ngt konkret förslag? :)

jawbreakerMedlem sedan jan. 2003296 inlägg

14 aug. 2006 06:27#3

Enkel variant:

<!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="se" lang="se">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Bildgalleri</title>

<script type="text/javascript">
<!--

var g_selectedImage = 0;

var g_images = new Array("bild1.gif","bild2.gif","bild3.gif");

function step( p_step )
{
	g_selectedImage += p_step;

	if ( g_selectedImage < 0 )
		g_selectedImage = g_images.length - 1;
	else if ( g_selectedImage > g_images.length - 1 )
		g_selectedImage = 0;

	document.getElementById("iGallery").src = g_images[g_selectedImage];
}

function previous()
{
	step(-1);
}

function next()
{
	step(1);
}

//-->
</script>
</head>

<body>

<div><img id="iGallery" src="bild1.gif" alt="" /></div>

<div>
<a href="javascript:previous();">Föregående</a>
<a href="javascript:next();">Nästa</a>
</div>

</body>
</html>

learnMedlem sedan jan. 20051 130 inlägg

14 aug. 2006 12:39#4

Tack, ska testa!