borrame.com - Colección particular de recortes de código y documentación para programación web

Canales RSS

Lo más fresco

  1. Bookmarklets Nuevo
  2. Recetario básico para CakePHP/2 Nuevo
  3. Certificado auto-firmado Nuevo

Sugerencias del chef

Lo más visitado

  1. Fecha y hora
  2. Dar formato a un número
  3. Reiniciar secuencia
  4. Vaciar un esquema
  5. Certificado auto-firmado
Compartir esta página

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:

/* * 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, '&amp;');             s=s.replace(/"/g, '&quot;');             s=s.replace(/'/g, '&#039;');             s=s.replace(/</g, '&lt;');             s=s.replace(/>/g, '&gt;');             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(/\"/, '&quot;') + '";\n';     salida+='//--></script>\n</head><body><a href="javascript:self.close()"><img style="border-width: 0px; vertical-align: bottom;" src="';     salida+=archivo.replace(/"/, '&quot;');     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

Bugs

Esta página ha sido impresa el sábado 23 de septiembre de 2017 (02:23:18 +0200) desde http://borrame.com/recortes/javascript/ver-imagen.html. La última vez que miré contenía HTML válido con CSS fresquito y si tiene flatas de ortografía ha sido sin querer.

borrame.com es el sitio anteriormente conocido como bits.demogracia.com (no confundir con Demogracia, que sólo pasaba por ahí).

© 2005-2017 by Álvaro González (alvaro.es) • Burgos (España) • borrame.com