Ventana modal de imagen autoresizable.
martes, abril 26, 2005 @16:36
Script para abrir de forma alternativa un enlace a imagenes en una ventana nueva la cual se auto-ajusta al tamaño de la imagen que esta visualizando. La función abre una nueva ventana de unas dimensiones predeterminadas y en el momento que se ha cargado la imagen, al tener disponibles las dimensiones de esta, reajusta el tamaño de la nueva ventana para hacerla coincidir con el tamaño de la imagen.
Los parametros a pasar son img_path que es la ruta URL de la imagen y img_title que será el título de la nueva ventana, ambos como cadena.
function ae_img_win(img_path,img_title) {
var props = 'scrollbars=no,status=no'
var win_code = '<html>\n'
win_code += '<head>\n'
win_code += '<title>'+img_title+'</title>\n'
win_code += '<meta http-equiv="content-type" content="text/html; utf-8">\n'
win_code += '<meta http-equiv="author" content="Jorge Moreno | www.alterebro.com">\n'
win_code += '<meta http-equiv="imagetoolbar" content="no">\n'
win_code += '<scr'+'ipt>\n'
win_code += 'function resize_ie() {\n'
win_code += ' window.resizeTo(200,200)\n'
win_code += ' width=200-(document.body.clientWidth-document.images[0].width)\n'
win_code += ' height=200-(document.body.clientHeight-document.images[0].height)\n'
win_code += ' window.resizeTo(width,height)\n'
win_code += '}\n'
win_code += 'function resize_nn() {\n'
win_code += ' window.innerWidth=document.images[0].width\n'
win_code += ' window.innerHeight=document.images[0].height\n'
win_code += '}\n'
win_code += 'var is_ie = (document.all)?1:0\n'
win_code += 'window.onload = function() { if (is_ie == 1) { resize_ie() } else { resize_nn() } }\n'
win_code += '</scr'+'ipt>\n'
win_code += '<style type="text/css">html, body {margin:0; padding:0; border:none; overflow: hidden;}</style>\n'
win_code += '</head>\n'
win_code += '<body><img src="'+img_path+'" alt="'+img_title+'"></body>\n'
win_code += '</html>\n'
var ae_win = window.open('','',props)
ae_win.document.open()
ae_win.document.write(win_code)
ae_win.document.close()
}Ejemplo de uso:
<!-- HTML -->
<a href="img/banner.jpg" onclick="ae_img_win(this.href,'prueba'); return false;">
open
</a>Etiquetas: javascript
0 comentarios
Publicar un comentario