wSlide - plugin para jQuery que nos permitirá transformar cualquier lista en un Slide

Scripts, Plugin, Diseño Web

wslide.jpg

wSlide, un plugin para jQuery que nos permitirá transformar cualquier lista en un Slide, utilizando solo texto o inclusive con nuestras imágenes. Las paginaciones se pueden generar automáticamente, o no. wSlide nos permite obtener una personalización muy fácil mediante CSS, elegir entre diferentes direcciones en cuanto a los efectos al mostrar un nuevo contenido, especificar la duración que tendrá cada transición, etc. ¿para que puede ser útil? Bueno para ganar espacio en nuestras paginas Web, y si poseemos listas muy largas de leer en nuestro sidebar, wSlide nos ayudara a reducirlo y ganar un poco mas espacio. Pero bueno, la funcionalidad que podremos darle a este plugin es bastante amplia, a mí, ya se me han ocurrido bastantes espacios donde poder utilizarlo.
Mas info y descargas webinventif
Algunos ejemplos

Instalación

Primero descargamos nuestro plugin, el cual encontraremos en dos versiones, y podremos descargar cualquiera de ellas, sea cual sea la que elijas nos servirá.

También será necesario descargar jQuery

Ahora llamamos a nuestro plugin wSlide y nuestra librería jQuery, agregando el siguiente código dentro de nuestra etiqueta < head > …..< / head >. Donde también incluiremos una porción de código para accionar nuestros efectos.

PLAIN TEXT
JavaScript:
  1. <script type="text/javascript" src="jquery-latest.pack.js"></script>
  2. <script type="text/javascript" src="jquery.wslide.js"></script>
  3.     <script type="text/javascript" charset="utf-8">
  4.             $(document).ready(function(){
  5.                 $("#slide").wslide({
  6.                     width: 450,
  7.                     height: 200
  8.                 });
  9.             });
  10.         </script>

Agregamos un poco de CSS

PLAIN TEXT
CSS:
  1. #slide li{
  2.                 background: #000000;
  3.                 padding: 5px;
  4.                 color: #ffffff;
  5.             }
  6.             #slide-menu a.wactive{
  7.                 padding: 0px 2px;
  8.                 background: #000000;
  9.                 color: #eeeeee;
  10.             }

Nuestra estructura o contenido (slide)

PLAIN TEXT
HTML:
  1. <ul id="slide">
  2.                     <li>Lorem ipsum ad delenit omittam his, habeo justo ad sea! Eu mel volumus noluisse disputando! Cu prompta moderatius sit? Et iuvaret suavitate vix, ne eum audiam luptatum, nam in epicuri adipisci scripserit.</li>
  3.                     <li>His ad copiosae erroribus, has eu mucius cotidieque concludaturque. No appareat iracundia complectitur eum, pri an euismod corrumpit, zzril animal mnesarchum id sed. Ex duis erat persius est, ne vis assum timeam tamquam, rebum quaeque civibus in qui. Populo animal dissentiunt in eos. Ludus molestie ut vix, eum eros lobortis id.</li>
  4.                     <li>Quodsi dissentiunt cu eos, duo cu clita veritus, mei quot velit scriptorem ea? At kasd dolorum facilisi per, te discere inermis patrioque duo. Integre nominati sapientem has et? Ad erat essent ius, pro quando menandri definitiones te?</li>
  5.                     <li>Indoctum moderatius cum te? In dictas hendrerit eam. Vel meliore fuisset perpetua et? Nibh debitis erroribus mea te, sed cu virtute volutpat periculis. Omnium integre philosophia ut quo, et detracto honestatis sed.</li>
  6.                     <li>In eum natum facete, in eum vero vidit consectetuer. Alii oportere signiferumque id nam, mandamus recteque pro at? Eu perpetua sadipscing pro, pro omittam invenire ex. Sit no nemore omnium accommodare, sit in idque inani! Ut quo ubique dictas nostrud. Eum at quis pericula repudiandae, usu ne ornatus explicari vulputate.</li>
  7.  
  8.                     <li>Simul tantas nostrum at has, his id postulant cotidieque, in eum omnium mediocrem moderatius! Pro oratio scriptorem ei, causae accusata est te. Ex quod nonummy has, usu et omnium probatus deterruisset! Ea impetus percipit takimata has. No qui probo dolore convenire. Et conceptam intellegat sententiae sit, has ex tota nobis.</li>
  9.                     <li>Nostrum volutpat cu ius. Sed affert aliquyam ea? An quo verear accumsan voluptaria. Id graeci audire sit.</li>
  10.                     <li>Pri petentium definitiones ad? Utinam delenit eos ex? Vim ea discere officiis conclusionemque, ad his lorem ponderum praesent? Ut vim consul timeam iracundia, mel civibus posidonium et, nam ea audire evertitur. An docendi pertinacia eum, utroque officiis his ne?</li>
  11.                 </ul>

Compartelo

  1. User Gravatar

    wSlide, plugin jquery qui va faire glisser vos listes said,

    Wrote on January 31, 2008 @ 7:10

    [...] Explicaciones en español por Nikko. | Explanations in Spanish by Nikko. (Thanks !) [...]

  2. User Gravatar

    julien said,

    Wrote on January 31, 2008 @ 7:12

    Bonjour, un grand merci pour ton petit coup de pouce ;)

  3. User Gravatar

    casbah said,

    Wrote on January 31, 2008 @ 8:17

    hola,
    gracias ante todo, pero una pregunta, soy un aprendiz en esto, he copiado, pegado y bajado los js, los codigos y he visitado la pagina de ejemplos y no se sale, tengo metidos los scripts y en el html se ven los distintos listas con sus caracteristicas pero no me crea el slide, que me puede faltar?

    gracias

  4. User Gravatar

    simok said,

    Wrote on January 31, 2008 @ 13:42

    Me gusto tanto por su estilo como su funcionabilidad ¿se puede incorporar a wordpress? ¿Como?

  5. User Gravatar

    Nikko said,

    Wrote on January 31, 2008 @ 13:59

    Julien: j'aime le wslide beaucoup plugin. J'ai beaucoup d'idées de la façon dont et d'où l'employer. Bon travail. I beaucoup remercient également du lien vers l'explication dans l'Espagnol original de votre poteau.

    Thanks :)

  6. User Gravatar

    Infected said,

    Wrote on January 31, 2008 @ 18:46

    Muchas gracias por este recurso nikko, sin duda un gran trabajo el que ha hecho Julien, y a mi más jejeje que soy fan de usar este tipo de cosas xP

  7. User Gravatar

    Xcitingart » Wslide, crea un slide a partir de una lista said,

    Wrote on January 31, 2008 @ 19:22

    [...] Link a Wslide             Vía | Xyberneticos [...]

  8. User Gravatar

    Nikko said,

    Wrote on January 31, 2008 @ 20:54

    casbah: justo ahora en el blog oficial han agregado un enlace de descarga de los ejemplos. el cual podrás bajar para verlo bien por dentro y ya funcionando, si te haz salteado algo, ese archivo con los ejemplos que vemos online te hará fácil descubrir que fue.. Bájalo y míralo...”sigue” el enlace que dice mas info y descargas q acompaña este post...

  9. User Gravatar

    Nikko said,

    Wrote on January 31, 2008 @ 20:56

    simok: si puedes implementarlo en Wordpress, siguiendo estos mismo pasos. Las etiquetas < head > ...< / head >las encontraras en tu archivo header.php de tu theme...y luego sigue solo los demás pasos ...

  10. User Gravatar

    Nikko said,

    Wrote on January 31, 2008 @ 20:57

    Mauricio : creeme que ya lo habia notado jejeje un abrazo bro ...

  11. User Gravatar

    Mario said,

    Wrote on February 1, 2008 @ 0:01

    Hay forma de que haga la transición automáticamente sin clickear en los números?

    Muchas gracias Nikko por tus aportes.

    Mario.

  12. User Gravatar

    Xavi said,

    Wrote on February 2, 2008 @ 8:37

    Hey!
    muy bueno esto... me ha funcionado perfectamente y se ha adaptado a lo que quería..

    un saludo!

  13. User Gravatar

    John Zárate said,

    Wrote on February 18, 2008 @ 5:00

    hola,

    yo igual quisiera saber si se puede hacer que pareca diapositiva se vallan pasando los numeros cada x tiempo...

    ojala alguien responda please :D

Seguir comentarios por RSS · TrackBack URI

Nombre: (Necesario)

E-mail: (Necesario)

Website:

Comment: