javascript cycle no me funciona

aficcionado · #1 (**permalink**) 31/07/2012, 17:34

hola, me encuentro trasteando (soy nuevo en html/css/js vamos que entiendo lo justo) con el script de jquery cycle.js que básicamente crea una transición en una secuencia de imágenes. Entonces he conseguido meterle una transición sencilla en plan bucle infinito cada "x" segundos sin ninguna otra propiedad, hasta aquí no hay problema.
Siendo más ambicioso he intentado meter un contador de páginas que te redireccionen hacia la página selecionada al pasarle el mouse con a:hover

El problema es que esta ultima configuración del script parece que no se activa y lógicamente las imágenes aparecen una debajo de otra, y el contador de páginas tampoco aparece por lo que entiendo que el error está en la aplicación del script
pero yo no lo encuentro a ver si me podeis ayudar.

*por alguna razón que desconozco el numero de una línea (42) del script en dw se me pone rojo no sé que significa-marcaré donde
*mi versión del script cycle es la posterior a la del ejemplo, aunque probando con el script que viene en el ejemplo tampoco funciona
*en mi primer intento del script (el que funciona) se activaba con clase .slideshow en vez de con id #slideshow como está ahora, no se si esto puede ser una causa y como el archivo es el mismo modificado

copio/pego

codigo del ejemplo http://jquery.malsup.com/cycle/pagerHover.html

Código:

<head>
<style type="text/css">

#nav { margin: 5px; }

#nav a { margin: 5px; padding: 3px 5px; border: 1px solid #ccc; background: #fc0; text-decoration: none }

#nav a.activeSlide { background: #ea0 }

#nav a:focus { outline: none; }

</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

<script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script>

<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>

<script type="text/javascript">

$(function() {

    $('#slideshow').cycle({

        speed:       200,
        timeout:     3000,
        pager:      '#nav',
        pagerEvent: 'mouseover',
	pauseOnPagerHover: true

    });

});

</script>

</head>
<body>

<div>
        <div id="nav"></div>
        <div id="slideshow">
               <img src="#1.jpg"/>
               <img src="#2.jpg"/>
               <img src="#3.jpg"/>
                ....
        </div>
</div>
</body>

mi codigo

Código:

<head>
<style type="text/css">
.oculto{display:none
	}
	
#slideshow { height: 565px; 
             width: 700px; 
			 margin: 0px }
			 
#slideshow img { padding: 0px;   
                 border:none; 
		 background-color: #FFF; }
				 
#nav { margin: 5px; }

#nav a { margin: 5px; padding: 3px 5px; border: 1px solid #ccc; background:
 
#fc0; text-decoration: none }

#nav a.activeSlide { background: #ea0 }

#nav a:focus { outline: none; }
				 
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

<script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script>

<script type="text/javascript" src="script/jquery.cycle.all.js"></script>


<script type="text/javascript">

$(function() {

    $('#slideshow').cycle({
        fx:  'fade'
42		speed:       200,
        timeout:     3000,
        pager:      '#nav',
        pagerEvent: 'mouseover',
		pauseOnPagerHover: true
    });

});

</script>
</head>
<body>

<div>

  <div id="slideshow">
      <img src="#1.jpg"/>
      <img src="#2.jpg"/>
      <img src="#3.jpg"/>
       ....
  </div>
  <div id="nav"></div>

</div>
</body>

muchas gracias

Dradi7 · #2 (**permalink**) 31/07/2012, 17:48

Pero si te das cuenta en tu linea de codigo arriba de la 42 al fx: 'fade' le falta la coma

aficcionado · #3 (**permalink**) 31/07/2012, 17:58

vaya error garrafal que hice, muchas gracias dradi
fue al meter el efecto de transición que yo quería, ni me fijé en la coma