ventana con imagenes

Ludwing · #1 (**permalink**) 19/08/2004, 17:16

Hola a todos:

Quiero saber si puede ayudarme...

Tengo una página con varias imagenes en minuatura y quiero crear un link para abrir en una nueva ventana cada una de ellas, la imagen original se llama igual que la miniatura solo que está en una carpeta diferente.

Cómo puedo hacer una función que abra cada una de las imágenes en otra ventana y que ésta sea exactamente del tamaño de la imagen orginal (las imágenes tienen tamaños distintos)?

AKB · #2 (**permalink**) 19/08/2004, 23:11

Lo que tienes que hacer es abrir una ventana de un tamaño x predefinido, pasandole por la url con parámetros ? la url de la nueva imagen. Una vez abierto este html, esta nueva ventana debe leer la url de la imagen de la url pasada, y cargarla... una vez cargada, cambiar su propio tamaño para adaptarse al tamaño de la imagen que contiene... mexplico ?

Imagino que no asi que te dejo un ejemplo.

A meter en el fichero que muestra los thumbnails (imágenes pequeñas). Sustituye www.dominio.com por la url de tu web:

<script>
function abrete_sesamo(laimagen) {
window.open('http://www.dominio.com/imagen.html?img='+laimagen+'','mostrando_imagen',' height=10,width=10,status=no,toolbar=no,menubar=no ,location=no');
}
</script>

Y ahora por cada imagen algo tal que asi, sustituyendo obviamente www.dominio.com por la url y nombre de la imagen:

<img style="cursor:hand;" onclick="javascript:abrete_sesamo('http://www.dominio.com/imagenquesea.jpg');return false" width=100 height=100 src=imagenpequeña.jpg border=1>

Cuando pulses la imagen pequeña se abrirá imagen.html?urldelaimagengrande

ok ?

Y ahora el código del imagen.html, que es el que "hace magia", este lo puedes copiar tal cual en un imagen.html, tan sólo sustituye los www.tudominio.com:

<html>
<head>
<meta http-equiv="imagetoolbar" content="false">
<title>Ampliación de imagen</title>
<script language="javascript">


</script>
</head>

<body onblur="self.close();" oncontextmenu="return false" onclick="self.close();" onload="yomelohago_yomelocomo();" topmargin=0 leftmargin=0 marginwidth=0 marginheight=0>
<script language="JavaScript">


</script>
</body>
</html>

NOTA IMPORTANTISIMA: Este código NO FUNCIONA EN LOCAL, es decir, en tu pc, debes subirlo a internet para poder probarlo, o arrancarlo desde tu servidor local, un doble click en el fichero html NO FUNIONARA, porque el navegador no pasa variables por la url en ese tipo de ficheros, debe ser probado ONLINE.

Ya me contarás si entiendes todo bien. Un saludo.

Ludwing · #3 (**permalink**) 20/08/2004, 11:59

Gracias, de esa manera lo rosolví, aunque tuve que cambiar la fórmula para establecer que apareciera al centro

Saludos,

jomarsan · #4 (**permalink**) 20/08/2004, 12:03

Este script puede probarlo en tu ordenador. El funcionamiento es bien simple:

Cuando una imagen miniatura es pulsada, se abre una ventanita sin bordes, ni menus (solo la palabra "cerrar"). Bien, manos a la obra:

Coloca esto en el <head>
<SCRIPT LANGUAGE="JavaScript">

/***********************************************
* Image Thumbnail viewer- © Dynamic Drive (www.dynamicdrive.com)
* Last updated Sept 26th, 03'. This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

var ie=document.all
var ns6=document.getElementById&&!document.all

function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat" && !window.opera)? document.documentElement : document.body
}

function enlarge(which, e, position, imgwidth, imgheight){
if (ie||ns6){
crossobj=document.getElementById? document.getElementById("showimage") : document.all.showimage
if (position=="center"){
pgyoffset=ns6? parseInt(pageYOffset) : parseInt(ietruebody().scrollTop)
horzpos=ns6? pageXOffset+window.innerWidth/2-imgwidth/2 : ietruebody().scrollLeft+ietruebody().clientWidth/2-imgwidth/2
vertpos=ns6? pgyoffset+window.innerHeight/2-imgheight/2 : pgyoffset+ietruebody().clientHeight/2-imgheight/2
if (window.opera && window.innerHeight) //compensate for Opera toolbar
vertpos=pgyoffset+window.innerHeight/2-imgheight/2
vertpos=Math.max(pgyoffset, vertpos)
}
else{
var horzpos=ns6? pageXOffset+e.clientX : ietruebody().scrollLeft+event.clientX
var vertpos=ns6? pageYOffset+e.clientY : ietruebody().scrollTop+event.clientY
}
crossobj.style.left=horzpos+"px"
crossobj.style.top=vertpos+"px"

crossobj.innerHTML='<div align="right" id="dragbar"><span id="closetext" onClick="closepreview()">Cerrar</span> </div><img src="'+which+'">'
crossobj.style.visibility="visible"
return false
}
else //if NOT IE 4+ or NS 6+, simply display image in full browser window
return true
}

function closepreview(){
crossobj.style.visibility="hidden"
}

function drag_drop(e){
if (ie&&dragapproved){
crossobj.style.left=tempx+event.clientX-offsetx+"px"
crossobj.style.top=tempy+event.clientY-offsety+"px"
}
else if (ns6&&dragapproved){
crossobj.style.left=tempx+e.clientX-offsetx+"px"
crossobj.style.top=tempy+e.clientY-offsety+"px"
}
return false
}

function initializedrag(e){
if (ie&&event.srcElement.id=="dragbar"||ns6&&e.target .id=="dragbar"){
offsetx=ie? event.clientX : e.clientX
offsety=ie? event.clientY : e.clientY

tempx=parseInt(crossobj.style.left)
tempy=parseInt(crossobj.style.top)

dragapproved=true
document.onmousemove=drag_drop
}
}

document.onmousedown=initializedrag
document.onmouseup=new Function("dragapproved=false")

</script>

Ahora al principio de <body>

<div id="showimage"></div>

Y, por fin tus imagenes:

<a href="....../tufotopequeña.jpg" onClick="return enlarge('.-...../tufotogrande.JPG',event,'center',367,490)">
<img src="...../tufotopequeña.jpg" border="2" width="79" height="120"></a>

IMPORTANTE: Sustituye los puntos suspensivos (.../) por la direccion relativa a las respectivas imagenes. De tal forma que si estan en el mismo directorio no debes ponerlos y si estan en un directorio distinto pero del mismo nivel, seria "directoriodelasfotos/tusfotos.jpg" y si estan en otro nivel debes colocar tantos "../" como directorios tienes que moverte.

Me he explicado??

Si tienes alguna duda, responde, oK?

caricatos · #5 (**permalink**) 20/08/2004, 12:36

Hola a todos:

Otra forma precargando la imagen sería:

var miImagen;
function abrir(imagen) {
miImagen = new Image();
miImagen.src = imagen;
cargar();
}

function cargar() {
if (miImagen.complete) mostrar();
else setTimeout("cargar()", 100);
}

function mostrar() {
var ops = "left=" + ((screen.width - miImagen.width) / 2);
ops += ",top=" + ((screen.height - miImagen.height) / 2);
ops -= ",width=" + miImagen.width;
ops += ",height=" + miImagen.height;
var contenido = "<html><body style='background.image: utl(" + miImagen.src + ")' ></body></html>";
var ventana = window.open("", "", ops);
with (ventana.document) {
open();
write(contenido);
close();
}
}

y la llamada sería abrir(imagen) donde imagen sería la ruta de la imagen ampliada.
Lo puse de memoria, pero si no hay errores es otra solución.

Saludos