Siedrix

RSS Twitter

Agregando PHP a nuestra galeria de jQuery

La semana pasada mostré un poco de cómo hacer una galería con jQuery, hoy expando ese ejemplo un poco mas haciendo que PHP jale un numero N de imágenes al azar de un folder con lo cual podemos darle variedad a la galería.

Empezamos cambiando el archivo index de ser un html a ser un .php para que sea procesado por apache.

En la parte de hasta arriba de nuestro documento tendremos que agregar


<?php

$dir = ‘images’;

$files = scandir($dir);

shuffle($files);

$i=0;

$pics =4;

?>

De los cuales inicializamos el directorio a utilizar en $dir, el numero de imágenes al azar en $pics y la variable $i será un contador que utilizaremos más abajo. Donde sacaremos las imágenes del directorio y suceda la magia de este post (si es que se puede llamar magia) está en la instrucción scandir. Después ordenaremos el contenido de ese directorio de manera random con la instrucción shuffle.

La instrucción scandir nos entregara como primeros 2 elementos “.” y “..” lo cual no tengo idea por que lo hace, pero si alguien sabe, coméntelo en los comments.

Después solo nos falta imprimir las imágenes dentro del ejemplo anterior y todo quedara listo. Remplazando el contenido del <ul> de la vez pasada por:


<?php while($i < $pics){if($files[$i] != ‘.’ && $files[$i] != ‘..’){ ?>

<li>

<img src=”images/<?php echo $files[$i];?>”>

</li>

<?php $i++;}}?>

Este while que además filtra que no sean los elementos que no sean imágenes.

El resultado lo pueden observar aquí y lo pueden descargar aquí.

PD: Algún diseñador grafico que guste rifarse unos botones de ver aquí y descargar aquí se los agradecería bastante.

Related posts:

  1. Cortar imagenes con jQuery
  2. Agregando tipos de posts personalizados
  3. Usando librerias de jQuery…
  4. Agregando historia a javascript

Deja tu Opinión

Puedes agregar tags de HTML como: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">