Visor de imágenes simple con Jquery

closeHola! hace 6 years 10 months 6 days que escribí esta entrada, puede que esta información ya no sea valida en la actualidad, por favor se comprensivo conmigo cuando comentes 🙂

El siguiente código de ejemplo nos ayudara a crear efectos en nuestra imágenes (galerias) muy amigables y con un excelente estilo, se puede configurar y personalizar dependiendo de la imagen de nuestro sitio web, los efectos son realizados con jquery.

Código de Ejemplo

En Nuestro head agregamos el jquery y configuramos la función.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
	<script language="javascript">
 
		$(document).ready(function() {
			$("#gallery_output img").not(":first").hide();
 
			$("#gallery a").click(function() {
				if ( $("#" + this.rel).is(":hidden") ) {
					$("#gallery_output img").slideUp();
					$("#" + this.rel).slideDown();
				}
			});
		});
 
	</script>

Ahora configuramos nuestro CSS

#gallery img {
			border: none;
		}
 
		#gallery_nav {
			float: left;
			width: 150px;
			text-align: center;
		}
 
		#gallery_output {
			float: left;
			width: 600px;
			height: 550px;
			overflow: hidden;
		}
 
		#gallery_output img {
			display: block;
			margin: 20px auto 0 auto;
		}

Ahora configuramos nuestro body

<div id="gallery">
	<div id="gallery_nav">
		<a rel="img1" href="javascript:;"><img src="iphone_1.png" /></a>
		<a rel="img2" href="javascript:;"><img src="iphone_2.png" /></a>
		<a rel="img3" href="javascript:;"><img src="iphone_3.png" /></a>
		<a rel="img4" href="javascript:;"><img src="iphone_4.png" /></a>
	</div>
 
	<div id="gallery_output">
		<img id="img1" src="iphone_1b.jpg" />
		<img id="img2" src="iphone_2b.jpg" />
		<img id="img3" src="iphone_3b.jpg" />
		<img id="img4" src="iphone_4b.jpg" />
	</div>
 
	<div class="clear"></div>
</div>
¡Lo Siento! Este link no esta disponible en el momento

You may also like...

4 Responses

  1. emilio dice:

    La verdad he buscado muchos visores de imagenes… pero el que publicaste aqui es lejos el mas facil y con un diseño excelente, facil de entender y totalmente adaptable….

    Mis felicitaciones por crear esta maravilla de script!

  2. Aura Luz dice:

    La verdad yo no estaba buscando esto, pero lo guarde estoy segura que me va servir pronto, esta bien genial te felicito 🙂 desde Guatemala

  3. GeryKo dice:

    perfecto! gracias!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *