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.

<?xml version="1.0" encoding="iso-8859-1"?> <imagenes> <imagen carpeta="imagenes/" nombre="imagen1.jpg" demo="imagen1_thumb.jpg" /> <imagen carpeta="imagenes/" nombre="imagen2.jpg" demo="imagen2_thumb.jpg" /> <imagen carpeta="imagenes/" nombre="imagen3.jpg" demo="imagen3_thumb.jpg" /> <imagen carpeta="imagenes/" nombre="imagen4.jpg" demo="imagen4_thumb.jpg" /> <imagen carpeta="imagenes/" nombre="imagen5.jpg" demo="imagen5_thumb.jpg" /> <imagen carpeta="imagenes/" nombre="imagen6.jpg" demo="imagen6_thumb.jpg" /> <imagen carpeta="imagenes/" nombre="imagen7.jpg" demo="imagen7_thumb.jpg" /> <imagen carpeta="imagenes/" nombre="imagen8.jpg" demo="imagen8_thumb.jpg" /> <imagen carpeta="imagenes/" nombre="imagen9.jpg" demo="imagen9_thumb.jpg" /> <imagen carpeta="imagenes/" nombre="imagen10.jpg" demo="imagen10_thumb.jpg" /> <imagen carpeta="imagenes/" nombre="imagen11.jpg" demo="imagen11_thumb.jpg" /> </imagenes>

// 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, nombreImagenDemo, contador){ if(depuracion){ alert('cargarImagenPequeña(URLImagen, nombreImagen, contador)'); } switch (contador){ case 1: document.demo1.src = URLImagen + nombreImagenDemo; document.demo1.id = URLImagen + nombreImagen; break; case 2: document.demo2.src = URLImagen + nombreImagenDemo; document.demo2.id = URLImagen + nombreImagen; break; case 3: document.demo3.src = URLImagen + nombreImagenDemo; document.demo3.id = URLImagen + nombreImagen; break; case 4: document.demo4.src = URLImagen + nombreImagenDemo; document.demo4.id = URLImagen + nombreImagen; break; case 5: document.demo5.src = URLImagen + nombreImagenDemo; document.demo5.id = URLImagen + nombreImagen; break; case 6: document.demo6.src = URLImagen + nombreImagenDemo; document.demo6.id = URLImagen + nombreImagen; break; case 7: document.demo7.src = URLImagen + nombreImagenDemo; document.demo7.id = URLImagen + nombreImagen; break; case 8: document.demo8.src = URLImagen + nombreImagenDemo; document.demo8.id = URLImagen + nombreImagen; break; case 9: document.demo9.src = URLImagen + nombreImagenDemo; document.demo9.id = URLImagen + nombreImagen; break; case 10: document.demo10.src = URLImagen + nombreImagenDemo; 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; nombreImagenDemo = options[i].attributes.getNamedItem('demo').nodeValue; cargarImagenPequeña(URLImagen, nombreImagen, nombreImagenDemo, contador); contador++; } if(contador < 10){ while(contador < 11){ cargarImagenPequeña('imagenes/', imagenVacio, 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'; }

Por Chema el 03 de Julio de 2007

El ejemplo no funciona, no?
Por Juan Pablo el 03 de Julio de 2007

me parece que el ejemplo tiene algun error...
Por Freddie el 03 de Julio de 2007

Algunos minutos de hacking después, el ejemplo ya funciona. Pruebenlo de nuevo
Por Lunatic el 03 de Julio de 2007

Pues es una muy buena idea... thumbs up
Sinembargo, me parece que se pueden reducir bastantes lineas usando jQuery...

Felicitaciones
Por Sisco el 03 de Julio de 2007

Oye pues, está muy bien. Gracias por compartir tu código.
Por RiDaPe el 03 de Julio de 2007

¿Se puede hacer que tenga vistas previa o thumbails (algo asi)?

soy pobre y tengo conexion lenta jaja tardo un poco en abrir el elemplo para ver

el ejemplo para descargar no me funciono =(
Por Polaco el 03 de Julio de 2007

excelente loco!!!

Por psycho-vnz el 03 de Julio de 2007

RiDaPe_blog :

¿Se puede hacer que tenga vistas previa o thumbails (algo asi)?

soy pobre y tengo conexion lenta jaja tardo un poco en abrir el elemplo para ver

el ejemplo para descargar no me funciono =(

Si, en el documento XML puedes agregar un atributo en mi ejemplo lo llamo demo:

Y el código javascript lo modificamos en las siguientes secciones:

cargarImagenesXML

nombreImagenDemo

nombreImagenDemo = options[i].attributes.getNamedItem('demo').nodeValue;

cargarImagenPequeña

function cargarImagenPequeña(URLImagen,  nombreImagen, nombreImagenDemo, contador)

cargarImagenPequeña('imagenes/', imagenVacio, imagenVacio, contador);

document.demoXX.src = URLImagen + nombreImagen;

document.demoXX.src = URLImagen + nombreImagenDemo;

De todas formas te coloco el javascript nuevamente con las modificaciones, si necesitan que actualice el ejemplo que esta en Internet solo avisen

Por RiDaPe el 04 de Julio de 2007

¡¡Gracias!!!

mande un mensaje creo que fallo, alcaro por si hay dos mios

ya mismo voy a probar eso, ahora los que tienen conexion lenta van a poder verlo bien jeej, esa galeria me va a salvar las papas varias veces...

saludos!!!!
Por enjoydasilence el 08 de Agosto de 2007

Un usuario de Fedora xd
Por Vene el 02 de Noviembre de 2007

.. sabes q no me anda el ejemplo.. probe tal cual viene.. despues cambie las url. para ver si era tema de carpeta.. igual no me anda. puedes actualizar..el ejemplo te qdo muy agradecido
Por psycho-vnz el 02 de Noviembre de 2007

Vene_blog :
.. sabes q no me anda el ejemplo.. probe tal cual viene.. despues cambie las url. para ver si era tema de carpeta.. igual no me anda. puedes actualizar..el ejemplo te qdo muy agradecido

Si, el ejemplo tiene unos problemas que ya fueron solucionados.
Ya fue enviado uno nuevo archivo con el código depurado a un BOFH para que reemplace el ejemplo que esta por el nuevo que le envié.
Esperemos que en lo que se desocupe suba el nuevo archivo
Saludos.
Por vene el 02 de Noviembre de 2007

pa.. gracias por la respuesta.. fue rapidisima. por casualidad no lo tenes a mano.. me lo podrias enviar al mail. te explico. yo hice paginadores..v arios. en php. y no qdaron tan lindos como este q tienes .. y ya me qde sin tiempo para entregar el proyecto solo me falta esa galeria .. si puedes mi mail es [email protected] te qdo muy agradecido amigo ..
Por vene el 02 de Noviembre de 2007

Ta logre terminarlo.. qdo funcando al pelo.. les dejo el link al final del dia para q lo descarguen. saludos. y muchas gracias psycho . ayuda invalorable..
Por Ozkar el 25 de Febrero de 2008

Ante todo gracias por apoyar el desarrollo web y compartir tus conocimientos, te agradeceria si es que pudieras subir el nuevo archivo o un link del ejemplo funcionando correctamente descargue el archivo y no me funciono, o si puedes dinos como corregir la falla
Por Ozkar el 25 de Febrero de 2008

jaja encontre la solucion, pero les va a dar risa, cargue el ejemplo en ieplorer abri la carpeta de archivos temporales busque los archivos .js y los reemplaze, y funciono solucionado en 2 minutos, spero haber acabado con el dolor de cabeza. Avisenme si les sirvio mi ayuda. Reitero a psycho-vnz las gracias por compartir su codigo. PD tmb soy fan de Saint Seiya
Por LaNcOr el 19 de Marzo de 2008

Hola a todos ya probé el código pero pues no funciona tanto el archivo de descarga como el ir copiando y pegando. Si alguien ya le funcionó se los agradecería que me lo enviaran a [email protected]

De antemano mil gracias
Por psycho-vnz el 19 de Marzo de 2008
LaNcOr_blog :
Hola a todos ya probé el código pero pues no funciona tanto el archivo de descarga como el ir copiando y pegando. Si alguien ya le funcionó se los agradecería que me lo enviaran a [email protected]

De antemano mil gracias

Hola LaNcOr_blog, aqui puedes descargar el fuente del tip, en el archivo .js a la variable "URLservidor" le debes asignar la ruta en donde se encuentran los archivos de la galería, ejemplo:
Código :
```
URLservidor = "http://dominio.com/raiz/"
```
Por L el 19 de Marzo de 2008

Muchas Gracias ya funcionó, aunque es raro porque ayer también le cambié la ruta pero con el nuevo .zip que descargué jaló de maravilla... Gracias de Nuevo.
Por Chandeques el 04 de Diciembre de 2008

Gracias por compartir los fuentes ya que son de gran utilidad.. y Felicidades...Esta chido!
Por Javier el 30 de Diciembre de 2008

me gusto mucho el ejemplo
quiero hacer algo paresido, pero soy nuevo con ajax, tendras por favor el codigo para que se muestren todas las fotos que tengo en una carpeta, (ejemplo: c:/usuarios/javier/imagenes/) y dentro de esa carpeta imagenes hay muchas imagenes .jpg y de otros formatos, pero que se muestre en la etiqueta img una por una, cada 2 o 3 segundos, osea que vallan cambiando solas
Por phaubamn el 27 de Abril de 2010

como le puedo aqregar un buscador por nombre de imagen, gracias esta muy bueno el material
Por Erika el 07 de Julio de 2010

Muchisimas gracias por compartir tus conocimientos con nosotros.
Por Ajax el 17 de Octubre de 2011

MySQL