Una de les part més peculiars de la nostra percepció és l’atractiu del moviment. De vegades cal fer més dinàmica una web i una de les formes és presentar un grup d’imatges que canvien o vagen substituint-se una darrere l’altra.
Per a un dels projectes que mantinc des del segle passat, vaig haver d’investigar com fer-ho sense utilitzar elements ja programats. Primer va ser amb un javascript on les imatges eren sempre les mateixes i amb l’aprenentatge del PHP vaig poder llegir el directori per a que, aleatòriament es triaren les imatges d’un directori en concret. Si t’interesa, aquí tens l’exemple funcionant.
Ara ja, l’explicació.
El primer pas a fer és la selecció d’imatges que cal guardar en un directori que llegirem amb php:
header("Refresh:8");
// extensions a mostrar
$extensions = array('jpg','jpeg','gif','png','bmp');
// nom del directori
$folder_image_name = "/pub_hist/imtgs/";
// ruta del directori
$images_folder_path = $_SERVER['DOCUMENT_ROOT'].$folder_image_name;
// url del directori
$url_to_folder = 'https://'.$_SERVER["SERVER_NAME"].$folder_image_name;
// array d'imatges
$images = array();
//srand((float) microtime() * 10000000); // Si es PHP Version < 4.2.0
// obrim el directori i mostrem les imatges
if ($handle = opendir($images_folder_path)) {
while (false !== ($file = readdir($handle))) {
if ($file != "." && $file != "..") {
// afegim l'extensió de l'arxiu
$ext = strtolower(substr(strrchr($file, "."), 1));
// guardem l'array
if(in_array($ext, $extensions)){
$images[] = $url_to_folder.$file;
$images_size[] = $images_folder_path.$file;
}
}
}
closedir($handle);
}
Finalment, si hem trobat fitxers al directori els mostrarem de forma aleatòria.
if(!empty($images)){ // si tenemos algo que mostrar...
$rand_key = array_rand($images, 1);
$src = $images[$rand_key];
$src_size = $images_size[$rand_key];
Per a mostrar la imatge a la plana utilitzem la següent linia:
echo "<img src='".$src."' width='".$tamanyo[0]."' height='".$tamanyo[1]."' border='0' align='absmiddle'>\n";
Hauràs vist que en les mesures de la imatge (width, height) apareix una variable que ens indica quina de quina mida la volem presentar. Això és molt útil quan hem recollit imatges de diferents dimensions i volem evitar fer el treball de edició per a igualar-les.
La funció la pots arreplegar i guardar-la en un fitxer anomenat norm_tam.php. Per aplicar-la caldrà afegir la següent linia:
include_once ("include/norm_tam.php");
Si volem presentar més d’una imatge aleatòria caldrà descarregar el nombre aleatòri que hem asignat a la primera i per això este codec
// per a mostrar una segona imatge diferent
unset($images[$rand_key]);
$rand_key = array_rand($images, 1);
$src = $images[$rand_key];
$src_size = $images_size[$rand_key];
$src_size = $images_size[$rand_key];
Fins ara tot el que hem utilitzat ha sigut el php per a veure imatges aleatòries que canvien, en l’exemple, en vuit segons. A la propera entrada, aplicarem el javascript per a fer el cronometre i per si vols la presentació acumulada en capes.
Fins aviat.