Comunidad de diseño web y desarrollo en internet

Galería de imágenes en AJAX

Aquí les dejo mi primer tip en clab, después de pensar tanto en como colaborar con esta comunidad me recordé que no hace mucho realice una buena aplicación con AJAX y que en algún momento le podría ser de full ayuda para algún clabber.

Este tip trata de como realizar una galería de imagines con AJAX el cual realice hace tiempo con php y quise simplificarlo para compartirlo.

Aunque se que ya en la web hay varios frameworks, decidí colocar este ya que esta bastante sencillo.

Si llegan a tener alguna duda o sugerencia con este tip, será bienvenida, disculpen si no me explico mucho pero soy nuevo en esto de la curación de post de este tipo ^^

Documento HTML:


Código :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>Galeria AJAX</title>
  <script language="javascript" type="text/javascript" src="js/galeria.js">
  </script>
</head>
<body>
  <p><img src="imagenes/imagen_001.gif" name="imagen" border="0" id="imagen"/></p>
  <p>
   <a href="#" onclick="return imagenesPrevias()"><img src="imagenes/left.gif" name="prev" width="10" height="10" border="0" id="prev" /></a>
   <a href="#" onclick="return mostrarImagen(1)"><img src="imagenes/vacio.gif" name="demo1" height="50" border="0" id="" /></a>
   <a href="#" onclick="return mostrarImagen(2)"><img src="imagenes/vacio.gif" name="demo2" height="50" border="0" id="imagenes/vacio.gif" /></a>
   <a href="#" onclick="return mostrarImagen(3)"><img src="imagenes/vacio.gif" name="demo3" height="50" border="0" id="imagenes/vacio.gif" /></a>
   <a href="#" onclick="return mostrarImagen(4)"><img src="imagenes/vacio.gif" name="demo4" height="50" border="0" id="imagenes/vacio.gif" /></a>
   <a href="#" onclick="return mostrarImagen(5)"><img src="imagenes/vacio.gif" name="demo5" height="50" border="0" id="imagenes/vacio.gif" /></a>
   <a href="#" onclick="return mostrarImagen(6)"><img src="imagenes/vacio.gif" name="demo6" height="50" border="0" id="imagenes/vacio.gif" /></a>
   <a href="#" onclick="return mostrarImagen(7)"><img src="imagenes/vacio.gif" name="demo7" height="50" border="0" id="imagenes/vacio.gif" /></a>
   <a href="#" onclick="return mostrarImagen(8)"><img src="imagenes/vacio.gif" name="demo8" height="50" border="0" id="imagenes/vacio.gif" /></a>
   <a href="#" onclick="return mostrarImagen(9)"><img src="imagenes/vacio.gif" name="demo9" height="50" border="0" id="imagenes/vacio.gif" /></a>
   <a href="#" onclick="return mostrarImagen(10)"><img src="imagenes/vacio.gif" name="demo10" height="50" border="0" id="imagenes/vacio.gif" /></a>
   <a href="#" onclick="return imagenesSiguientes()"><img src="imagenes/right.gif" name="next" border="0" id="next" /></a>
   </p>
  <script language="javascript" type="text/javascript">
  <!--
  // cargar las imagenes pequeñas
  cargarImagenesXML(0);
  //-->
  </script> 
  </body>
  </html>

Explicación del código:
Lo importante de observar en el código HTML es la llamada del documento galeria.js (que será creado más adelante) que contiene todo el código referente a la carga y muestra de las imágenes.

Luego tenemos una imagen que tiene un atributo name como valor imagen, la cual va a mostrar cualquiera de las imágenes que aparecen en la aparte inferior.

Mas adelante tenemos una series de imágenes pequeñas las cuales van a representar cada imagen que se encuentre en el documento XML(cada nodo llamado imagen), estas imágenes tienen un atributo name que nos va a servir de referencia al momento de hacerles click para que nos muestre la imagen seleccionada.

También estas pequeñas imágenes hacen referencia a una función javascript, la cual tiene un parámetro para indicar que imagen fue seleccionada.

Documento JS:

Código :

// variable que contendrá al objeto XMLHttpRequest
var ObjectoXMLHttpRequest = false;
// variable en donde se almacenaran las imágenes que serán leídas desde el XML
var options;
// máximo de imágenes pequeñas a mostrar
var maxImagenesMostar = 10;
// variable que contiene el número de páginas a mostrar, están divididas en este caso de 10 en 10
var pagina = 0;
// variable de control que contiene el máximo de paginas
var totalPaginas = 0;
// imagen a patir de la cual se comenzara a cargar las imágenes al momento de cargar la página por primera vez
var comenzar = 0;
// variable que indica si esta en depuración
var depuracion = false;
// URL del servidor en donde se llamaran las imágenes
var URLservidor = 'http://localhost/AJAX/Gallery/';
// archivo XML que contiene las propiedades de las imágenes
var archivoXML = 'imagenes.xml';
// imagen por defecto a mostrarse cuando no se carga ninguna imagen del servidor
var imagenVacio = 'vacio.gif';
// Creación del ObjectoXMLHttpRequest
try {
   ObjectoXMLHttpRequest = new ActiveXObject("MSXML2.XMLHTTP");
} catch (exception1) {
   try {
      ObjectoXMLHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
   } catch (exception2) {
      ObjectoXMLHttpRequest = false;
   }
}
if (!ObjectoXMLHttpRequest && window.XMLHttpRequest) {
   ObjectoXMLHttpRequest = new XMLHttpRequest();
}
// función que muestra la imagen seleccionada de la las imágenes pequeñas 
function mostrarImagen(idDemo)
{// recibe el id que referencia a la imagen pequeña que contiene la imagen a mostrar
   if (depuracion) {
      alert('mostrarImagen()');
   }
   mostarCargador();
   if (idDemo != imagenVacio) {
      switch (idDemo) {
         case 1 :
            document.imagen.src = document.demo1.id;
            break;
         case 2 :
            document.imagen.src = document.demo2.id;
            break;
         case 3 :
            document.imagen.src = document.demo3.id;
            break;
         case 4 :
            document.imagen.src = document.demo4.id;
            break;
         case 5 :
            document.imagen.src = document.demo5.id;
            break;
         case 6 :
            document.imagen.src = document.demo6.id;
            break;
         case 7 :
            document.imagen.src = document.demo7.id;
            break;
         case 8 :
            document.imagen.src = document.demo8.id;
            break;
         case 9 :
            document.imagen.src = document.demo9.id;
            break;
         case 10 :
            document.imagen.src = document.demo10.id;
            break;
      }
   }
}
// función que carga las imágenes pequeñas
function cargarImagenPequeña(URLImagen, nombreImagen, contador)
{
   if (depuracion) {
      alert('cargarImagenPequeña(URLImagen,  nombreImagen, contador)');
   }
   switch (contador) {
      case 1 :
         document.demo1.src = URLImagen + nombreImagen;
         document.demo1.id = URLImagen + nombreImagen;
         break;
      case 2 :
         document.demo2.src = URLImagen + nombreImagen;
         document.demo2.id = URLImagen + nombreImagen;
         break;
      case 3 :
         document.demo3.src = URLImagen + nombreImagen;
         document.demo3.id = URLImagen + nombreImagen;
         break;
      case 4 :
         document.demo4.src = URLImagen + nombreImagen;
         document.demo4.id = URLImagen + nombreImagen;
         break;
      case 5 :
         document.demo5.src = URLImagen + nombreImagen;
         document.demo5.id = URLImagen + nombreImagen;
         break;
      case 6 :
         document.demo6.src = URLImagen + nombreImagen;
         document.demo6.id = URLImagen + nombreImagen;
         break;
      case 7 :
         document.demo7.src = URLImagen + nombreImagen;
         document.demo7.id = URLImagen + nombreImagen;
         break;
      case 8 :
         document.demo8.src = URLImagen + nombreImagen;
         document.demo8.id = URLImagen + nombreImagen;
         break;
      case 9 :
         document.demo9.src = URLImagen + nombreImagen;
         document.demo9.id = URLImagen + nombreImagen;
         break;
      case 10 :
         document.demo10.src = URLImagen + nombreImagen;
         document.demo10.id = URLImagen + nombreImagen;
         break;
   }
}
// función que carga las imágenes del documento XML
function cargarImagenesXML(comenzar)
{
   if (depuracion) {
      alert('cargarImagenesXML()');
   }
   if (ObjectoXMLHttpRequest) {
      // llamada del documento XML
      ObjectoXMLHttpRequest.open('GET',URLservidor + archivoXML,true);
   }
   ObjectoXMLHttpRequest.onreadystatechange = function()
   {
      if (ObjectoXMLHttpRequest.readyState == 4 && ObjectoXMLHttpRequest.status == 200) {
         var documentoXML = ObjectoXMLHttpRequest.responseXML;
         options = documentoXML.getElementsByTagName('imagen');
         contador = 1;
         vaciarImagenesPequeñas();
         calcularpaginas(options.length);
         // recorrido del documento XML
         for (i = comenzar; i < options.length; i++) {
            if (depuracion) {
               alert('URLImagen ' + URLImagen);
               alert('nombreImagen ',+nombreImagen);
            }
            URLImagen = options[i].attributes.getNamedItem('carpeta').nodeValue;
            nombreImagen = options[i].attributes.getNamedItem('nombre').nodeValue;
            cargarImagenPequeña(URLImagen,nombreImagen,contador);
            contador++;
         }
         if (contador < 10) {
            while (contador < 11)
            {
               cargarImagenPequeña('imagenes/',imagenVacio,contador);
               contador += 1;
            }
         }
      }
   };
   ObjectoXMLHttpRequest.send(null);
   return false;
}
// buscas 10 imagenes pequeñas previas si las hay
function imagenesPrevias()
{
   if (depuracion) {
      alert('imagenesPrevias()');
   }
   vaciarImagenesPequeñas();
   if (pagina > 0) {
      pagina -= 1;
      comenzar -= 10;
      cargarImagenesXML(comenzar);
   }
}
// buscas 10 imagenes pequeñas siguientes si las hay
function imagenesSiguientes()
{
   if (depuracion) {
      alert('imagenesSiguientes()');
   }
   vaciarImagenesPequeñas();
   if (pagina < totalPaginas) {
      pagina += 1;
      comenzar += 10;
      cargarImagenesXML(comenzar);
   }
}
// función para vaciar las imágenes pequeñas cuando se llama alguna de las funciones imagenesPrevias() o imagenesSiguientes()
function vaciarImagenesPequeñas()
{
   if (depuracion) {
      alert('vaciarImagenesPequeñas()');
   }
   document.demo1.src = 'imagenes/indicator_arrows.gif';
   document.demo2.src = 'imagenes/indicator_arrows.gif';
   document.demo3.src = 'imagenes/indicator_arrows.gif';
   document.demo4.src = 'imagenes/indicator_arrows.gif';
   document.demo5.src = 'imagenes/indicator_arrows.gif';
   document.demo6.src = 'imagenes/indicator_arrows.gif';
   document.demo7.src = 'imagenes/indicator_arrows.gif';
   document.demo8.src = 'imagenes/indicator_arrows.gif';
   document.demo9.src = 'imagenes/indicator_arrows.gif';
   document.demo10.src = 'imagenes/indicator_arrows.gif';
}
// función para calcular el número de páginas
function calcularpaginas(totalImagenes)
{
   totalPaginas = Number(totalImagenes / maxImagenesMostar) - 1;
}
// funcion que muestra las imagen del cargador
function mostarCargador()
{
   if (depuracion) {
      alert('mostarCargador()');
   }
   document.imagen.src = 'imagenes/indicator_arrows.gif';
}

Explicación del código. Funciones más importantes:


mostrarImagen(idDemo):


Función para mostrar la imagen que es seleccionada de la lista de las pequeñas imágenes de la parte inferior.

cargarImagenPequeña(URLImagen, nombreImagen, contador):


Esta función se encarga de mostrar cada imagen cargada del documento XML.

cargarImagenesXML(comenzar):


Esta función carga las imágenes del documento XML y las hace que se muestren el documento XML

El valor colocado por primera vez es el valor de cero para que al cargar por primera vez muestre la primera imagen del documento XML.

imagenesPrevias()


Esta función funciona como paginado de la lista de todas las imágenes que hay en el documento XML de las imágenes siguientes.

imagenesSiguientes():


Esta función funciona como paginado de la lista de todas las imágenes que hay en el documento XML de las imágenes siguientes.

calcularpaginas(totalImagenes)


Esta función calcula del número de imágenes que se encuentran en el documento XML y nos calcula la paginación de las misma, en este ejemplo estoy calculando las imágenes de 10 en 10.

Aquí pueden ver el ejemplo de este tutorial ^^

Ejemplo para descargar

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate