Entrar

como utilizar en el Html el Plugin de jquery

carolquinta · · Solicitar retirada
holaaa
Soy nueva en el uso de jquery y de ahí mi pregunta. ¡¡¡si alguien me puede ayudar!!!!
Me he descargado el plugin de jquery v1.8.2 y ahora necesito aplicarlo en el HTML, mi intención es hacer un slider con paginación pero no doy con ello.
gracias de antemano..........
skaparate · · Solicitar retirada
Hola:

Antes que nada: ¿cuánto sabes de programación en Javascript o, en su defecto, jQuery? Si la respuesta es nada, entonces va a ser difícil entender lo que te podamos explicar :). Lo mejor que puedes hacer es comenzar por el tutorial de Javascript que existe en CCTW. Necesitas aprender a pensar con lógica para poder desarrollar tu misma un plugin (además de conocer el lenguaje de programación).

Si no entiendes algo del tutorial, entonces no dudes en preguntar en el foro, de lo contrario no avanzarás mucho :).

Saludos.
carolquinta · · Solicitar retirada
gracias por tu pronta contestación....
el caso es que hasta ahora todo lo he hecho con html puro y duro de dreamweaver y las animaciones las hacía en Flash y con gifs de photoshop, pero claro, el flash ya nada con eso del castigo de Google y como parece que con jquery es muy fácil quiero ponerme a ello.
por eso preguntaba como hacer ese slider con paginación, he encontrado en http://jquery.malsup.com/cycle/pager.html el efecto que deseo hacer y el código que me marca es:
$('#slideshow').before('<div id="nav">').cycle({ fx: 'turnDown', speed: 'fast', timeout: 3000, pager: '#nav' });

y aunque no lo entiendo, no consigo aplicarlo en el html para que funcione

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

<script type="text/javascript">
$('#slideshow').before('<div id="nav">').cycle({
fx: 'scrollLeft',
speed: 'fast',
timeout: 3000,
pager: '#nav'
});
</script>

</head>

después he realizado en el body:
<body>
<div id="slideshow">
<img src="images/receptivo1.jpg" alt="Cuenca" />
<img src="images/receptivo2.jpg" alt="Cuenca" />
<img src="images/receptivo3.jpg" alt="Cuenca" />
<img src="images/receptivo4.jpg" alt="Cuenca" />
<img src="images/receptivo5.jpg" alt="Cuenca" />
<img src="images/receptivo6.jpg" alt="Cuenca" />
<img src="images/receptivo7.jpg" alt="Cuenca" />
</div>

y sólo consigo que salga una imagen debajo de otra.

espero haberme explicado bien y gracias de nuevo
skaparate · · Solicitar retirada
Aaaaaaaaaaah, ok... en ese caso, tu problema es que primero debes incluir la librería jQuery. Tienes que aprender a diferenciar entre un plugin, que añade funcionalidad al lenguaje o librería, y una librería, que da la funcionalidad básica para hacer "algo".

En fin... siempre que utilices un plugin de jQuery debes incluir la librería antes de utilizar el plugin:

<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>[B]<!-- Esta línea incluye la librería jQuery -->[/B]
    <script type="text/javascript" src="jquery.cycle.all.js"></script>[B]<!-- Esta línea incluye el plugin jQuery que quieres utilizar[/B]
    <script type="text/javascript">
      jQuery(document).ready(function($) { [B]// Con esta línea te aseguras que el script se ejecute cuanto todo el contenido se haya cargado[/B]
        $('#slideshow').before('<div id="nav">').cycle({ [B]// Aquí utilizas el plugin[/B]
          fx: 'scrollLeft',
          speed: 'fast',
          timeout: 3000,
          pager: '#nav'
        });
      });
    </script>
  </head>
  <body>
    <div id="slideshow">
      <img src="images/receptivo1.jpg" alt="Cuenca" /> 
      <img src="images/receptivo2.jpg" alt="Cuenca" />
      <img src="images/receptivo3.jpg" alt="Cuenca" />
      <img src="images/receptivo4.jpg" alt="Cuenca" />
      <img src="images/receptivo5.jpg" alt="Cuenca" />
      <img src="images/receptivo6.jpg" alt="Cuenca" />
      <img src="images/receptivo7.jpg" alt="Cuenca" />
    </div>
  </body>
</html>

Ahora intenta ver el resultado.