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.

/*

 * 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

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...

Demogracia Bits

Menú del día

Ver imagen

Notas

Bugs