Mostrar imágenes al azar

Beware: This post was published 8 years ago and its content may be outdated.

En este tutorial os voy a explicar cómo mostrar dos (o más) imágenes al azar usando PHP. Para poder lograr el efecto es necesario disponer de un servidor que soporte PHP.

El objetivo es que el usuario al acceder al archivo vea dos imágenes, escogidas al azar de unas cuantas. Cuando refresque la página o vuelva a acceder verá otras dos diferentes.

Las imágenes

Para comenzar necesitamos tener unas cuantas imágenes que usar, en mi caso usaré 5 imágenes creadas por mí, en las que se ve perfectamente que son diferentes unas a otras, son estas:

Puede usar más de 5 imágenes, pero yo creo que para el ejemplo con 5 fotos es suficiente.

El código PHP

Ahora vayamos al código PHP. Lo que haremos será crear una variable, cuyo valor será un número al azar entre 1 y 5.

$foto1 = rand(1,5);

Luego crearemos un bucle do while, donde crearemos una segunda variable cada vez que la primera variable y esta última tengan el mismo valor.

El valor de la segunda variable será aleatorio entre 1 y 5, y usaremos el bucle para evitar que ambas tengan el mismo valor.

do {
$foto2 = rand(1,5);
} while ($foto1 == $foto2);

Por último mostraremos la imagen. En mi caso los nombres son foto-número de foro. Así que el código que usaré será:

<img src="foto-<?php echo $foto1; ?>.jpg"  />
<img src="foto-<?php echo $foto2; ?>.jpg"  />

Y el código final quedaría así:

<?php
$foto1 = rand(1,5);
do {
$foto2 = rand(1,5);
} while ($foto1 == $foto2);
?>
<img src="foto-<?php echo $foto1; ?>.jpg"  />
<img src="foto-<?php echo $foto2; ?>.jpg"  />

Adaptarlo a más imágenes

Puede que queramos mostrar más imágenes, en ese caso adaptarlo es sencillo. Eliminamos el bucle do while, y en su lugar hacemos que las imágenes sean continuadas (si la primera imagen es la foto 3 la segunda será la 4 y la tercera la 5). Luego añadiremos una pequeña condición que hará que en caso de superar el total de fotos, se comience desde la primera.

El código PHP final sería este:


<?php
$foto1 = rand(1,5);
$foto2 = $foto1++;
if ($foto2 > $last_img) {
$foto2 = $foto1--;
}
$foto3 = $foto2++;
if ($foto3 > $last_img) {
$foto3 = $foto2--;
}
/* ETC */
?>
<img src="foto-<?php echo $foto1; ?>.jpg"  />
<img src="foto-<?php echo $foto2; ?>.jpg"  />
<img src="foto-<?php echo $foto3; ?>.jpg"  />

Demostración

Podéis ver una página de demostración aquí.