Comunidad de diseño web y desarrollo en internet online

jquery cycle

Citar            
MensajeEscrito el 26 Nov 2008 01:56 pm
Hola a todos,

Quiero estoy haciendo un slideshow con jquery y me gustaría hacer que cuando el usuario haga click en la imagen el slide se detenga, y que cuando vuelva a clickear continúe el slide.

Se que es con cycle (pause) y cycle (resume).

Pero como soy novato en javascript no se como hacer el código javascript para que haga lo que arriba explique.

Les dejo el código de lo que estoy haciendo

Código :


<div id="slide" style="display:none;">
<img src="imagenes/casas_peste/1.jpg" />
<img src="imagenes/casas_peste/2.jpg" />
<img src="imagenes/casas_peste/3.jpg" />
<img src="imagenes/casas_peste/4.jpg" />
<img src="imagenes/casas_peste/5.jpg" />
<img src="imagenes/casas_peste/6.jpg" />
<img src="imagenes/casas_peste/7.jpg" />
<img src="imagenes/casas_peste/8.jpg" />
<img src="imagenes/casas_peste/9.jpg" />
<img src="imagenes/casas_peste/10.jpg" />
<img src="imagenes/casas_peste/11.jpg" />
<img src="imagenes/casas_peste/12.jpg" />
<img src="imagenes/casas_peste/13.jpg" onload="slideshow();"/>
</div>

<script type="text/javascript" charset="utf-8">
 
       $("#contenedor").fadeIn("slow");
       
       function slideshow () {
          $('#slide').fadeIn('slow');
          $('#slide').cycle({timeout:4000});};  

</script>



Por _rulo

9 de clabLevel



 

safari
Citar            
MensajeEscrito el 27 Nov 2008 05:14 am
Primero que nada.. Cycle es un plugin para jquery, right?
Tienes que descargar jquery y el plugin para jquery que quieres usar -llamado Cycle en este caso- e incluirlo en tu documento html de la siguiente manera:

Código HTML :

<script type="text/javascript" src="/ruta/jquery.js"></script>
<script type="text/javascript" src="/ruta-del-plugin/jquery.cycle.all.js"></script>


Es importantisimo que agregues estos archivos si no no funcionará. Si ya los tienes agregados ignora esta pasada instrucción.
Otra cosa, el código de jquery tiene que ser abierto con lo siguiente:

Código Javascript :

<script type="text/javascript">
$(document).ready(function(){
// funciones, instrucciones.. etc.
});
</script>


Esto anterior es super básico y no lo noté en tu código, si ignorabas por completo esto te recomiendo que le des una leída al tutorial de jquery aquí en cristalab.

Ahora, nunca he utilizado ese plugin pero según la documentación el codigo es así:

Código HTML :

<div id="fotos">
            <img src="Ruta_de_la_imagen.gif" alt="" />
            <img src="Ruta_de_la_imagen.gif" alt="" />
            <img src="Ruta_de_la_imagen.gif" alt="" />
            <!-- sigue agregando todas las imagenes que aparecerán en tu slideshow -->
</div>


y bastaría el siguiente código javascript para hacerlo funcionar:

Código Javascript :

<script type="text/javascript">
$(document).ready(function(){
 $('#fotos').cycle('fade');
});
</script>


..Todo el código quedaría algo así:

Código HTML :

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>prueba de cycle</title>
    <script type="text/javascript" src="/ruta/jquery.js"></script>
    <script type="text/javascript" src="/ruta-del-plugin/jquery.cycle.all.js"></script>
    <script type="text/javascript">
         $(document).ready(function(){
               $('#fotos').cycle('fade');
                                                  });
    </script>
 </head>
 <body>
   <div id="fotos">
            <img src="Ruta_de_la_imagen.gif" alt="" />
            <img src="Ruta_de_la_imagen.gif" alt="" />
            <img src="Ruta_de_la_imagen.gif" alt="" />
            <!-- sigue agregando todas las imagenes que aparecerán en tu slideshow -->
   </div>
 </body>
</html>


Para sacarle el máximo provecho al plugin tienes las funciones en la documentación del plugin. Si no sabes aplicar las funciones, como te dije anteriormente.. Lee el tutorial de jquery por que son cosas muy básicas que necesitas saber.

Espero te sirva..
Saludos.

Por ivanfc0o

Claber

391 de clabLevel

3 tutoriales

Genero:Masculino  

Hardcore UI

firefox
Citar            
MensajeEscrito el 01 Dic 2008 01:29 pm
Gracias ivanfc0o!

Ya tengo cargados el plugin y el archivo jquery, y el cycle me corre perfecto.
Lo que quiero hacer es pausarlo y reanudarlo haciendo click en la misma imagen.

Se te ocurre como?

Por _rulo

9 de clabLevel



 

safari

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.