WN - Slumpad produktlista javascript

WN (https://www.wn.se/forum/index.php)

- Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)

- - Slumpad produktlista javascript (https://www.wn.se/forum/showthread.php?t=37722)

Hej!

Håller för tillfället på med en hemsida och har nu kommit så långt att jag ska skapa en slumpad produktlista.
Hittade på nätet ett script som slumpar bilder, se nedan. Tanken är att därefter identifiera bilden och sedan lägga in rätt text därefter. Vad är lättast? Att göra en label som tar ut identiteten och sedan ett annat text script som läggs in efter denna eller ska man använda sig av någon helt annan metod?

Jag är nybörjare vad gäller javascript så en färdig kod är ju alltid att föredra.....
Alla tips och råd är välkomna.

Den som vill titta på hemsidan är adressen: http://www.spapalatset.se
Scriptet som det ser ut idag: http://spapalatset.se/sidegallery/slumpa_bild.asp

Kod:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">



<script type="text/javascript" language="JavaScript">

<!--



function slumpa_bild()

{

bilder=new Array("antibes.jpg","monaco.jpg","liso.jpg","bahamas.jpg","morko.jpg");

slumpad_bild_nr=Math.floor(Math.random()*bilder.length);

bild=bilder[slumpad_bild_nr];

HTML_kod="<img src=\""+bild+"\">";

return HTML_kod;

}



//-->

</script>



</head>

<body>

<script type="text/javascript" language="javascript">

<!--

        document.write(slumpa_bild())

//-->

</script>

</body>

</html>

Kod:

function slumpa_bild()

{

bilder=new Array();

bilder[] = new Array("antibes.jpg", "Min text");

bilder[] = new Array("monaco.jpg", "Min text 2");



slumpad_bild_nr=Math.floor(Math.random()*bilder.length);

bild=bilder[slumpad_bild_nr];

HTML_kod='<p><img src="'+bild[0]+'" alt="' + bild[1] +'"><br/>' + bild[1] + '</p>';

return HTML_kod;

}

Lär nog fungera för dig. Det finns kortare sätt att skriva arrayen på men eftersom du är nybörjare så är det nog lite överkurs och lär troligen enbart strula till det för dig.

Varför göra det i javascript? Javascript är nog enklast för dig om du skall uppdatera produktlistan i realtid, alltså att bilder/text mm byts ut under tiden besökaren tittar på sidan. Skall bilder/text bytas laddas in vid sidbyte är det mycket enklare och mindre jobb att lösa detta på serversidan.

Okej! Tack för svaret. Javascript var det jag hittade, så därför fick det bli det men finns det bättre och enklare lösningar tittar jag gärna på det!

Den behöver inte ändras i realtid, räcker med att det ändras vid sidbyte. Hur gör jag detta?

Kika på att göra samma sak på serversidan med PHP, ASP, JSP eller liknande...

Om du kör någon relationsdatabas med SQL så kan du använda följande SQL-sats för att visa 10 produkter i slumpartad ordning:

MySQL:

Kod:

SELECT column_names

FROM tbl_name 

ORDER BY RAND() LIMIT 10;

sql-server:

Kod:

SELECT TOP 10 column_names

FROM tbl_name 

ORDER BY NewID()

MS Access (Kräver en numerisk kolumn att arbeta med):

Kod:

SELECT TOP 10 column_names

FROM tbl_name

ORDER BY rnd(numericalfield)

PostgreSQL:

Kod:

SELECT column_names FROM tbl_name

ORDER BY RANDOM()

LIMIT 10

IBM DB2:

Kod:

SELECT column_names, RAND() as IDX 

FROM tbl_name 

ORDER BY IDX FETCH FIRST 10 ROWS ONLY

Oracle:

Kod:

SELECT column_names 

FROM 

 * * * *( SELECT column_name FROM table

 * * * * *ORDER BY dbms_random.value 

 * * * *)

WHERE rownum <= 10