Gå til innhold

Tilfeldig bakgrunnsbilde. Hvordan?

Svein_Jarle

Anbefalte innlegg

Svein_Jarle

Svein_Jarle

Skrevet
Skrevet

Heisann!

 

Helt ny på dette med webutvikling, og lærer stort sett av å lese andres kode. Men nå lurer jeg på om noen av dere glupe hoder kanskje kan svare meg på dette. På denne nettsiden http://www.bj0rn.net/ har fotografen et tilfeldig bakgrunnsbilde hver gang du loader sida, og jeg skjønner ikke hvordan han får det til. Ser ikke noe i koden som kan forklare det, så da lurer jeg på om noen av dere vet? Skal ha samme funksjon på egen nettside som er under utvikling :)

Lenke til kommentar

Videoannonse

Videoannonse
Annonse
Crowly

Crowly

Skrevet
Skrevet (endret)

Kan gjøre noe slikt

 

// hent all jpg filer i en mappe
$images = glob('/path/to/images/*.jpg');

// finn maks verdi for tilfeldig utvelgelse
// første forekomst i en array er 0, derfor trekk fra 1
$max = count($images)-1;

// lag ett tilfeldig tall mellom 0 og $max. 
$rnd_int = rand(0,$max); 

// vis tilfeldig bildet
echo '<img src="'.$images[$rnd_int].'" alt=""/>';
Edit: Oops det gjaldt bakgrunns bilde, metoden blir mye av det samme.

 

Html/index

<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="index_css.php"/>
</head>
index_css.php

<?php
header('Content-type: text/css');
$images = glob('/path/to/images/*.jpg'); 
$rnd_int = rand(0,count($images)-1);
?>

body {
    background-image:url('<?php echo $images[$rnd_int]; ?>');
}
Endret av Crowly
Lenke til kommentar
Feh

Feh

Skrevet
Skrevet (endret)

Ganske sikker på at han produserer den følgende stilkoden med PHP

<style type="text/css">
html { 
	background: url(/portfolio/images/bg/0017.jpg) no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
</style>

Jeg antar at han har lagret et knippe bilder i /bg mappen med forskjellige tall og henter de frem f.eks slik (gitt at det er 20 forskjellige):

<?php
$value=rand(1,20);
$value=str_pad($value, 4, '0', STR_PAD_LEFT);
?>
<style type="text/css">
html { 
	background: url(/portfolio/images/bg/<?php echo $value; ?>.jpg) no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
</style>

Edit: Evt. kan det kombineres med Crowlys svar for å få en mer dynamisk løsning:

<?php
$images = glob('/path/to/images/*.jpg');
$max = count($images)-1;
$value=rand(1,$max);
$value=str_pad($value, 4, '0', STR_PAD_LEFT);
?>
<style type="text/css">
html { 
	background: url(/portfolio/images/bg/<?php echo $value; ?>.jpg) no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
</style>

Edit2: str_pad er lagt på for å få samme filnavn som han har brukt på websiden (f.eks 0012.jpg eller 0004.jpg). Hvis du dropper å padde filnavnene med 0er kan du bare fjerne den linjen.

Endret av Feh
Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste
×
×
  • Opprett ny...