/*********************************************** * Copyright (c) 2010 Valeriano Alfonso * ***********************************************/ /* NOTA DE DOMINIO PUBLICO ----------------------- ImgView es Dominio Publico. Esto significa que se puede hacer con el lo que se quiera sin haber ninguna garantia de reembolso o idoneidad. Se aprecia que la fuente sea citada. */ /* Historial de cambios -------------------- 1.0 2010-1-3 : * Version inicial. 1.1 2010-1-5 : * Corregida necesidad de cargar el script en la seccion head. * Funcionalidad basica de album implementada. 1.2 2010-5-18 : * Asimilado de todos los enlaces a imagenes en un album general. * Iconos de anterior y siguiente de los albums, nuevos. */ ///////////////////////// // Configuracion // var imgview_prefix = ""; // Se atoconfigura var imgview_border = 10; // Tambien ajustar en el CSS. var imgview_control_alto = 32; // Tambien ajustar en el CSS. /////////////////////// // Globales // var imgview_nombre_album=""; var imgview_href_anterior=""; var imgview_href_siguiente=""; var imgview_preloader=false; ///////////////////////////////////// // ImgView_ShowImage // function ImgView_ShowImage(href,is_album){ var elemFondo = document.getElementById('imgview_fondo'); var elemImgview = document.getElementById('imgview'); var elemImgviewControl = document.getElementById('imgview_control'); var elemImgCargando = document.getElementById('imgview_imgcargando'); var elemEnlace = document.getElementById('imgview_enlace'); var elemImg = document.getElementById('imgview_img'); var elemAnt = document.getElementById('imgview_anterior'); var elemSig = document.getElementById('imgview_siguiente'); var preloader; var max_horiz, max_vert; var ventana_ancho, ventana_alto; var pagina_ancho, pagina_alto; var pos_horiz = 0, pos_vert = 0; if(is_album){ var enlaces; var imgview_RegExp; var nombre_temp; var i,j; // Buscar imagenes anterior y siguientes enlaces = document.getElementsByTagName("a"); for(i=0;i0){ j=i-1; while(j>=0){ if(enlaces[j].getAttribute("imgview_albumid")== imgview_nombre_album) { imgview_href_anterior=enlaces[j].getAttribute("href"); break; } j--; } } // Buscar Siguiente imgview_href_siguiente=""; if(i<(enlaces.length-1)){ j=i+1; while(j document.body.offsetHeight){ // all but Explorer Mac max_horiz = document.body.scrollWidth; max_vert = document.body.scrollHeight; }else{ // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari max_horiz = document.body.offsetWidth; max_vert = document.body.offsetHeight; } // Obtener tamanho de la ventana if(window.innerHeight) { // Todos excepto Explorer ventana_ancho = window.innerWidth; ventana_alto = window.innerHeight; }else if(document.documentElement && document.documentElement.clientHeight){ // Explorer 6 Strict ventana_ancho = document.documentElement.clientWidth; ventana_alto = document.documentElement.clientHeight; }else if(document.body){ // Resto de Explorers ventana_ancho = document.body.clientWidth; ventana_alto = document.body.clientHeight; } // HACK: reducir el tamaho de ventana_ancho. Hace que no sobrepase los bordes ventana_ancho-=20; // Obtener el tamanho de la pagina if(max_vert < ventana_alto){ pagina_alto = ventana_alto; }else{ pagina_alto = max_vert; } if(max_horiz < ventana_ancho){ pagina_ancho = ventana_ancho; }else{ pagina_ancho = max_horiz; } // Obtener posicion del los scrolls if( typeof( window.pageYOffset ) == 'number' ) { // La mayoria de navegadores pos_vert = window.pageYOffset; pos_horiz = window.pageXOffset; } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) { // Explorer pos_vert = document.body.scrollTop; pos_horiz = document.body.scrollLeft; } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) { // Explorer 6 Strict pos_vert = document.documentElement.scrollTop; pos_horiz = document.documentElement.scrollLeft; } // Centrar y hacer visible la imagen de cargando if(elemImgCargando){ elemImgCargando.style.top = (pos_vert + ((ventana_alto - elemImgCargando.height) / 2)) + 'px'; elemImgCargando.style.left = (pos_horiz + ((ventana_ancho - elemImgCargando.width) / 2)) + 'px'; elemImgCargando.style.display = 'block'; } // Hacer que el fondo ocupe la pagina y sea visible elemFondo.style.height = (pagina_alto + 'px'); elemFondo.style.display = 'block'; // Carga de la imagen imgview_preloader=new Image(); imgview_preloader.onload=function(){ // Mostrar imgview, necesario para que los tamanhos sean correctos elemImgview.style.display = 'block'; // Mostrar/Ocultar control de albums if(is_album){ elemImgviewControl.style.display = 'block'; ventana_alto-=imgview_control_alto; if(imgview_href_anterior.length==0){ elemAnt.style.display = 'none'; }else{ elemAnt.style.display = 'block'; } if(imgview_href_siguiente.length==0){ elemSig.style.display = 'none'; }else{ elemSig.style.display = 'block'; } }else{ elemImgviewControl.style.display = 'none'; } // Establecer la imagen precargada elemImg.src = href; elemImg.width = imgview_preloader.width; elemImg.height = imgview_preloader.height; // Ajustar el tamanho de la imagen var relacion=elemImg.width/elemImg.height; if((elemImg.height+imgview_border*2)>ventana_alto){ elemImg.height=ventana_alto-imgview_border*2; elemImg.width=elemImg.height*relacion; } if((elemImg.width+imgview_border*2)>ventana_ancho){ elemImg.width=ventana_ancho-imgview_border*2; elemImg.height=elemImg.width/relacion; } // Centrar imgview elemImgview.style.top = (pos_vert + ((ventana_alto - elemImg.height) / 2) - imgview_border) + 'px'; elemImgview.style.left = (pos_horiz + ((ventana_ancho - elemImg.width) / 2) - imgview_border) + 'px'; // Oclultar imagen de cargar y mostrar imgview if(elemImgCargando) { elemImgCargando.style.display = 'none'; } return false; } imgview_preloader.src = href; elemEnlace.href = href; } ///////////////////////////////////// // ImgView_Show // function ImgView_Show(obj){ imgview_nombre_album=obj.getAttribute("imgview_albumid"); if(imgview_nombre_album){ ImgView_ShowImage(obj.getAttribute("href"),true); }else{ ImgView_ShowImage(obj.getAttribute("href"),false); } } ///////////////////////////////////// // ImgView_Hide // function ImgView_Hide(){ var elemFondo = document.getElementById('imgview_fondo'); var elemImgview = document.getElementById('imgview'); var elemImgCargando = document.getElementById('imgview_imgcargando'); var elemEnlace = document.getElementById('imgview_enlace'); elemFondo.style.display = 'none'; elemImgview.style.display = 'none'; elemImgCargando.style.display = 'none'; imgview_preloader.onload=function(){return false;} imgview_preloader.src = ""; elemEnlace.href = ""; } ///////////////////////////////////// // ImgView_ShowAnterior // function ImgView_ShowAnterior(obj){ if(imgview_href_anterior.length){ ImgView_ShowImage(imgview_href_anterior,true); } } ///////////////////////////////////// // ImgView_ShowSiguiente // function ImgView_ShowSiguiente(obj){ if(imgview_href_siguiente.length){ ImgView_ShowImage(imgview_href_siguiente,true); } } ///////////////////////////////////// // ImgView_Init // // Asociar al evento "onclick" la funcion "ImgView_Show" a los links con rel="imgview". // Anhadir el markup necesario para mostrar imagenes. function ImgView_Init(){ var i; var enlaces; var scripts; var imgview_RegExp; var isimage_RegExp; if (!document.getElementsByTagName){ return; } // HACK: Obtener el path donde de este mismo script scripts=document.getElementsByTagName("script"); imgview_RegExp = /imgview\.js$/i; for(i=0;i