El reto ;-)

[ShadowII]

A ver como lo explico.

En una de mis paginas (galeria) tengo algo así como 50 fotografías en tamaño pequeño. Estas las creé a partir de su tamaño natural con el Frontpage para "iconizarlas".

De cada foto tengo dos. Una foto_small.jpg (la iconizada) y la otra foto.jpg. Hasta ahora la llamada a la de mayor tamaño era un simple link que abría una ventana maximizada de dicha foto.

Esto no me gusta mucho, pero menos me gusta la idea de crear una pagina nueva por cada foto mas teniendo en cuenta que la galería irá en aumento (tengo algunos cientos por colocar). Lo de los popup's es una posiblilidad pero tambien habría que hacer una pagina por cada foto.

Después de ver de lo que es capaz de hacerse con un archivo *.js gracias a tunait
...¿es posible esto?

Me parece un tanto complicado ya que cada foto pequeña llamaría a una parte del js y lo mostraría en un popup centrado en la pantalla y no redimensionable (con anulación del boton derecho en ese popup)
Es decir, que si le doy a la foto x_small.jpg se me abra un popup de x.jpg (otra cosa es como hago la llamada desde cada foto_small )

Mirando el código final que me dejó tunait en el post "Mezclas de script" he visto lo de los Arrays y eso me ha dado la idea ¿? de que sea posible.

En fin, ahí dejo el reto :cantar:

Salud!!!

[tunait]

Buenas

En las FAQ dejé un par de scripts (el segundo ampliación del primero) para el tema de las fotos y los pop-ups.

Echale un ojo, y si te sirve la idea siempre se le puede adaptar alguna línea extra para que centre el pop-up.

Dime si es la idea y lo arreglamos entonces un poquillo.

[caricatos]

Hola ShadowII:

Fijate si lo que tengo en mi página se parece a lo que necesitas, y si es así, te ayudo a hacerlo...

Aquí te paso el link de la galería...
Galería

Son arrays y pop-up's.

Saludos

[tunait]

Caricatos tu página se rie!!!!!!!

[caricatos]

tunait:

¿No la habías visto antes?

Las risitas las puse hace como un año...

Un abrazo

[tunait]

Orale, pues la primera vez que lo oigo
Debe de ser que siempre que he ido tenía el audio apagado y ahora me he quedado toda sorprendida

[ShadowII]

Mensaje Original por caricatos
Hola ShadowII:

Fijate si lo que tengo en mi página se parece a lo que necesitas, y si es así, te ayudo a hacerlo...

Aquí te paso el link de la galería...
Galería

Son arrays y pop-up's.

Saludos

Algo así caricatos.
Solo que necesariamente el popup debe estar centrado y anulado el botón derecho. Tambien hay que tener en cuenta que cada foto es diferente en tamaño (me refiero sobre todo a las que aparecerían en el popup)
¿Son tuyas las caricaturas?

Saludos

[ShadowII]

Vsta tu recomendación tunait.

Lo he probado pero no me va.
Me maximiza una nueva ventana en la que no sale nada.

De todas formas, me abristo los ojos con los ls y ahoraaaa lo voy a pasar mu mal!!!

Aprovecho para ver el codigo de caricatos.

(Si se te ocurre alguna idea para lo que quiero....)

Ta luego

[caricatos]

Ok:

Entonces manos a la obra:
En este link está el fichero js en uso: bajarlo

Podrás ver en el código que son datos que se generan dinámicamente usando innerHTML... o sea que en browsers viejos no van (en opera tampoco), pero por página puedes usar document.write que funciona en todos...

Ya que tienen distintos tamaños, te recomiendo usar o un array por valor (imagen, ancho, alto ...)

Luego hacer un script que genere las miniaturas, y en el script generar también la llamada a la apertura del pop-up.

Fijate que en el fichero js hay una función abrir.js que solo habría que hacerle un retoque para que el popup lo ponga en el centro de la pantalla... sé que es algo así como screen.clientWidth, o tal vez offsetWidth o innerWidth (y xxxHeight) con un cálculo básico, y añadir el resultado a las propiedades del "window.open".

voy a ver si preparo una cosa básica, y lo pongo...

Saludos

[ShadowII]

gracias caricatos.

Ya lo he bajado y ojeado. Hay muho que estudiar y cambiar en tu js para que se me adapte.

Las miniaturas ya están an la pagina, en formato html. La idea es un js que, desde cada una de ellas, llame a la ampliacion en un popup adaptado al tamaño real de la foto.

Ejemplo:

[IMG]foto1_small.jpg[/IMG] al hacer clic sobre ella se abre el popup con [IMG]foto1.jpg[/IMG]

Imagino que lo unico que debe haber en el js es la foto orginal (la llamada quiero decir)

Creo que esto es más complicado que lo que parece

Aún así estudiaré el tuyo (esto de los js me está apasionando!!!)

[caricatos]

Hola: Te mando una página con sólo un pas de imagenes...

Voy a subirla a algún sitio para que veas el efecto...

Debes consuderar que no hay estilos ni nada bonito, porque solo es una muestra:

<html>
<head>
<script language="javascript">
function mostrar(imagen, ancho, alto) {
var losDatos = "imagen: " + imagen;
losDatos += "\nanchura: " + ancho;
losDatos += "\naltura : " + alto;
alert(losDatos);
}

function elDato(imagen, ancho, alto, mini, miniancho, minialto) {
this.imagen = imagen;
this.ancho = ancho;
this.alto = alto;
this.mini = mini;
this.miniancho = miniancho;
this.minialto = minialto;
}
var afotos = new Array();
afotos[0] = new elDato("MaxiH000.jpg", 480, 360, "MiniH000.jpg", 133, 100);
afotos[1] = new elDato("MaxiV000.jpg", 360, 480, "MiniV000.jpg", 100, 133);

function galeria(fotos) {
var visor = "";
for (var i = 0; i < fotos.length; i ++) {
visor += "<img src='" + fotos[i].mini;
visor += "' width='" + fotos[i].miniancho;
visor += "' height= '" + fotos[i].minialto;

visor += "' onclick='mostrar(\"" + fotos[i].imagen;
visor += "\", " + fotos[i].ancho;
visor += ", " + fotos[i].alto + ")' >";
}

return visor;
}
</script>
</head>
<body>
<script language="javascript">
document.writeln(galeria(afotos));

</script>

</body>
</html>

Es un array de objetos donde estan los valores necesarios (los que expuse antes), y el mostrar solo abre un alert, pero te muestra los valores para el pop-up

Saludos

[ShadowII]

Bueno, pues voy a hacer pruebas, ya te contaré.

Gracias caricatos

[caricatos]

Hola otra vez:

En este link puedes ver la página de más arriba...

El mostrar es un "alert" que hay que cambiar por el archiconocido "window.open"

Saludos

[caricatos]

Hola otra vez:

En el link que puse anteriormente, puse también la descripción (el title), y se abren las ventanas... (acabo de centrarlas en explorer)

No están centradas pero eso es fácil...

Dime por donde quieres que siga.


Saludos

[ShadowII]

Pregunta:

El popup toma las medidas de la imagen original?


Voy a ir probando. Mientras tanto, anular botón derecho en el popUp

Gracias caricatos

[ShadowII]

Mas:

var afotos = new Array();
afotos[0] = new elDato("MaxiH000.jpg", 480, 360, "MiniH000.jpg", 133, 100, "Caricatura apaisada");
afotos[1] = new elDato("MaxiV000.jpg", 360, 480, "MiniV000.jpg", 100, 133, "Caricatura tipo retrato");

yo tendría que poner:

var afotos = new Array();
afotos[0] = new elDato("foto.jpg", 480, 360 , "foto_small.jpg", 133, 100 , "Caricatura apaisada");
afotos[1] = new elDato("MaxiV000.jpg", 360, 480, "MiniV000.jpg", 100, 133, "Caricatura tipo retrato");

*en naranja las medidas de la foto grande?
*en rojo oscuro las de la miniatura? las que ya están en la pagina?

Lo de "Caricatura apaisada" o "...tipo retrato", en que afecta al código?

El latas

Se me olvidó: 'background-image:url <--- esto es en tu caso no?

[caricatos]

Hola otra vez:

En el ejemplo se ponen en el atributo "title" de las miniaturas (podría decirse que equivale al atributo alt) si pasas el cursor por encima de las miniaturas aparece la descripción.

En realidad la razón no es más que mostrar las posibilidades de estos objetos.

En el script (función) galeria, se generan etiquetas img... pero por cada elemento del array se puede generar una celda de una tabla, o cualquier tag html con los atributos que quieras, y más etiquetas anidadas con sus atributos...

El secreto está en que los datos necesarios los pongas en los objetos "eldato[índice]", y luego por cada iteración del índice del "bucle for" poner las cosas que tienes guardadas en el objeto.
La verdad es que no es muy difícil, pero no sé si me explico bien...
Lo más importante es llevar el control de los tipos de comillas y que los tags se abran y cierren coherentemente.

Bueno... ¿por donde seguimos?

Saludos

[caricatos]

Hola... ¡no he visto lo de back... ...!

Hay muchas formas de poner una imagen (2 ó 3)

Una mediante el tag img
y la otra con background-image...

Según se use pueden verse mal... y me estoy acostumbrando a usar estilos.

En resumen se pueden poner las imágenes con el tag img, o como fondo de otro tag como estilo... background-image...
... la tercera de las maneras de abrir una imagen es al usar window.open, poner como primer parámetro la dirección de la imagen.

Saludos

[ShadowII]

El codigo que está en las FAQ's me sirve en parte:

<html>
<head>
<title>Prueba de galeria</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript">

//script por tunait

var ventana
function afoto(cual)
{
if(ventana){ventana.close()}
ventana=window.open('','ventana','resize=yes')
ventana.document.write('<body marginwidth="0" marginheight="0" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0"><img src="' + cual + '" onLoad="opener.redimensionar(this.width, this.height)">')
}
function redimensionar(ancho, alto)
{
ventana.resizeTo(ancho,alto)
}
</script>
</head>

<body>

<table width="343" border="0" cellpadding="0" cellspacing="0">

<tr>
<td width="116" height="91" valign="top"><a href="images/imagen1.jpg" onClick="afoto('images/imagen1.jpg');return false"> <img src="images/imagen1_small.jpg" width="100" height="95" border="0"></a>
</td>
<td width="19">&nbsp;</td>
<td width="100" valign="top"><img src="images/imagen2_small.jpg" width="100" height="91" border="0"></td>
<td width="108">&nbsp;</td>
</tr>
<tr>
<td height="34">&nbsp;</td>
</tr>
<tr>
<td height="76">&nbsp;</td>

</tr>
</table>
</body>
</html>

La primera imagen se abre en un popup, justo lo que quería.

Ahora vienen las preguntas (si, mas!!!)

1ª ¿Por qué el tamaño de la foto no es el mismo que el popup? Es decir, no se autoredimensiona.

2ª ¿Que le falta al código para que el popup quede centrado en la pantalla?

3ª ¿Hay posibilidad de desactivar el botón derecho dentro del popup? ¿Cómo?

Gracias por responder a la 1ª
Gracias por responder a la 2ª
Gracias por responder a la 3ª

Salud!!

[caricatos]

Hola otra vez:

Puse una versión más bonita, y con explorer se centra pero con netscape no.

El menú contextual está deshabilitado.
está aquí

En la galería puse algunas cosas sin importancia para que veas algunos efectos que se pueden conseguir (colores, bordes...)

Espero que te sirva.

Saludos

[ShadowII]

Juer!!! menos mal que quité lo de "code"... el ancho de la pantallita era interminable

Funcionó caricatos, pero menudo curro con los marditos nombres y tamaños!!!

A ver si consigo hacer lo mismo (o parecido) en un *.js, sería genial.

Muchas gracias por tu ayuda.

[caricatos]

¡Estupendo!

Me alegro de que hayamos podido ayudarte...
Iba a contestarte con los "js" pero ya he visto que te has informado.


Un abrazo

[ShadowII]

Iba a contestarte con los "js" pero ya he visto que te has informado.

Pro quiero mas!!

Lo que me pasaste para la galeria, se puede en js?


Salud!!!

[caricatos]

Hola ShadowII:

Acabo de subir en la dirección anterior, la misma página, pero con un fichero js relacionado:
la página es ésta y el js es éste

y los pasos que dí fueron:

Corté de la página el contenido del tag script (sin <script...></script>)
Creé un fichero de texto nuevo que llamé galeria.js...
Pegué lo que tenía en el portapapeles... luego guardé los cambios.
... y por último añadí al tag script (ahora sin contenido) el atributo src con el nombre del fichero que acababa de crear: src=galeria.js.

Esos pasos suelen ser suficientes para los tag script que haya en el "head".
El script del body no tuve que modificarlo.

Espero que te sirva.

Saludos

[ShadowII]

Bien bien bien!!!
Parece que me expliqué y es la respuesta que imaginaba.
Ahora quedan un par de detalles.

La parte <style> es posible aplicarla sólo el marco donde están las fotos u obligatoramente debe ser para toda la pagina?

En cuanto al popUp de cada una de ellas, ¿Puedo evitar que salga el lugar de procedencia de la imagen (sale la url) en la barra de estado o bien que sólo salga el nombre de la foto, o lo que ponga en "this.descri = descri;"?

Gracias maestro!!

[caricatos]

Hola ShadowII:

Ha fallado el sistema y hemos tenido que esperar:

Los estilos y javascript son muy buenos amigos...

Puedes crear un estilo propio:
<style>
.miEstilo {background-color:transparent;}
</style>

... y luego con un javascript (document.write) poner esa "clase" y puedes estar seguro de que va a funcionar (desde luego que no hago una afirmación universal porque es posible que algunas cosas funcionen distintas... tipico ejemplo: cursor hand)

Osea que si quieres que la clase (estilo) solo funcione en un tag específico, puedes ponerlo con javascript en ese mismo sitio, o ponerlo dentro de la hoja de estilos, pero a sabiendas que solo lo vas a usar en ese sitio, pero dentro de la hoja de estilos es visible para todo el documento.

... No sé si te contesto...

La segunda parte es sencilla...

En la función "mostrar" debes poner otro parámetro (ejemplo: titu) y en la linea:
var losDatos = "<html><body oncontextmenu='return false' style='background-image:url(" + imagen;
después de <html> deberías poner algo así:
var losDatos ="<html><head><title>" + titu + "</title></head><body oncontextmenu... ..."

Si no lo entiendes bien (sé que soy difícil a veces...¿?) dímelo...

Saludos

[ShadowII]

Reholas

1º -Quieres decir que lo que hay entre los tag <style> los puedo meter tb en un js y luego llamarlo a una zona de la pagina como hemos hecho con la galeria? Te lo pregunto porque lo de los bordes en las minifotos estaba bien, pero me ponía márcos a todo y no es esa la idea. Además, ese sería un bloque de fotos (galeria.js) Tendré que hacer más en otras partes de la misma pagina por lo que sería conveniente crear un "galerías2.js". Si es posible la separación, tando de style como de js seria justo lo que mejor me vendría.

2º Voy a probar lo de

En la función "mostrar" debes poner otro parámetro (ejemplo: titu) y en la linea:
var losDatos = "<html><body oncontextmenu='return false' style='background-image:url(" + imagen;
después de <html> deberías poner algo así:
var losDatos ="<html><head><title>" + titu + "</title></head><body oncontextmenu... ..."

Ya te diré algo

Gracias sensei

[ShadowII]

No me saleeee!!!!

en la functio mostrar añadí "titulo" pero no se que debo quitar en esta otra linea para que solo salga el titulo en la barra del popUp!!!

var losDatos = "<html><body oncontextmenu='return false' style='background-image:url(" + imagen;
losDatos += ")' /></body></html>"

[caricatos]

Hola (Rehola)

... y porqué no... ¡Hola holita!

Puse en los enlaces de arriba los ficheros modificados para que salga un título en el pop-up.

La verdad es que puse otro parámetro en mostrar, y otro atributo en el objeto, pero como tú dices, se puede usar el atributo descri y ahorrarte las modificaciones... (tan solo debes modificar la función mostrar con lo que te comenté antes...

Estuve viendo en opera como iba (lo arranqué para probar algo que tenía kao) y no se veía la imagen... voy a probar usando el tag img en el pop-up y te aviso

Saludos

[ShadowII]

Pues ya no aparece lo de la pagina, pero en titulo me sale Undefined y no es cierto, está definido.

Te copio una parte a ver si encuentras algo:

function mostrar(imagen, ancho, alto, titulo) {
var posX = screen.Width / 2 - ancho / 2;
var posY = screen.Height / 2 - alto / 2;
var losDatos = "<html><head><title>" + titulo;
losDatos += "</title></head><body oncontextmenu='return false' style='background-image:url(" + imagen;
losDatos += ")' /></body></html>"
var propi = "width=" + ancho + ",height=" + alto + ",left=" + posX + ",top=" + posY;
var popup = window.open("", "", propi);
popup.document.write(losDatos);
}

function elDato(imagen, ancho, alto, mini, miniancho, minialto, descri, titulo, dato1, dato2, dato3, link) {
this.imagen = imagen;
this.ancho = ancho;
this.alto = alto;
this.mini = mini;
this.miniancho = miniancho;
this.minialto = minialto;
this.descri = descri;
this.titulo = titulo;
this.dato1 = dato1;
this.dato2 = dato2;
this.dato3 = dato3;
this.link = link;

var afotos = new Array();
afotos[0] = new elDato("images/acer_buergerianum_alt57_anc85_ba63.jpg", 496, 301, "images/acer_buergerianum_alt57_anc85_ba63_small.jpg", 100, 60, "", "Acer buergerianum", "Altura: 57 cm", "Ancho: 85 cm", "Base: 63 cm");


Como verás, el prmer bloque de comillas está vacío ("") y se corresponde con descri, pero no así "titulo".

Pongo una sola de las arrays pera que veas el orden. No se si será ese el problema.

Te espero para seguir

(Esto marcha)