Hola a todos
Estoy haciendo una galería de imágenes y quiero que al pinchar en una miniatura, aparezca la imagen ampliada, verticalmente en el lugar donde está la miniatura y horizontalmente en el centro de la pagina.
Con el código que he puesto aparece en el lugar fijo que tengo establecido y no es eso lo que quiero. Pues os paso el codigo a ver si me podeis echar una mano
<script type="text/javascript">
var x, y
var docAncho = 0
var docAlto = 0
//repeticion calculo posicion capa
var idMovimiento = 0
function muestra_foto( imagenes, ancho, alto ) {
var miFoto
//compruebo si se puede ejecutar el script en el navegador del usuario
if (!document.all && !document.getElementById)
return
//oculta capa foto (por si foto anterior que no se haya ocultado)
ocultar("foto")
//codigo HTML para la imagen
codigo_img = "<a href=\"javascript
:ocultar( 'foto' )\" title=\"Pulse para cerrar\"><img id=\"imagen\" src=\"" + imagenes + "\" width=\"336" + "\" height=\"450" + "\" onLoad=\"ver_foto()\" /></a>"
//cambia contenido capa
miFoto = obtiene_objeto( 'foto' )
miFoto.innerHTML = codigo_img
}
//obtiene objeto por nombre
function obtiene_objeto( idobj ) {
//obtiene objeto capa
if (document.getElementById) {
return document.getElementById( idobj )
} else if (document.all) {
return document.all[ idobj ]
} else {
return null
}
}
//muestra capa
function mostrar( que ) {
var miCapa = obtiene_objeto( que )
if ( miCapa )
miCapa.style.visibility = "visible"
}
//oculta capa
function ocultar( que ) {
var miCapa = obtiene_objeto( que )
if ( miCapa )
miCapa.style.visibility = "hidden"
}
function mover( que, posx, posy ) {
var miCapa = obtiene_objeto( que )
if ( miCapa ) {
//para navegadores compatibles DOM
if ( document.getElementById ) {
miCapa.style.top = posy + 'px'
miCapa.style.left = posx + 'px'
}
//para el IE 4.x
else if ( document.all ) {
miCapa.style.pixelTop = posy + 'px'
miCapa.style.pixelLeft = posx + 'px'
}
}
}
//muestra foto y la centra
function ver_foto() {
var miImagen = obtiene_objeto('imagen')
//posicion imagen
doc_ancho_alto()
var centro_x = (docAncho - miImagen.width)/2
var centro_y = (docAlto - miImagen.height)+320
mover('foto', centro_x, centro_y)
mostrar('foto')
}
//original de http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
//determina el ancho / alto del documento
function doc_ancho_alto() {
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
docAncho = window.innerWidth
docAlto = window.innerHeight
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
docAncho = document.documentElement.clientWidth
docAlto = document.documentElement.clientHeight
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
docAncho = document.body.clientWidth
docAlto = document.body.clientHeight
}
}
</script>
CODIGO HTML
<a href="javascript
:muestra_foto('fotoAmpliada.jpg')" >
<img src="miniatura.jpg" border="0" alt=""/></a>