// ============================================= // PhotoAlbum 2.0 - © 2003 Israel Gómez de Celis // http://sparksoft.igece.net // ============================================= // -- Novedades con respecto a la versión 1.0 --------------------------------------- // // Al seleccionar una fotografía esta aparece en la misma ventana, // junto a una barra de navegación (en la parte superior) y el texto // descriptivo de la fotografía (en la parte inferior). Mediante la // barra de navegación podemos desplazarnos entre las distintas // fotografías de la galería o volver al índice de la misma. // // Para definir el aspecto tanto de la barra de títulos como de los // textos descriptivos se utiliza una hoja de estilos que previamente // habrá que enlazar con la página desde la cual creemos el álbum. // // ---------------------------------------------------------------------------------- // -- Instalación ------------------------------------------------------------------- // // Colocar dentro de la sección una referencia tanto a este código // como al de la hoja de estilos. Suponiendo que ambos archivos se encuentren en el // mismo directorio las líneas a introducir serían: // // // // // ---------------------------------------------------------------------------------- // -- Utilización ------------------------------------------------------------------- // // 1. Las fotos que queremos que constituyan un álbum deben agruparse en un mismo // directorio, el nombre de dicho directorio sera el identificador del álbum. // Además, para cada fotografía deberá generarse una versión en miniatura. El // tamaño de estas miniaturas es libre, el mismo para todas, y deberá especificarse // más abajo, en el apartado de definición de variables. Por último, las fotografías // deberán renombrarse de acuerdo al siguiente esquema: // // Fotografías: [nombre del album]_[número de orden con dos cifras].[extensión] // ej. album_01.jpg, album_02.jpg, etc. // // Miniaturas: [nombre del album]_[número de orden con dos cifras]_t.[extensión] // ej. album_01_t.jpg, album_02_t.jpg, etc. // // 2. Cambiar si se desea los parámetros iniciales del álbum (ver más abajo). // // 3. En la página, llamar a la función principal de este código allá donde se quiera // que aparezca el álbum: // // // // En este ejemplo, queremos que el título del álbum sea 'Mis fotos', y las fotos // 1 y 3 tendrán el comentario indicado bajo ellas. El álbum se encuentra en la // dirección http://mi.web.com/fotos, dentro del directorio album, y contiene // 5 fotografías. // // ---------------------------------------------------------------------------------- // Definición de variables // Pueden modificarse sus valores para ajustarse al diseño de la página var albumAlignment = "center"; // Alineación del álbum var albumCellSpacing = 0; // Espacio entre fotos var albumCellPadding = 4; // var albumWidth = "95%"; // Ancho del álbum var parentPage = "impresiones.asp" // Página padre del álbum var photoBorder = 0; // Ancho del borde de las fotos var photosInRow = 3; // Número de fotos por fila var thumbnailWidth = 157; // Ancho de las miniaturas var thumbnailHeight = 105; // Alto de las miniaturas // No modificar var photoComments = new Array(); // Matriz que contiene el título y los comentarios de las fotos var photoURLs = new Array(); // Matriz que contiene las URLs de las fotografías var thumbURLs = new Array(); // Ídem con las de las miniaturas var currentPhoto = 1; photoComments[0] = "Sin título"; // Título predeterminado del álbum // -- showIndex () ------------------------------------------------- // // Usada por la función principal. // Muestra un índice con las miniaturas de la fotografías del álbum. // ----------------------------------------------------------------- function showParent() { location.href = parentPage; } // -- showIndex () ------------------------------------------------- // // Usada por la función principal. // Muestra un índice con las miniaturas de la fotografías del álbum. // ----------------------------------------------------------------- function showIndex() { location.reload(); } // -- showPrev () -------------------------------------------------- // // Usada por la función principal. // Muestra la fotografía anterior a la actual. // ----------------------------------------------------------------- function showPrev() { currentPhoto--; if (currentPhoto > 1) document.getElementById("btnPrev").style.visibility = "visible"; else document.getElementById("btnPrev").style.visibility = "hidden"; if (currentPhoto < (photoURLs.length - 1)) document.getElementById("btnNext").style.visibility = "visible"; else document.getElementById("btnNext").style.visibility = "hidden"; document.getElementById("header").innerHTML = photoComments[0] + " (imagen " + currentPhoto + " de " + (photoURLs.length - 1) + ")"; document.getElementById("index").style.display = "none"; document.getElementById("visor").style.display = ""; document.getElementById("canvas").src = "blank.gif"; document.getElementById("canvas").src = photoURLs[currentPhoto]; if (photoComments[currentPhoto] != null) document.getElementById("desc").innerHTML = photoComments[currentPhoto]; } // -- showNext () -------------------------------------------------- // // Usada por la función principal. // Muestra la fotografía siguiente a la actual. // ----------------------------------------------------------------- function showNext() { currentPhoto++; if (currentPhoto > 1) document.getElementById("btnPrev").style.visibility = "visible"; else document.getElementById("btnPrev").style.visibility = "hidden"; if (currentPhoto < (photoURLs.length - 1)) document.getElementById("btnNext").style.visibility = "visible"; else document.getElementById("btnNext").style.visibility = "hidden"; document.getElementById("header").innerHTML = photoComments[0] + " (imagen " + currentPhoto + " de " + (photoURLs.length - 1) + ")"; document.getElementById("index").style.display = "none"; document.getElementById("visor").style.display = ""; document.getElementById("canvas").src = "blank.gif"; document.getElementById("canvas").src = photoURLs[currentPhoto]; if (photoComments[currentPhoto] != null) document.getElementById("desc").innerHTML = photoComments[currentPhoto]; } // -- showPhoto (i) ------------------------------------------------ // // Usada por la función principal. Oculta el índice de fotografías // y muestra una fotografía determinada. // // i Índice de la fotografía a mostrar // ----------------------------------------------------------------- function showPhoto(i) { currentPhoto = i; document.getElementById("btnIndex").style.visibility = "visible"; if (currentPhoto > 1) document.getElementById("btnPrev").style.visibility = "visible"; else document.getElementById("btnPrev").style.visibility = "hidden"; if (currentPhoto < (photoURLs.length - 1)) document.getElementById("btnNext").style.visibility = "visible"; else document.getElementById("btnNext").style.visibility = "hidden"; document.getElementById("imgBtnNext").src = "next.gif"; document.getElementById("imgBtnNext").alt = "Imagen siguiente"; document.getElementById("linkBtnNext").href = "javascript:showNext()"; document.getElementById("header").innerHTML = photoComments[0] + " (imagen " + i + " de " + (photoURLs.length - 1) + ")"; document.getElementById("index").style.display = "none"; document.getElementById("visor").style.display = ""; document.getElementById("canvas").src = "blank.gif"; document.getElementById("canvas").src = photoURLs[i]; if (photoComments[i] != null) document.getElementById("desc").innerHTML = photoComments[i]; } // -- createAlbum (url, id, photos) -------------------------------- // // Esta es la única función que deberemos llamar para crear el álbum. // Si se quiere cambiar el título del mismo o añadir comentarios a // las fotografías debe hacerse antes de llamar a esta función. // Los parámetros que recibe son los siguientes: // // url Dirección de internet donde se encuentran los álbumes // (cada álbum es un directorio que cuelga de dicha dirección) // // id Identificador del álbum deseado // (nombre del directorio) // // photos Número de fotos del álbum // ----------------------------------------------------------------- function createAlbum(url, id, photos) { document.write(""); document.write("
"); document.write(""); document.write(""); document.write(""); document.write(""); document.write("Página principal"); document.write("


"); document.write(""); document.write(""); document.write(""); for (i = 1; i <= photos; i++) { if (i < 10) { thumbURLs[i] = url + "/" + id + "/" + id + "_0" + i + "_t.jpg"; photoURLs[i] = url + "/" + id + "/" + id + "_0" + i + ".jpg"; } else { thumbURLs[i] = url + "/" + id + "/" + id + "_" + i + "_t.jpg"; photoURLs[i] = url + "/" + id + "/" + id + "_" + i + ".jpg"; } document.write(""); if (i % photosInRow == 0) { document.write(""); } else { document.write(""); } } document.write(""); document.write("
"); document.write(""); document.write("
"); if (photoComments[i] != null) { document.write("
" + photoComments[i] + "
"); } else { document.write("
 
"); } document.write("
"); document.write(""); document.write(""); }