Galería de imagenes con JQuery sin solución

[SinAliaS]

Hola a todos:

Alguien me podria orientar como armar una galeria de de 3 imagenes con jquery?

La galería se mostraría con una foto grande (foto1.jpg) y debajo 2 pequeñas, una junta a la otra (foto2.jpg y foto3,jpg), si cliqueo en la foto2.jpg (que seria una de las pequeñas) se mostraía en lugar de la grande (foto1.jpg) y la grande en lugar de la chica (es decir se intercambien de lugar), y si cliqueo en la foto3.jpg, se mostraria en lugar de la foto grande y la foto grande pasaria a verse en la foto chica.

Espero me haya explicado bien lo que intento hacer y me puedan ayudar.

Muchas gracias.

[caricatos]

Tema movido desde javascript

[uikekarallo]

Hola.

Te recomiendo que utilices algún plugin de jQuery, como por ejemplo prettyPhoto. Es el que yo suelo utilizar y está muy bien.


Saludos.

[SinAliaS]

Hola uikekarallo:

Gracias por responder.

Estuve viendo el link que me mandaste pero hasta el momento no encontre como adaptarlo para que haga el efecto que necesito.

Te agradeceria me dieras alguna idea de que comandos tendria que utilizar o como modificar el script para adaptarlo a lo que necesito.

Nuevamente gracias por tu ayuda

[uikekarallo]

Si lo que buscas es una galería tipo lightbox, la que te comento hace un efecto parecido en una ventana modal. Para que funcione, tienes que poner la clase que hayas reservado en la etiqueta <a> que enlaza a la imagen grande de esta manera: <a class="prettyPhoto[pp_gal]"><img ... /></a>.

Si lo que buscas es hacerlo tú mismo de manera sencilla, puedes hacerlo fácilmente. Un ejemplo muy básico:

Código HTML:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
  $('.littimg').click(function()
  {
    $('.bigimg').attr('src' , this.src);
  });
});
</script> 

Y en el body:

Código HTML:

<div id="contenedor">
  <p style="text-align: center;"><img class="bigimg" src="festassanvi.jpg" alt="" /></p>
  <p style="text-align: center;"><img class="littimg" src="paridilla.jpg" alt="" /> <img class="littimg" src="rasgos.jpg" alt="" /></p>
</div> 

A ver si te sirve. Un saludo.

[SinAliaS]

Hola uikekarallo:

Gracias por responder tan pronto.

El tema es que necesito que despues de hacer click en la foto chica de la izquierda y la muestre en la parte superior, la foto de arriba se vea en lugar de la chica de la izquierda.

En ese punto estoy trabada.

Gracias

[uikekarallo]

Hola, te dejo otro ejemplo sencillo para que te orientes un poco mejor.

Código HTML:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
	$('#fotospeque > img').click(function()
	{
		$('#fotospeque').append( $('#fotogrande > img') );
		$('#fotogrande').append( $(this) );
	});
});
</script>

<div id="contenedor" style="text-align: center;">

	<div id="fotogrande"></div>
	<div id="fotospeque">
		<img src="1.png" alt="" /> 
		<img src="2.png" alt="" /> 
		<img src="3.png" alt="" />
	</div>
	
</div> 

En este ejemplo, se realiza justo lo que estás buscando. Ahora falta pulirlo un poquito más :)


Un saludo.

[SinAliaS]

Hola uikekarallo:

Era lo que estaba buscando, muchas gracias por la ayuda!!!

[uikekarallo]

No hay de que, me alegro que te sirva. Un saludo :)