É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:
/*
* Abre una ventana emergente para mostrar una imagen
* y ajusta el tamaño de la ventana a la imagen
*
* Parámetros:
*
* string archivo - URL de la imagen
* string titulo - [opcional] Título de la foto
*
* Ejemplo de uso:
* <a href="foto.jpg" onclick="return verImagen('foto.jpg', 'Atardecer en Cancún')">Ver imagen</a>
*
*/
function verImagen(archivo, /*opcional*/ titulo){ // v2005-09-18
// Parámetros personalizables:
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';
// Gecko muestra barras de desplazamiento aleatoriamente (aunque no haga falta).
// Solución: redimensionamos para forzar redibujado
if(!document.all){
salida+=' self.resizeBy(20, 20);\n';
salida+=' self.resizeBy(-20, -20);\n';
}
if(centrar_ventana){
// JavaScript no nos indica el tamaño de la ventana, conque lo aproximamos
salida+=' self.moveTo((screen.availWidth-img.width-10)/2,(screen.availHeight-img.height-30)/2);\n';
}
salida+=' this.onload=null;\n'; // En IE cada cuadro de un GIF animado dispara el evento
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;
}
