Previsualización de galería de fotos

Bueno, hace poco entro alguien al canal de javascript preguntando como hacer una pagina de previsualización de álbumes de fotos. Es decir, que en una pagina se viese "album1" y una imagen que fuese cambiando con todas las imágenes del album1, "album2" y una imágen que ...

Toda la información sobre las imagenes esta en una base de datos que, para lo que nos interesa en este caso, contiene:

id: entero, clave principal autoincrementado
album: cadena, nombre del álbum al que pertenece
imagen: cadena, ruta de la imagen dentro del álbum

Así por ejemplo si tenemos 1,album1,foto1.png deberemos acudir a rutadelosalbumes/album1/foto1.png para mostrar la imagen.

Lo primero sin duda es hacer la consulta a la bbdd con php para obtener la lista de álbumes y fotos, esto no lo pondre pues cada uno que lo haga como quiera, es bastante sencillo. Esta información debemos pasarla a JavaScript, para lo que deberíamos usar JSON, pero como no me apetecia me hice una función que hace las veces de JSON (y su equivalente en js).

 function albumes2jsarray(){
  $array="";
  $lastAlbum="";
  $albumes=mysql_query("select album,imagen from albumes order by album,imagen");
  while($album=mysql_fetch_assoc($albumes)){
   if($album['album']!=$lastAlbum){
    if($lastAlbum==""){
     $array.=$album['album']."{";
    }
    else{
     $array.="}".$album['album']."{";
    }
    $lastAlbum=$album['album'];
   }
   $array.=$album['imagen'].";";
  }
  $array.="}";
  return $array;
 }

Esta función devuelve una cadena del tipo:

album1{foto1.png;foto2.png;foto3.png;}album2{foto1.png;foto2.png}

Ahora viene lo interesante, javascript :)

Primero comenzamos con la función que nos generará un array asociativo bidimensional en el que tendremos almacenados en un primer nivel (y de forma asociativa) los nombres de los álbumes de fotos y en un segundo nivel (no asociativo) las imágenes.

 function phpArray2jsArray(){
  var lastAlbum="";
  var paso1=phpArray.split('}');
  var pos=0;
  for(var i=0;i<paso1.length-1;i++){
   var paso2=paso1[i].split('{');
   if(lastAlbum!=paso2[0]){
    jsArray[paso2[0]]=new Array();
    inicio[paso2[0]]=0;
   }
   jsArray[paso2[0]]=paso2[1].split(';');
   pos+=1;
  }
  for(i in jsArray){
   jsArray[i]=jsArray[i].splice(0,jsArray[i].length-1);
  }
 }

Bueno, se podría haber hecho mejor, que recibiese los tres arrays por parametros etc, pero es lo que tiene las prisas ;)

Ya estamos acabando, ahora solo queda una función que vaya rotando las imágenes. Pondre el resto del script tal y como quedaría, pero sin la función anterior.

 <?php
  include('bbdd');
  echo "var phpArray='".$bbdd->albumes2jsarray()."';\n";
 ?>
 var jsArray=new Array();
 var inicio=new Array();
 var rutaAlbumes="galeria";
 var tiempoExposicion="2000";

 function rotaImagenes(){
  for(album in jsArray){
   var imgAct=document.getElementById(album);
   imgAct.src=rutaAlbumes+"/"+album+"/"+jsArray[album][inicio[album]];
   inicio[album]=inicio[album]+1==jsArray[album].length?0:inicio[album]+1;
  }
  setTimeout("rotaImagenes()",tiempoExposicion);
 }

 window.onload=function(){
  phpArray2jsArray();
  rotaImagenes();
 }

Otro punto importantes es que debemos tener a la fuerza en nuestra página una imagen para cada álbum cuyo identificador sea el mismo álbum, tipo <img id="album1" .. /> el resto da igual, donde esté, cuanto mida, etc.

Y ahi quedó, probablemente se pueda mejorar pero lo basico está hecho.

Editado:
Podeis ver la página que hice para crearlo aquí
Y dónde lo aplicó el que me preguntó aquí. Por cierto, tiene muy buenas fotografías.