Script som placerar bilderna i "random"-ordning vid varje refresh?

I sin enklaste form:

$links[] = Array("http://www.1.com", "1.gif");
$links[] = Array("http://www.2.com", "2.gif");
$links[] = Array("http://www.3.com", "3.gif");
$links[] = Array("http://www.4.com", "4.gif");
$links[] = Array("http://www.5.com", "5.gif");
$links[] = Array("http://www.6.com", "6.gif");

shuffle($links);

foreach($links as $link){
	echo "<a href=\"${link[0]}\" ><img src=\"${link[1]}\" /></a> ";
}

Oj det ser ju jätteenkelt ut! Är det bara att lägga in det här där jag vill ha det i html-dokumtentet?

Det där är PHP-kod som ska köras på servern. För att så ska ske måste...

1. servern ha stöd för PHP.
2. filen ha filändelsen .php istället för .html.
3. koden vara innesluten mellan <?php och ?>

Det här är vad koden gör.

$links[] = Array("http://www.1.com", "1.gif");
$links[] = Array("http://www.2.com", "2.gif");
$links[] = Array("http://www.3.com", "3.gif");
$links[] = Array("http://www.4.com", "4.gif");
$links[] = Array("http://www.5.com", "5.gif");
$links[] = Array("http://www.6.com", "6.gif");

Varje kod definierar ett par bestående av en länk och namnet på en bild. Sakerna måste självklart inte heta 1, 2, 3 osv. De tomma vnkelhakarna i $links[] = betyder "lägg till följande sak i slutet på en array (lista)". Till slut innehåller $links en lista med dina länkar och bilder.

shuffle($links);

shuffle är en inbyggd PHP-funktion som blandar runt innehållet i listan.

foreach($links as $link){
	echo "<a href=\"${link[0]}\" ><img src=\"${link[1]}\" /></a> ";
}

foreach($links as $link) loopar igenom listan och gör det som står inom måsvingeparenteserna för varje element i listan. $link innehåller ett element i taget frän listan. \" gör så att citationstecknet blir en del av strängen. Annars skulle det ha talat om för PHP att strängen tar slut där. ${link[0]} låter dig komma åt en variabel mitt i en sträng.

Det funkade jättebra i ett .php-dokument som du säger. Tack så mycket! Grymt :D
Hade dock gärna velat få det att funka inuti ett html-dokument för det lyckas jag inte med.

Fast ett ett php-dokument är precis samma sak som ett HTML-dokument, bara att du dessutom kan köra PHP-kod i det. Du kan ha HTML-kod som vanligt utanför <?PHP och ?>.

aha det visste jag faktiskt inte! Det funkar perfekt :)
En annan fråga med bilderna är hur jag sätter en css property som fixar lite margin mellan bilderna?

02simond skrev:

En annan fråga med bilderna är hur jag sätter en css property som fixar lite margin mellan bilderna?

Du sätter css på samma sätt som du brukar i vanlig html.

echo "<a href=\"${link[0]}\" ><img src=\"${link[1]}\" class=\"randomImage\" /></a> ";

(i koden har jag lagt till class="randomImage")

Pedda skrev:

Du sätter css på samma sätt som du brukar i vanlig html.

echo "<a href=\"${link[0]}\" ><img src=\"${link[1]}\" class=\"randomImage\" /></a> ";

(i koden har jag lagt till class="randomImage")

tack det funkar grymt :D
Jag har dock problem att lösa det där i vanlig kodning. Jag har nämligen också tänkt ha en lista i alfabetisk ordning. Hur får jag css classen med de marginaler jag vill ha att appliceras på samma sätt på alla bilder som finns i Div:en? När jag gör det så blir det margin runt hela diven istället mellan varje bild :S

Ja... det kan du ju göra

<div>
<?php
//PHPkod echo etc...
?>
</div>

Pedda skrev:

Du sätter css på samma sätt som du brukar i vanlig html.

echo "<a href=\"${link[0]}\" ><img src=\"${link[1]}\" class=\"randomImage\" /></a> ";

(i koden har jag lagt till class="randomImage")

voigtann1 skrev:

Ja... det kan du ju göra

<div>
<?php
//PHPkod echo etc...
?>
</div>

Nej nu menar jag helt utan php. En annan sida där jag bara lägger bilderna i bokstavsordning i en div. Bara html och css liksom. Då lyckas jag inte applicera css på bilderna så att det blir margin mellan objekten. Det blir bara margin runt alla bilder som en klump.

beror helt och hållet hur du skriver din CSS
floatar elementen och kör margin på dom så få marginaler runt bilderna, om det är en padding runt alla i ett block så sätt bara css på föräldern som kapslar runt dina bilder.

voigtann1 skrev:

beror helt och hållet hur du skriver din CSS
floatar elementen och kör margin på dom så få marginaler runt bilderna, om det är en padding runt alla i ett block så sätt bara css på föräldern som kapslar runt dina bilder.

Är inte så duktig på sånt här men såhär ser det ut:

<div id="knappar"><span class="bilder"><img src="knapp1.jpg" width="171" height="86"/><img src="knapp1.jpg" width="171" height="86"/><img src="knapp1.jpg" width="171" height="86"/>
</span></div>

och i css:en:
#knappar {
position:absolute;
margin-left:16px;
margin-right:16px;
margin-top:10px;
margin-bottom:10px;
top:100px;
}

Detta gör dock så att alla bilder får en gemensam margin som jag inte vill ha :(

Jag kom på en annan lösning för alfabetisk ordning. Säg att jag bygger upp php-scriptet med bilderna i ordning. Går det då att bara ta bort shuffle-kommandot? Och istället låta den rada upp alla efter den ordningen som jag skrivit de?

Prova

men Ja, det skall räcka ;)

Cool det funkade perfekt :D

Hmm nu har jag kommit på ett annat sätt som jag också skulle vilja göra det på.
Är det möjligt att ändra i koden lite så att den istället väljer att ordna bilderna efter senaste uppdaterat datum på bilderna?