Pop-Up para imágenes en un mismo archivo en JavaScript

En esta oportunidad realizaremos un sencillo pero muy funcional script que nos permite abrir ventanas alternas utilizando una función de JavaScript como base, para imágenes sin necesidad de utilizar otro archivo, se generará una página con etiquetas de html donde figura el Titulo de la Imagen, La imagen, El fondo de la ventana emergente y una breve descripción.

Código fuente:

<script type="text/javascript">

var color_fondo_pop="#CCCCCC"
var titulo="Imagen blasten.com"

function detectar_existente(obj){
return (typeof obj !="undefined")
}

function pop_img(img_path, popwidth, popheight, descripcion_img){

function posicion(){
izquierda_=(detectar_existente(window.screenLeft))?
screenLeft+document.body.clientWidth/2-popwidth/2 :
detectar_existente(window.screenX)? screenX+innerWidth/2-popwidth/2 : 0
superior_=(detectar_existente(window.screenTop))?
screenTop+document.body.clientHeight/2-popheight/2 :
detectar_existente(window.screenY)? screenY+innerHeight/2-popheight/2 : 0
if (window.opera){
izquierda_-=screenLeft
superior_-=screenTop
}
}

posicion()
var winattributes='width='+popwidth+',height='+popheight+',resizable=yes,
left='+izquierda_+',top='+superior_
var contenido=(color_fondo_pop.indexOf(".")!=-1)?
'background="'+color_fondo_pop+'"' : 'bgcolor="'+
color_fondo_pop+'"'
if (typeof pop_ventana=="undefined" || pop_ventana.closed)
pop_ventana=window.open("","",winattributes)
else{
pop_ventana.resizeTo(popwidth, popheight+30)
}
pop_ventana.document.open()
pop_ventana.document.write('<html><title>'+titulo+'</title>
<body '+contenido+'><img src="'+img_path+'" style="margin-bottom: 0.5em"><br>'+descripcion_img+'</body></html>')
pop_ventana.document.close()
pop_ventana.focus()
}

</script>
<a href="#" onClick="pop_img('food1.jpg', 325, 445, 'Una imágen');
return false">Muestra</a>

Explicando:

Primero que nada definiremos algunas variables entre ellas ( las primeras) color_fondo_pop ( fondo por defecto de la nueva ventana ) y titulo ( El titulo por defecto de la ventana Pop)

Posteriormente definimos una función bajo el nombre de detectar_existente(obj), cuya objetivo radica en retornar (TRUE), Verdadero siempre y cuando el valor de obj sea diferente de undefined ( no definido), para utilizar a posterior.

Creamos una nueva función (principal) con el nombre de pop_img(img_path, popwidth, popheight, descripcion_img), donde img_path es el atributo src del tag IMG cuyo valor debe ser el path fisico real de la imagen a explorar o mostrar , popwidth ( El ancho), popheight ( El alto) y descripcion_img; obviamente una breve descripción entorno a la imagen a mostrar.

Usuarios que han visto este tema también han visto...

- Rotar Banners con JavaScript
- Objetos en JavaScript
- Confirmar acción con JavaScript
- Texto según la hora del día en Javascript
- Ejecutar código PHP o ASP con JavaScript

- Versión imprimible de este documento

- Enviar por e-mail este documento