Presentar fotos en slider con PHP.

Cuando hablamos de presentar fotos todo el mundo piensa, hasta yo mismo, en javascript o sus librerías jquery, no obstante PHP también puede servirnos para esto. La prueba la presentamos a continuación.

Hace tiempo, prácticamente todas las galerías de fotos presentaban una miniatura de ella, y al pulsarla te aparecía la foto en su tamaño original, para ver otra foto, solo había dos posibles opciones, una pulsar el botón atrás del navegador, y volver a pulsar en la siguiente foto que quisiéramos ver o bien, cerrar esa ventana del navegador para acceder de nuevo a la galería.

Posteriormente y ahora es la corriente dominante la que se usa prácticamente en todos los sitios Web, es mostrar las fotos en una capa CSS que se abre al pulsar sobre la miniatura, y con unos botones, pulsarlos para ver la siguiente, también en su tamaño original.

Como a mi me gusta hacer las cosas a mi manera (con decía Fran Sinatra) y soy muy comodón, pensé en que simplemente pulsar en la foto para ver la siguiente, seria mas cómodo, y eso es lo que he hecho. La función es la siguiente:

Código 1

<?php
include('funciones/func_dir_fotos.php');
// Presenta una relacion de fotos pulsando sobre la imagen
function PresFotos($mis_fotos,$sep,$f_act){
    if($f_act == null){
        $f_act = 0;
    }else{
        $f_act = $f_act;
    }
    $Nfoto = $f_act + 1;
    $fotos = explode($sep, $mis_fotos);
    $n_fotos = count($fotos);
        /* for ($v = 0; $v < $n_fotos; ++$v) {
            // Eliminamos posibles espacios en blanco
            $ar_fotos = trim($fotos[$v]);
            $array_fotos[$v] = $ar_fotos;
        }  */
            foreach($fotos as $key => $fot){
                // Eliminamos posibles espacios en blanco
                $array_fotos[$key] = trim($fot);
            }
        if($f_act == $n_fotos - 1){
            $f_sig = 0;
        }else{
            $f_sig = $f_act + 1;
        }
            $las_fotos = array($array_fotos[$f_act],$f_sig,$n_fotos,$Nfoto);
    return $las_fotos;
}
// Extraemos las fotos del directorio o carpeta con la funcion FotosDir
$directorio = 'fotos/';        // Siempre terminando en /
$Tipos = '{png,jpg,jpeg,jfif,gif,bmp}';    // Con {*} muestra todos los archivos existentes

$fotos_dir = FotosDir($directorio, $Tipos);    // Array con las fotos
$mis_fotos = implode('|', $fotos_dir);    // Convertimos el array en cadena

// Aplicamos la funciom PresFotos para presentar las fotos
$sep = '|';
@$f_act = $_GET['nf'];

$Fotos = PresFotos($mis_fotos,$sep,$f_act);

echo "<div align=\"center\">
<a href=\"".$_SERVER['PHP_SELF']."?nf=$Fotos[1]\" title=\"Click para ver la foto $Fotos[1]\"><img src=\"$directorio$Fotos[0]\" width=\蛄\" alt=\"Descripcion imagen\" /></a><br />
Foto $Fotos[3] de $Fotos[2]</div>";

    echo '<pre>';
    print_r($Fotos);
    echo '</pre>'; 
?>

Vamos a explicar un poco esta interesante y practica función.

Esta función recibe tres parámetros, por un lado la variable $mis_fotos recibe una cadena con los nombres de las fotos separados, en este caso por pleca (|), podríamos haber usado otro cualquiera, como la coma (,). La variable $sep recibe el separador que estamos usando para los nombres de las fotos. Y la variable $f_act toma el valor de la key del array que tendrá cada foto cuando la cadena de texto con el nombre de las fotos es convertida en un array. Así la variable $mis_fotos podría tomar un valor como este:

$mis_fotos = 'imagen1.jpg| imagen2.jpg|imagen3.jpg |imagen4.jpg| imagen5.jpg|imagen6.jpg|imagen7.jpg |imagen8.jpg| imagen9.jpg|imagen10.jpg';

Esta variable, mediante la función explode(), la convertimos en un array, y usando un bucle le aplicamos la función trim() a cada value del array, ya que por error podríamos haber introducido algún espacio en blanco al principio o al final del nombre de la foto.

Para hacer esto, precisamos usar un bucle, inicialmente use el bucle FOR, que lo he dejado tal cual como comentario, para que el lector pueda comparar la diferencia de sintaxis a la hora de hacer una idéntica tarea. Como puede observarse, el bucle FOREACH, el que se aplica en esta función, no solo tiene una sintaxis más simple, además también es más eficiente en cuanto a recursos de servidor.

Seguidamente, mediante un condicional determinamos el valor que pasaremos por la URL en función de en que foto estemos.

Con todo esto, la función devuelve un array con 4 valores:

Array
(
    [0] => 2305261249-9790.jpg
    [1] => 0
    [2] => 60
    [3] => 60
)

Con la key 0 tenemos el nombre de la foto, con la key 1 tenemos el valor de la key del array $mis_fotos, con la key 2 tenemos el número total de fotos que se van a presentar, y por último la key 3 nos da el número de la foto comenzando por 1. Salvo en la última foto (60 en este caso), las keys 1 y 3 coinciden en valor.

Llegados a este punto, podemos ver que el “Código 1” no contiene la variable $mis_fotos definida como lo hemos hecho. ¿Cuál es el motivo?

Es así por que en lugar de enumerar un conjunto de fotos, lo que hemos hecho ha sido leer los archivos contenidos en la carpeta $directorio, y lo hemos hecho mediante una función incluida en el archivo “func_dir_fotos.php” al comienzo del código. Esta función, FotosDir(), es una pequeña modificación de la función presentada aquí que nos devuelve un array con las fotos de unas ciertas extensiones presentes en una carpeta o directorio. Dado que esta función nos devuelve un array, en la variable $mis_fotos lo hemos convertido en cadena mediante la función implode(). De esta forma tan sencilla nos hemos liberado de escribir todos los nombres de las fotos en una cadena.

La función modificada para leer los archivos de un directorio es la siguiente:

<?php
/* Función que muestra los archivos con unas determinadas extensiones almacenados en una carpeta o directorio */

function FotosDir($directorio, $Tipos){
$archivos_tipo = glob($directorio."*.$Tipos", GLOB_BRACE);
    foreach($archivos_tipo as $key => $fotos){
        $ruta_arch[$key] = explode('/', $fotos);
        $nombre[$key] = $ruta_arch[$key][1];
    }
    return $nombre; 
}
// Aplicamos la funcion
/* 
// Directorio que contiene los archivos
$directorio = 'fotos/';
// Para mostrar varios tipos de archivos
// No agregar espacios en blanco en {png,jpg,jpeg,jfif,gif}
$Tipos = '{png,jpg,jpeg,jfif,gif}';    // Con {*} muestra todos los archivos existentes

$mis_fotos = FotosDir($directorio, $Tipos);

    echo '<pre>';
    print_r($mis_fotos);
    echo '</pre>'; 
*/
?>

Esperando que este artículo os haya gustado, me despido hasta el siguiente, que llegará muy pronto.