Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje09-09-2011, 00:54 (UTC)    
Título del mensaje: [jQuery] Slide de imagen | Efecto 3
Responder citando
Hola amigos.
En esta ocasion les ofresco un Slide de imagenes, obviamente no es mio, la fuente es www.malsup.com.

Les cuento que este slide lo voy a traer en varios efectos . El efecto que les traigo es un efecto muy bueno . Pueden ver una Vista previa aqui :
http://brianpwg.es.tl/slide3.htm

Comenzemos.
Para que esta Galeria funcione, debemos agregar la Libreria jQuery
Cita:
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>

Por ensima de la Pagina lo debemos colocar,o en el editor Html, las dos son lo mismo.

Ahora lo que haremos es colocar la Funcion -o- Efecto de esta Galeria
Cita:
<script type="text/javascript">
$(function() {
$('#curtainX').cycle({
fx: 'curtainX',
sync: 0,
delay: -2000
});
});
</script>

Por ensima de la Pagina lo debemos colocar,o en el editor Html, las dos son lo mismo. (Siempre debajo de la Libreria Js para no confundir)

Ahora colocaremos el CSS
Cita:
<style type="text/css">

.pics { height: 232px; width: 232px; padding:0; margin:0; overflow: hidden }
.pics img { height: 200px; width: 200px; padding: 15px; border: 1px solid #ccc; background-color: #eee; top:0; left:0 }
.pics img {
-moz-border-radius: 10px; -webkit-border-radius: 10px;
}

</style>

Por dabajo de la Libreria Js y el Codigo Javascript-


Y ahora, finalmente el Html :
Cita:
<div class="pics" id="curtainX"><img width="200" height="200" src="URL DE LA IMAGEN" alt="" /> <img width="200" height="200" src="URL DE LA IMAGEN" alt="" /> <img width="200" height="200" src="URL DE LA IMAGEN" alt="" /></div>


Bueno, seguramente todo PWG debe saber como Editar el HTML, pero si no lo Saben, lo explico :
URL DE LA IMAGEN : Es la Imagen que colocaremos
200: Es el ancho de la Imagen
200: Es la altura de la Imagen.
-------------------------------------------------------------------------------------

Mas Slides :
Slide1
Slide2

-------------------------------------------------------------------------------------
Bueno amigos, eso es todo.Espero que les haga gustado y les Sea util.

Saludos
BrianPwg


Ultima edición por brianpwg el Jue Sep 08, 2011 9:01 pm; editado 1 vez
↑
Mostrar mensajes anteriores:   
  • Página 1 de 1

  •  
    • Saltar a:  


Powered by phpBB © 2001, 2005 phpBB Group

© 2024 webme GmbH, Alemania. Todos los derechos reservados.