Cómo crear una galería web de desplazamiento infinito

Spanish (Español) translation by Andrijana Mitevska (you can also view the original English article)

Al trabajar en una galería web, me resulta molesto tener que cambiar de página; así que en el tutorial de hoy, aprenderemos cómo crear una galería de desplazamiento infinito de una página, autogenerada, con PHP y AJAX. ¡Empecemos!

Paso 1: esquema del proyecto

Comenzaremos con una página de galería normal que tiene un contenedor para nuestras imágenes, y monitorearemos la posición de desplazamiento llamando a una función de JavaScript en un intervalo rápido. Cada vez que la barra de desplazamiento está cerca de la parte inferior, haremos una solicitud AJAX a un archivo PHP externo, que devuelve una lista de nombres de imágenes. Ahora, todo lo que tendremos que hacer es agregar estas imágenes a nuestro contenedor, modificando así la altura de la página y moviendo la posición de desplazamiento hacia arriba.

Paso 2: marcado HTML

Trabajaremos con una configuración muy básica: un encabezado y el contenedor para nuestras imágenes. Las miniaturas se agruparán en conjuntos de tres filas, cada una contendrá un enlace, haciendo referencia a la imagen de tamaño completo. Después de cada grupo, agregaremos un texto que muestre el número total de imágenes mostradas y un enlace a la parte superior de la página.

<body>
	<div id="header">Web Gallery | Infinite Scroll</div>
	<div id="container">	 
		<a href="img/Achievements.jpg"><img src="thumb/Achievements.jpg" /></a>    
		<a href="img/Bw.jpg"><img src="thumb/Bw.jpg" /></a>    
		<a href="img/Camera.jpg"><img src="thumb/Camera.jpg" /></a>
		<a href="img/Cat-Dog.jpg"><img src="thumb/Cat-Dog.jpg" /></a>    
		<a href="img/CREATIV.jpg"><img src="thumb/CREATIV.jpg" /></a>    
		<a href="img/creativ2.jpg"><img src="thumb/creativ2.jpg" /></a>
		<a href="img/Earth.jpg"><img src="thumb/Earth.jpg" /></a>   
		<a href="img/Endless.jpg"><img src="thumb/Endless.jpg" /></a>    
		<a href="img/EndlesSlights.jpg"><img src="thumb/EndlesSlights.jpg" /></a>    
		
		<p>9 Images Displayed | <a href="#header">top</a></p>
	    <hr />
	</div>
</body>

Paso 3: CSS

El CSS también es bastante básico. Primero, definimos los colores de la página y el posicionamiento del encabezado y los párrafos.

body{
	background:#222;
	color:#666;
}
#header{
	font-family:Arial, Helvetica, sans-serif;
	font-size:24px;
	font-weight:bold;
	text-align:left;
	text-indent:35px;
	margin: 0 auto;
	width:800px;
	margin-bottom:10px;
}
hr{
	margin: 20px;
	border:none;
	border-top: 1px solid #111;
	border-bottom: 1px solid #333;
}
p{
	color:#444;
	text-align:left;
	font-size:10px;
	margin-left: 20px;
	margin-bottom: -10px;
}
a{
	color:#444;
}

Paso 4

Luego, para el contenedor y las imágenes, usé un poco de CSS3 para agregar esquinas redondeadas y sombras. No olvida "-moz-box-shadow" y "-moz-border-radius" para Firefox y "-webkit-box-shadow" y "-webkit-border-radius" para Chrome y Safari.

#container{
	margin: 0 auto;
	width:800px;
	border:1px solid #333;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	font-family:Verdana, Geneva, sans-serif;
	text-align:center;
}
img{
	border:10px solid #444;
	-moz-border-radius: 5px;
	-webkit-border-radius: 10px;
	margin: 15px;
}
img:hover{
	border-color:#555;
	-moz-box-shadow: 0px 0px 15px #111;
	-webkit-box-shadow: 0px 0px 15px #111;
}

Paso 5: Script PHP

Esto va a ser muy breve. Necesitamos llamar al script PHP con el índice de la siguiente imagen que necesitamos como parámetro. En primer lugar, tenemos que recuperar todos los nombres de imágenes disponibles de un directorio y guardarlos en una matriz. Organice mis imágenes en dos carpetas: "thumb" e "img" que contienen las miniaturas y las imágenes reales, respectivamente. Ten en cuenta que las miniaturas deben tener exactamente el mismo nombre que tus imágenes de tamaño completo correspondientes.

1	<?php
2
3	$dir = "thumb";
4	if(is_dir($dir)){
5	if($dd = opendir($dir)){
6	while (($f = readdir($dd)) !== false)
7	if($f != "." && $f != "..")
8	$files[] = $f;
9	closedir($dd);
10	}

Definimos una variable para el directorio del que queremos obtener los nombres de las imágenes, probamos si existe y, si podemos abrirlo, leemos todos los nombres de los archivos. Al leer una carpeta completa, siempre obtendremos dos elementos adicionales que quizás no queramos: "." - representa el directorio actual y ".." - representa el directorio principal. Para compensar, tenemos que probar si el elemento leído es diferente de estos dos, luego podemos agregarlo de manera segura a nuestra matriz.

1	$files[] = $f;

Como nota, al agregar un elemento a una matriz y no especificar la posición en la que se colocará, siempre empujará el elemento al final de la matriz.

Paso 6

Ahora tenemos que construir nuestro texto de respuesta. Vamos a enviar de vuelta al JavaScript una sola cadena que contiene todos los nombres de archivo necesarios separados por un punto y coma.

1	$n = $_GET["n"];
2	$response = "";

Obtenemos el parámetro URL para el índice de la siguiente imagen que necesitamos e inicializamos nuestro texto de respuesta.

	
	for($i = $n; $i<$n+9; $i++)
		$response = $response.$files[$i%count($files)].';';
	echo $response;
}
?>

Como dije antes, las imágenes se agruparán en conjuntos de tres filas, cada una con tres imágenes, por lo que solo necesitamos nueve imágenes para devolver los nombres de archivo de un grupo. Comenzamos en el índice que obtuvimos como parámetro, $ n, y continuamos hasta $ n + 9. En cada incremento, agregamos el nombre de nuestra imagen seguido de ";" al texto de respuesta. Aquí hay una pequeña parte complicada. No tendremos un número infinito de imágenes; así que para crear el efecto de una galería "infinita" que nunca termina, cada vez que el índice de la siguiente imagen es mayor que el número total de imágenes, debemos comenzar de nuevo desde el principio. Esto se hace aplicando la función "módulo" o "%" entre el índice y el número total de imágenes.

1	$i%count($files)

Como resultado, obtenemos el resto de la división entre estos dos elementos. Por ejemplo, si el índice "$ i" es "50" y el número de imágenes "recuento ($ archivos)" es "45", el resultado será "5". Además, si "$ i" es "50" y "count ($ files)" es "65", el resultado será "50". Finalmente, tenemos que devolver nuestro texto de respuesta.

Paso 7

Aquí está el script PHP completo. Simplemente coloca tu código completo dentro de un nuevo archivo .php.

1	<?php
2
3	$dir = "thumb";
4	if(is_dir($dir)){
5	if($dd = opendir($dir)){
6	while (($f = readdir($dd)) !== false)
7	if($f != "." && $f != "..")
8	$files[] = $f;
9	closedir($dd);
10	}
11
12
13	$n = $_GET["n"];
14	$response = "";
15	for($i = $n; $i<$n+9; $i++){
16	$response = $response.$files[$i%count($files)].';';
17	}
18	echo $response;
19	}
20	?>

Paso 8: JavaScript

Como de costumbre, primero definimos algunas variables que necesitaremos más adelante.

var contentHeight = 800;
var pageHeight = document.documentElement.clientHeight;
var scrollPosition;
var n = 10;
var xmlhttp;

Para determinar el clima, la barra de desplazamiento está cerca de la parte inferior de la página, necesitamos tres variables:

"contentHeight": la altura de la galería inicial
"pageHeight": la altura de la página visible en el navegador
"scrollPosition": la posición de la barra de desplazamiento medida desde la parte superior

Por último, necesitamos una variable para el siguiente índice de imagen (que vamos a enviar al script PHP) y una variable para el objeto de solicitud Ajax.

Paso 9

Necesitamos definir una función que agregará las imágenes a nuestro contenedor HTML.

1	function putImages(){
2	if (xmlhttp.readyState==4){
3	if(xmlhttp.responseText){

Un objeto de solicitud pasa por diferentes estados a medida que se realiza la solicitud, cada uno de los cuales tiene un valor numérico asociado. El que nos interesa es el estado final, cuando la solicitud está completa y el valor es "4". Primero probamos si la solicitud está en este estado y luego verificamos si recibimos una respuesta.

Paso 10

Si se cumplen ambas condiciones, tenemos que tokenizar el texto de respuesta. Esto significa que tenemos que separar los nombres de los archivos en una matriz. Recuerda que en el script PHP devolvimos una sola cadena con los nombres separados por punto y coma. Aquí hay un ejemplo: Achievements.jpg; Bw.jpg; Camera.jpg; Cat-Dog.jpg; CREATIV.jpg; creativ2.jpg; Earth.jpg; Endless.jpg; EndlesSlights.jpg;

1	var resp = xmlhttp.responseText.replace("\r\n", "");
2	var files = resp.split(";");

Hay un pequeño problema que tenemos que resolver primero; el texto de respuesta puede tener al principio un carácter de nueva línea que no queremos. Esto se soluciona fácilmente con la función "reemplazar", que toma dos parámetros: "\ r \ n" - el carácter de nueva línea, y "" - cadena vacía que reemplazará todas las apariciones del primer parámetro. Ahora todo lo que tenemos que hacer es dividir la cadena por nuestro delimitador ";".

Paso 11

A continuación, tenemos que agregar las imágenes a nuestro contenedor.

            var j = 0;
            for(i=0; i<files.length; i++){
                if(files[i] != ""){
                    document.getElementById("container").innerHTML += '<a href="img/'+files[i]+'"><img src="thumb/'+files[i]+'" /></a>';
                    j++;
                    
                    if(j == 3 || j == 6)
                        document.getElementById("container").innerHTML += '';
                    else if(j == 9){
                        document.getElementById("container").innerHTML += '<p>'+(n-1)+" Images Displayed | <a href='#header'>top</a></p><hr />";
                        j = 0;
                    }
                }
            }

Para cada elemento de nuestra matriz, verificamos si no es una cadena vacía y agregamos la miniatura con el enlace. Tenemos que mantener un contador "j" para poder separar las imágenes en filas. Después de cada tercera y sexta miniatura agregadas, creamos una nueva línea, y después de agregar nueve miniaturas, colocamos el texto que muestra el número total de imágenes mostradas y un enlace a la parte superior de la página.

Paso 12

Aquí está la función completa.

function putImages(){
	if (xmlhttp.readyState==4){
    	if(xmlhttp.responseText){
			var resp = xmlhttp.responseText.replace("\r\n", "");
			var files = resp.split(";");
            
            var j = 0;
            for(i=0; i<files.length; i++){
                if(files[i] != ""){
                    document.getElementById("container").innerHTML += '<a href="img/'+files[i]+'"><img src="thumb/'+files[i]+'" /></a>';
                    
                    j++;                    
                    if(j == 3 || j == 6)
                        document.getElementById("container").innerHTML += '';
                    else if(j == 9){
                        document.getElementById("container").innerHTML += '<p>'+(n-1)+" Images Displayed | <a href='#header'>top</a></p><hr />";
                        j = 0;
                    }
                }
            }
		}
	}
}

Paso 13

Ahora vamos a definir la función que verificará si la posición de desplazamiento se acerca al final y realiza la solicitud al servidor.

function scroll(){
	
	if(navigator.appName == "Microsoft Internet Explorer")
		scrollPosition = document.documentElement.scrollTop;
	else
		scrollPosition = window.pageYOffset;

Primero, tenemos que encontrar la posición de la barra de desplazamiento. Internet Explorer hace esto de manera un poco diferente, por lo que tenemos que determinar qué navegador está usando el cliente, luego simplemente almacenar el valor en la variable que definimos anteriormente.

Paso 14

1	if((contentHeight - pageHeight - scrollPosition) < 500){

Ahora verificamos si estamos a punto de llegar al final de nuestra galería, si la parte de la página visible en el navegador está por debajo de los 500 px inferiores de toda la página. Este no es un valor exacto, puedes usar uno diferente si lo encuentras adecuado. Si esta condición es cierta, podemos continuar y agregar nuevas imágenes.

Paso 15: Creación del objeto XMLHttpRequest

Estamos listos para crear el objeto XMLHttpRequest y enviarlo. Nuevamente, para Internet Explorer la definición es un poco diferente, por lo que debemos compensar esto también.

	if(window.XMLHttpRequest)
			//Firefox, Opera, Safari
			xmlhttp = new XMLHttpRequest();
		else
			if(window.ActiveXObject)
            	//Internet Explorer
				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
			else
				alert ("Bummer! Your browser does not support XMLHTTP!");

Paso 16

Antes de enviar la solicitud, tenemos que especificar el nombre del script PHP en el servidor e insertar los parámetros que queremos darle.

1	var url="getImages.php?n="+n;

Esta es una variable de texto simple que representa la URL de la página.

Paso 17

Es hora de enviar la solicitud.

1	xmlhttp.open("GET",url,true);
2	xmlhttp.send();

La URL se establece llamando al método "abierto". El segundo parámetro es el importante, siendo la URL del script. Después de hacerlo, todo lo que necesitamos es enviarlo. Esto ejecutará el script PHP y pondrá en "xmlhttp.responseText" el valor de retorno del mismo.

Paso 18

El paso final es colocar el nuevo contenido en la página llamando a la función que definimos anteriormente "putImages" y preparar nuestras variables para la siguiente solicitud.

		n += 9;
		contentHeight += 800;
		xmlhttp.onreadystatechange = putImages;				
	}
}

Tenemos nueve imágenes nuevas en la galería, así que incrementamos "n" con 9, y necesitamos cambiar la altura de la página; así que incremente "contentHeight" con 800.

Paso 19

Aquí está todo el JavaScript que hemos utilizado.

<script>
var contentHeight = 800;
var pageHeight = document.documentElement.clientHeight;
var scrollPosition;
var n = 10;
var xmlhttp;

function putImages(){
	
	if (xmlhttp.readyState==4)
	  {
		  if(xmlhttp.responseText){
			 var resp = xmlhttp.responseText.replace("\r\n", ""); 
			 var files = resp.split(";");
			  var j = 0;
			  for(i=0; i<files.length; i++){
				  if(files[i] != ""){
					 document.getElementById("container").innerHTML += '<a href="img/'+files[i]+'"><img src="thumb/'+files[i]+'" /></a>';
					 j++;
				  
					 if(j == 3 || j == 6)
						  document.getElementById("container").innerHTML += '';
					  else if(j == 9){
						  document.getElementById("container").innerHTML += '<p>'+(n-1)+" Images Displayed | <a href='#header'>top</a></p><hr />";
						  j = 0;
					  }
				  }
			  }
		  }
	  }
}
		
		
function scroll(){
	
	if(navigator.appName == "Microsoft Internet Explorer")
		scrollPosition = document.documentElement.scrollTop;
	else
		scrollPosition = window.pageYOffset;		
	
	if((contentHeight - pageHeight - scrollPosition) < 500){
				
		if(window.XMLHttpRequest)
			xmlhttp = new XMLHttpRequest();
		else
			if(window.ActiveXObject)
				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
			else
				alert ("Bummer! Your browser does not support XMLHTTP!");		  
		  
		var url="getImages.php?n="+n;
		
		xmlhttp.open("GET",url,true);
		xmlhttp.send();
		
		n += 9;
		xmlhttp.onreadystatechange=putImages;		
		contentHeight += 800;		
	}
}

</script>

Paso 20

Lo último que debemos hacer es ejecutar JavaScript en un intervalo específico.

1	<body onload="setInterval('scroll();', 250);">

Simplemente configura la propiedad "onload" de la etiqueta "body" y establece tu valor en la función "setInterval". Esto ejecutará la función de "desplazamiento" cada cuarto de segundo. Nuevamente, puedes cambiar este valor de tiempo, pero descubrí que es óptimo para lo que necesitamos.

¡Finalizado!

¡Hemos terminado! Espero que este tutorial te haya resultado útil. Deja un mensaje en la sección de comentarios a continuación, si necesitas más ayuda o consejo.