/** * Galería de imágenes en ECMAScript - DOM 1 compliant * * Galería de imagenes que toma del exterior ciertos elementos y los usa como controladores * y contenedores de imágenes * * @project Galeria * @package galeriaMain * @author Carlos de León Fragoso * @company SolucionesNet * @date 27.12.04 * @since 27.12.04 * @version 0.1.0 * @w3c HTML 4.01 Transitional - DOM 1- ECMA 262 * @see flatComboBox * * @TODO - ¿Pasarlo a objetos? * - Comvertir a constantes los ids y las rutas a las imagenes. * * @const string GALERIA_DIRECTORIO_BASE Directorio base de las galerías * @const string GALERIA_NO_IMAGE Imagen en blanco que representa que no se han hallado más imágenes * @const string GALERIA_TXT_NO_IMAGE Texto de la imagen en blanco * @const string GALERIA_TXT_CLICK_IMAGE Texto de aquellas imágenes que sí tienen contenido * @const string GALERIA_TXT_PREV_PAGE Texto que anuncia una página siguiente * @const string GALERIA_TXT_NEXT_PAGE Texto que anuncia una página anterior * @const string GALERIA_TXT_NO_MORE_PAGES Texto que anuncia que no hay más páginas * @const string GALERIA_NULL_LINK = '#'; Enlace a nada * @const int GALERIA_POPUP_TOP = 0; Posición superior del popup * @const int GALERIA_POPUP_LEFT = 0; Posición izquierda del popup * @const int GALERIA_POPUP_WIDTH = 550; Anchura del popup * @const int GALERIA_POPUP_HEIGHT = 550; Altura del popup * @const string GALERIA_POPUP_URL = 'popupgaleria.html'; Url del popup * @global int galeriaActual Índice en el array de galerías de la galería que se muestra actualmente * @global int galeriaImagenActual Número de la imagen que ocupa el primer lugar en la página mostrada actualmente * @global int imagenLanzada Número de la imagen que ha sido lanzada para verla en detalle en el popup * @global array galerias Array de galerias cada galeria es un array de (nombre de la galeria, número de imagenes, numero de digitos que se usan para nombrar las imagenes, directorio de la galeria) * * tab:2 */ GALERIA_DIRECTORIO_BASE = 'img/galeria/'; GALERIA_NO_IMAGE = 'img/gal_noimage.jpg'; GALERIA_TXT_NO_IMAGE = 'No se hallaron más fotos'; GALERIA_TXT_CLICK_IMAGE = 'Click para agrandar'; GALERIA_TXT_PREV_PAGE = 'Página anterior'; GALERIA_TXT_NEXT_PAGE = 'Página siguiente'; GALERIA_TXT_NO_MORE_PAGES = 'No hay más páginas'; GALERIA_NULL_LINK = '#'; GALERIA_POPUP_TOP = 0; GALERIA_POPUP_LEFT = 0; GALERIA_POPUP_WIDTH = 550; GALERIA_POPUP_HEIGHT = 550; GALERIA_POPUP_URL = 'popupgaleria.html'; // Para añadir galerías recurrir a la función Lanza(); var galeriaActual = 0; // Cambiar este valor para elegir inicialmente una galería distinta (poner el numero de la galería deseada empezando en cero y por orden de adición de galería) var galeriaImagenActual = 1; // Imagen en la que se empieza a mostrar en la actualidad en la posicion 0. var imagenLanzada = 0; // Número de la imagen que ha sido lanzada para verla en detalle en el popup var galerias = new Array(); // addGaleria(nombre, numeroImagenes, numeroDigitos, directorio) var popUpWin=0; // variable tonta para almacenar el mango de los popups /** * Función que se lanza al cargarse la página * * En esta función se han de añadir las galerías mediante la función addGaleria. * También se encarga de crear el combo plano de selección de galerías. * */ function lanza() { // procedimiento que lanza la plantilla en el onload del documento addGaleria("Nuestras instalaciones", 7, 2, "instalaciones/"); addGaleria("Trabajos", 55, 2, "trabajos/"); var combogaleria = new flatComboBox( 'combogaleria', // id de la imagen de posicionamiento 'comboBoxCapa', // clase del contenedor 'comboBoxPrincipal', // clase de la parte principal del combo 'comboBoxOpciones', // clase de las opciones no seleccionadas 'comboBoxOpcionesActivo', // clase de las opciones cuando tienen en raton encima 'comboBoxOpcionesActual', // clase de la opción que está seleccionada en el momento del despliegue 'comboBoxScrolls' // clase de las lineas de scroll ); for (var i=0; i < galerias.length; i++) { combogaleria.addOption(galerias[i][0],i); } combogaleria.onchange = galeriaChange; combogaleria.setSelectedIndex(0,true); } /** * Añade una galería nueva * * @param string nombre Nombre de la galería (título) * @param int numeroImagenes Número de imágenes (y thumbs) que hay en la galería * @param int numeroDigitos Número de digitos que se usarán para formar los nombres de las imágenes y los thumbs. * @param string directorio Directorio dentro del directorio base donde se encuentran las imágenes * */ function addGaleria(nombre, numeroImagenes, numeroDigitos, directorio) { galerias.push(new Array(nombre, numeroImagenes, numeroDigitos, directorio)); } // addGaleria() /** * Función que construye y devuelve una ruta al thumb de una imagen * * La ruta al thumb se compone del directorio base + el directorio de la galería + la carpeta thumb + * el número de la imagen (con el número de dígitos que este establecido para la galería) * (1 --> 001 si el numero de dígitos establecido es 3) + la extensión jpg. * * @param int galeria Índice de la galería * @param int foto Número de la foto * * @return string ruta al thumb */ function rutaThumb(galeria, foto) { var temp = foto + ''; while (temp.length < galerias[galeria][2]) temp = '0' + temp; temp = GALERIA_DIRECTORIO_BASE + galerias[galeria][3] + 'thumbs/' + temp + '.jpg'; return temp; } // rutaThumb() /** * Función que asigna una imagen y enlace a un thumb * * Esta función asigna una imagen vacía y un enlace a nada a un thumb, si la imagen está fuera * de rango y el thumb de la imagen y un enlace a apliar la imagen si no lo está * * @param int posicion Posición donde se debe asignar el thumb * @param int galeria Índice de la galería * @param int foto Número de la foto */ function asginaThumb(posicion, galeria, foto) { if (foto > galerias[galeria][1]) { document.getElementById('gal' + posicion).src = GALERIA_NO_IMAGE; document.getElementById('gal' + posicion).title = GALERIA_TXT_NO_IMAGE; document.getElementById('gal' + posicion + 'Link').href = GALERIA_NULL_LINK; } else { document.getElementById('gal' + posicion).src = rutaThumb(galeria, foto); document.getElementById('gal' + posicion).title = GALERIA_TXT_CLICK_IMAGE; document.getElementById('gal' + posicion + 'Link').href = 'javascript:agrandarFoto(' + foto + ');'; } } // asginaThumb() /** * Muestra las fotos de un paginado de una galeria * * Para la galeria actual y la imagen actual (rec: imagenActual = primera imagen a mostrar en el paginado) * muestra las fotos de una página y activa o desactiva los botones de siguiente y anterior paginado de la * galería */ function muestraFotos(){ for (var i = 0; i < 8; i ++) asginaThumb(i, galeriaActual, galeriaImagenActual + i) ; if (galeriaImagenActual > 1) { document.getElementById('galeriaImgAtras').src = GALERIA_DIRECTORIO_BASE + 'flecha_activada.gif'; document.getElementById('galeriaAtrasLink').href ='javascript:galeriaAnteriorPagina();'; document.getElementById('galeriaImgAtras').title = GALERIA_TXT_PREV_PAGE; } else { document.getElementById('galeriaImgAtras').src = GALERIA_DIRECTORIO_BASE + 'flecha_desactivada.gif'; document.getElementById('galeriaImgAtras').title = GALERIA_TXT_NO_MORE_PAGES; document.getElementById('galeriaAtrasLink').href = GALERIA_NULL_LINK; } if (galeriaImagenActual + 8 <= galerias[galeriaActual][1]) { document.getElementById('galeriaImgAlante').src = GALERIA_DIRECTORIO_BASE + 'flecha_activada_derecha.gif'; document.getElementById('galeriaImgAlante').title = GALERIA_TXT_NEXT_PAGE; document.getElementById('galeriaAlanteLink').href ='javascript:galeriaSiguientePagina();'; } else { document.getElementById('galeriaImgAlante').src = GALERIA_DIRECTORIO_BASE + 'flecha_desactivada_derecha.gif'; document.getElementById('galeriaImgAlante').title = GALERIA_TXT_NO_MORE_PAGES; document.getElementById('galeriaAlanteLink').href = GALERIA_NULL_LINK; } } // function muestraFotos() /** * Función que provoca los cambios de galería actual * * Esta función está asignada al evento onchange del flatComboBox y proboca cambios * de galería actual, colocando la paginación en la nueva galería actual y la primera foto * * @param int oldindex Antiguo índice seleccionado * @param int galeria Nuevo índice de galería seleccionado * @param string foto Titulo de la nueva galería * @param int nuewValue Valor de la nueva galería */ function galeriaChange(oldIndex, newIndex, newName, newValue) { galeriaActual = newIndex; galeriaImagenActual = 1; muestraFotos(); } // function galeriaChange() /** * Coloca la galería en su siguiente paginación */ function galeriaSiguientePagina() { if (galeriaImagenActual + 8 <= galerias[galeriaActual][1]) { galeriaImagenActual += 8; muestraFotos(); } } // function galeriaSiguientePagina() /** * Coloca la galería en su anterior paginación */ function galeriaAnteriorPagina() { if (galeriaImagenActual - 8 >= 1) galeriaImagenActual -= 8; else galeriaImagenActual = 1; muestraFotos(); } // function galeriaAnteriorPagina() /** * Lanza el popup de ampliación de la foto * * @param int foto Numero de la foto a mostrar */ function agrandarFoto(foto) { imagenLanzada = foto; popUpWindow( GALERIA_POPUP_URL, GALERIA_POPUP_LEFT, GALERIA_POPUP_TOP, GALERIA_POPUP_WIDTH, GALERIA_POPUP_HEIGHT); } // function agrandarFoto() /** * Función auxiliar que lanza un popup del tamaño y posición especificados y sobre la url dada. * * @param string URLStr Url destino * @param int left Posición izquierda del popup * @param int top Posición superior del popup * @param int width Ancho del popup * @param int height Alto del popup */ function popUpWindow(URLStr, left, top, width, height) { popUpWin = open(URLStr, '', 'toolbar=no,location=no,directories=no,status=no,menub ar=no,scrollbar=no,resizable=no,copyhistory=yes,width='+width+',height='+height+',left='+left+', top='+top+',screenX='+left+',screenY='+top+''); } // function popUpWindow()