Ver imagen
Éste es uno de mis recortes favoritos. Abre una ventana emergente para mostrar una imagen y ajusta el tamaño de
la ventaña al de la imagen. Sus puntos fuertes:
- No hace falta indicar el tamaño de la imagen.
- No hay que crear páginas para las imágenes.
function verImagen(archivo, titulo){
var sitio='Mi sitio web';
var css='body{background-color: white; margin: 0;}';
var centrar_ventana=true;
var ancho_inicial=125;
var alto_inicial=125;
this.txt2html=function(txt){
if(txt){
var s=txt;
s=s.replace(/&/g, '&');
s=s.replace(/"/g, '"');
s=s.replace(/'/g, ''');
s=s.replace(/</g, '<');
s=s.replace(/>/g, '>');
return s;
}
}
sitio=this.txt2html(sitio)
titulo=this.txt2html(titulo);
salida='<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">\n';
salida+='<html><head><title>' + ((titulo)?titulo+' - ':'') + sitio + '</title>\n';
salida+='<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">\n';
salida+='<style type="text/css"><!--\n'+css+'\n--></style>\n';
salida+='<script type="text/javascript"><!--\n';
salida+='var img=new Image();\n';
salida+='img.onload=function(){\n';
salida+=' self.resizeBy(img.width-' + ancho_inicial + ', img.height-' + alto_inicial + ');\n';
if(!document.all){
salida+=' self.resizeBy(20, 20);\n';
salida+=' self.resizeBy(-20, -20);\n';
}
if(centrar_ventana){
salida+=' self.moveTo((screen.availWidth-img.width-10)/2,(screen.availHeight-img.height-30)/2);\n';
}
salida+=' this.onload=null;\n';
salida+='}\n';
salida+='img.onerror=function(){\n';
salida+=' alert("Se ha producido un error al descargar la imagen:\\n"+ unescape(this.src));\n';
salida+=' self.close();\n';
salida+='}\n';
salida+='img.src="' + archivo.replace(/\"/, '"') + '";\n';
salida+='//--></script>\n</head><body><a href="javascript:self.close()"><img style="border-width: 0px; vertical-align: bottom;" src="';
salida+=archivo.replace(/"/, '"');
salida+='" alt="' + ((titulo)? titulo :'') + '" title="Clic para cerrar"></a>';
salida+='</body></html>\n';
var v=window.open('', '', 'width=' + ancho_inicial + ',height=' + alto_inicial + ',resizable=1,scrollbars=0');
v.document.write(salida);
v.document.close();
return false;
}
Notas
- El título es opcional y se muestra en la etiqueta
<title> (es decir: barra de título,
barra de tareas, Alt+Tab…) y en el parámetro alt de la imagen.
- Los siguientes parámetros se definen dentro de la función para garantizar la coherencia dentro del sitio
web:
sitio: Nombre del sitio web para la etiqueta <title>.css: código CSS para el documento generado.centrar_ventana: si true, mueve la ventana al centro de la pantalla; si
false… pues no.
ancho_inicial y alto_inicial: dimensiones iniciales de la ventana. Si la
web muestra fotografías grandes se recomienda aumentar esta cifra para poder ver las imágenes a
medida que cargan.
- La ventana se cierra al hacer clic sobre la imagen.
- Las ventanas no se reutilizan: el usuario puede tener abiertas cuantas quiera.
Bugs
- Internet Explorer no muestra barras de desplazamiento si la imagen es mayor que el escritorio. La
alternativa (cambiar
scrollbars=0 por scrollbars=1) provoca que las muestre siempre…
