Cambiar contenidos sin refrescar la pagina

[ferny]

Hola chic@s

Necesito un cable. A ver... quiero hacer una pagina con contenido variable. Arriba de la pagina habrá unos cuantos links que al pulsarlos cargarán el contenido a mostrar justo debajo, pero quiero hacer esto sin recargar la página.

Una posible solución sería con un <iframe> pero lo descarto ya que el tamaño de los contenidos varía y el <iframe> tengo entendido que es de tamaño fijo.

He pensado en hacerlo con capas, supongo que mostrando y ocultando las capas es posible hacer esto. El problema es que cada bloque de contenidos va a tener muchas fotos, asi que no me interesaría que se tuvieran que cargar todas las capas... o sea, cuando el usuario pinche en el link, entonces se carga la capa correspondiente, pero sólo en ese momento y no antes.

Ojalá me podais dar alguna solución, de ser posible que no sea "IE only" jejeje...

Saludos

[PatomaS]

Hola

Definitivamente creo que la solución pasa por los iframes, a menos que quieras y/o puedas utilizar ventanas emergentes para prsentar el contenido, cosa que dependiendo de la maquetación de tu página, puede quedar muy bien.

Si no te agradan las ventanas emergentes, la solución de los iframes se puede ajustar a cualquier necesidad, sin embargo, no entendí bien lo relacionado a la dimensión del contenido que iría en dichos iframes.

Es decir, si la página que carga en el iframe es muy larga, habrá barras de desplazamiento, l ocual permite navegarsin problemas por todo el contenido. Si lo que ocurre es que son más anchas que el iframe, aparecerá la barra horizontal, si quieres evitar esta, basta con que hagas el diseño un poco menos ancho que el total del iframe.

Pero aun así, creo que se podría hacer que en cada ocasión el iframe fuera un poco más grande o pequeño dependiendo de lo que decidas cargar en el. Llevaría un poco más de trabajo, pero serviría.

Así que tú dirás.

De todas formas, si nos pudieras dar un ejemplo de la maquetación actual y de alguna página de contenido del iframe, sería de gran ayuda para ayudarte.

;)

Felicidad

[caricatos]

Hola ferny y PatomaS:

Me suena la pregunta a una galería de imágenes (o similar)...
En mi página de galería de imágenes, se cargan solo las que están en la capa activa y las demás se cargan en el momento de mostrar la capa correspondiente...
Fíjate si es lo que quieres aquí: http://www.sucaricatura.com/2004 si es así te comentaré como lo hago...

Tengo un script (función) que genera galerías y tiene un parámetro que indica si se cargan o no, y lo que hace es no darle valor al atributo src de las imágenes que genera el script si el parámetro es false, y las muestra en el caso contrario, y al mostrar las capas (llevando el control de las ya mostradas/cargadas) se hacen las asignaciones.

Si crees que te puede servir, y necesitas ayuda, cuenta conmigo... En otra página he puesto más información sobre esa galería: http://www.pepemolina.com/imagenes

Saludos

[ferny]

Holas
Lo que necesito es justo lo de caricatos, en http://www.sucaricatura.com/2004 No es exactamente para una galería de imágenes pero se le parece, es un montón de fotos con comentarios... no quería precargar todas pues sería interminable, sólo que cuando el usuario pulse en una se cargue esa capa...
Te agradeceré que me puedas enviar lo necesario
Saludos a los dos

P.D. 1: El problema es que el tamaño de cada "galería" será variable, o sea en una habrá más fotos que en otras... No quería usar iframes si no había otro recurso, pues no quedaba bien la barra de desplazamiento del iframe. Había pensado en hacer iframes de tamaño variable según la longitud de la galería, pero sólo como último recurso. Tampoco tengo hechas ni las galerías ni la propia página, de momento me estoy "documentando" de cómo podría hacerlo, antes de lanzarme

P.D. 2: Caricatos, ¿sabes si eso es compatible en todos los navegadores? Al menos en las últimas versiones de cada uno...

[caricatos]

Hola otra vez:

En la otra página que te señalé había un link para bajarse el fichero galeria.js (dentro de un zip) este es el enlace: http://www.pepemolina.com/imagenes/galeria.zip

En lo que pueda ayudarte cuenta conmigo... En las FAQs de javascript puse un script para hacer precargas con porcentajes (y en el enlace también está el código)

Saludetes

[ferny]

Muchas gracias, luego a la tarde lo miro y hago alguna prueba.
Saludos

[caricatos]

Hola otra vez:

Se me pasó por alto la PD2:

Mi página al menos funciona bien en Mozilla y Opera (las pruebo con versiones bastante nuevas)

La PD1 creo que más o menos te la contesté en el mensaje anterior.

Saludos

[ferny]

Hola de nuevo

Ya tengo el script adaptado y funcionando, lo he comprobado en las últimas versiones de IE, Opera, Firefox, Mozilla y Netscape, funcionando bien. La precarga se hace bien en el momento justo en que se pincha un link, según he comprobado con los logs del servidor

Ahora voy a intentar meter los contenidos de texto en archivos distintos, mas que nada por el mantenimiento y las actualizaciones... a ver si lo logro y si no vengo a pedir socorro jejeje...

Saludos y gracias

[caricatos]

Me alegra saber que va bien en tantos navegadores... Más o menos era la referencia que tenía.
Cuando termines la página no dejes de avisar.

Saludetes

[ferny]

Está muy bien eso de los navegadores, a ver si la gente se anima a hacer que las cosas no sólo funcionen en el IE y le ganamos la batalla de navegadores a los de mocosoft...

Respecto a lo que dije de incluir los contenidos en archivos aparte no lo he logrado. ¿Cómo podría intentarlo? Supongo que sería con <script src="contenido1.js"></scrip> y así todos, lo que sucede es que entonces cada linea de contenidos la tengo que poner con un document.write y es un rollete para escribir todo, ¿no se podrá hacer en HTML puro y duro y luego incluirlo de algún modo? O alguna otra idea más sencilla...

Saludos y gracias

[caricatos]

Hola otra vez:

Se me ocurre que también pueden usarse iframes (parece que se puede ajustar al contenido), o con un tag object, supongo que el type puede ser text/plain o text/html, pero desconozco si es posible hacer ajustes.

Saludos

[ferny]

Gracias, pero creo que al final lo voy a hacer con archivos js y así me quito de problemas... asi que este tema queda resuelto
Saludos

[Kalili]

Hola ferny.

Podrias explicar un poco mas detalladamente como lo has hecho pues estoy buscando lo mismo

Gracias

[ferny]

Te pego aquí el codigo. Esto va entre <head> y </head>

Código:

<script src="galeria.js" language="JavaScript" type="text/javascript"></script>

<script language="javascript">
var op = "vista0";
// Galerías principales
var C2004_0 = new Array();
var C2004_1 = new Array();
var C2004_2 = new Array();
var C2004_3 = new Array();

var vistos = [true, false, false, false];

function IrOp(vista, galeria)	{
	document.getElementById(op).style.display = "none";
	op = vista;
	document.getElementById(op).style.display = "block";
	var actual = parseInt(op.charAt(5));
	if (vistos[actual] == false)	{
		cargar(galeria);
		vistos[actual] = true;
	}
}

</script>

Y ahora el body:

Código:

<p style="text-align: center; width:70%">

<a href="javascript:IrOp('vista0', C2004_0)">[1]</a>
<a href="javascript:IrOp('vista1', C2004_1)">[2]</a>
<a href="javascript:IrOp('vista2', C2004_2)">[3]</a>
<a href="javascript:IrOp('vista3', C2004_3)">[4]</a>

</p>


<div id="vista0" style="display: block">
<script language="javascript" type="text/javascript">

// Carga de fotos
C2004_0[0] = new Foto("IM000267.jpg");
C2004_0[1] = new Foto("IM000268.jpg");
C2004_0[2] = new Foto("IM000269.jpg");

galeria(C2004_0);
cargar(C2004_0);

</script>
<script language="javascript" type="text/javascript" src="1.js"></script>
</div>

<div id="vista1" style="display: none">
<script language="javascript">

// Carga de fotos
C2004_1[0] = new Foto("IM000270.jpg");
C2004_1[1] = new Foto("IM000271.jpg");
C2004_1[2] = new Foto("IM000272.jpg");

galeria(C2004_1);

</script>
<script language="javascript" type="text/javascript" src="2.js"></script>
</div>

<div id="vista2" style="display: none">
<script language="javascript">

// Carga de fotos
C2004_2[0] = new Foto("IM000273.jpg");
C2004_2[1] = new Foto("IM000274.jpg");
C2004_2[2] = new Foto("IM000275.jpg");

galeria(C2004_2);

</script>
<script language="javascript" type="text/javascript" src="1.js"></script>
</div>

<div id="vista3" style="display: none">
<script language="javascript">

// Carga de fotos
C2004_3[0] = new Foto("IM000276.jpg");
C2004_3[1] = new Foto("IM000277.jpg");
C2004_3[2] = new Foto("IM000278.jpg");

galeria(C2004_3);

</script>
<script language="javascript" type="text/javascript" src="2.js"></script>
</div>

Y este es el archivo galeria.js modificado. La función galeria() está así de pruebas nada más, ya la modificare más adelante.

Código:

function Foto(imagen)	{
	this.imagen = imagen;
}

function galeria(fotos)	{
	for (var i = 0; i < fotos.length; i ++)	{
		document.writeln("<img src='' width='150' border='1' id='"+fotos[i].imagen+"'>");
	}
}

function cargar(fotos)	{
	var elemento;
	for (var i = 0; i < fotos.length; i ++)	{
		elemento = fotos[i].imagen;
		document.getElementById(elemento).src = fotos[i].imagen;
	}
}

En cuanto a los archivos 1.js 2.js etc. son los contenidos, que no es más que el texto de la foto escrito de la forma:

Código:

document.write("primera linea<br>");
document.write("segunda linea");
.......

Espero que te sirva, yo aún no he empezado con lo que quiero por falta de time() jejeje...

Saludos

[Kalili]

Gracias ferny

Lo probare y ya te dire

[acervantes]

Mis respetos, excelente galería de fotos, los felicito.