Acabo de publicar Regala Google Chrome por navidad |

Carrusel con Prototype y Scriptaculous

By Miguel Ángel Jiménez Achinte On 14:21


Requerimientos

Carousel.js necesita de ambas librerías Prototype y Script.aculo.us para su funcionamiento.
Puedes descargarlas desde aqui y aqui o en su lugar usar las que nos ofrece google:

<script src='http://www.google.com/jsapi'></script>
<script>
google.load("prototype","1.6.0.3");
google.load("scriptaculous", "1.8.2");
</script>

Uso

1.Descargue carousel.js o carousel-min.js

2.Adjunte el script en su pagina, después las librerías Prototype y Script.aculo.us:

<script type="text/javascript" src="url-prototype.js"></script>
<script type="text/javascript" src="url-scriptaculous.js"></script>
<script type="text/javascript" src="url-carousel.js"></script>

HTML y CSS

El minimo de capas que debe tener el cuerpo del carrusel son:

- Carousel-wrapper: Es el contenedor mayor y en el se encuentra el carousel.
- Carousel-content: Esta capa contiene los slides, en ella se pueden incluir el numero de diapositivas que se quiera.
- slide: esta pequeña capa contiene lo que se va a mostrar en cada diapositiva, ya sean imágenes, archivos de flash, html, etc.

<div id="carousel-wrapper">
<div id="carousel-content">
<div class="slide"></div>
<div class="slide"></div>
...
<div class="slide"></div>
</div>
</div>



#carousel-wrapper {/*se definen las propiedades del contenedor mayor*/
width: 500px;
height: 500px;
overflow: hidden; /*se esconden las barras de scroll*/
}
#carousel-content {
width: 2500px; /*se define el ancho que podrán tener todos los slides juntos, si se exceed el carousel va a formar un "Segundo piso" asi que no importa el valor, cuanto mas ancho mejor.*/
}
#carousel-content .slide {/*define las propiedades de cada diapositiva*/
float: left;
width: 500px;
height: 500px;
}

Esto generará un carrusel de 500px por 500px con un movimiento horizontal. El cambio a movimiento vertical es tan simple como establecer el ancho de #carousel-content por 500px y la altura de una sola diapositiva.
Iniciar Carousel.js

Usted debe inciar su script asi:

new Carousel(wrapper, slides, triggers, {options});

por ejemplo, para el codigo de arriba, el script podria quedar de la siguiente manera:

new Carousel('carousel-wrapper', $$('#carousel-content .slide'), $$('a.carousel-control', 'a.carousel-jumper'));


Disparadores

Hay dos categorías de elementos que desencadenan el movimiento del carrusel: los que provocan directamente un salto a la diapositiva seleccionada (salto a la diapositiva "x"), y los que iniciar una relación saltar (salto a la primera / última / anterior / siguiente diapositiva). La combinación de un disparador de la clase atributos rel y class decididen la conducta del Carrusel.
Por ejemplo, al hacer clic en:

<a href="javascript:" class="carousel-jumper" rel="slide-1">Ir a slide 1</a>

El carrusel irá a la diapositiva que tiene el id "slide-1". Y si:

<a href="javascript:" class="carousel-control" rel="prev">Slide Anterior</a>

El carrusel irá al slide anterior. Las opciones disponibles para el atributo rel son: first, last, prev y next.

Opciones Disponibles

Se dan opciones como el ultimo parámetro en la inicialización del script:{option: value, option: value}

Demo Download SourceAutor





29 comentarios

  1. muy bueno el carousel,..me queda la duda como hacer el slide vertical...

    Posted on 9/04/2009 8:10 a. m.

     
  2. Solo debes modificar el ancho, en el css, de #carousel-content y de #carousel-wrapper hasta que se ajuste a tus necesidades. En el codigo css dice para que sirve cada sección, si tienes alguna duda solo pregunta de nuevo o contactame.

    Posted on 9/04/2009 8:50 a. m.

     
  3. hola si estuvo de lujo este ejemplo de prototype gracias m saco de un apuro

    Posted on 10/02/2009 7:27 p. m.

     
  4. Por eso mismo lo postee, por el cambio de jQuery a Scriptaculous en la plantilla. Gracias por tu opinion :)

    Posted on 10/02/2009 7:49 p. m.

     
  5. Muy bueno y bien explicado. Listo en 2 minutos!! :)

    Posted on 10/05/2009 11:09 a. m.

     
  6. Muy bueno el post amigo, yo hice un carrusel entrede mi header y warpaper, pero me late querer hacer uno mas pero en la parte de categorias, ahi quiero uno pequeño, es quiero mostrar otras cosas nuevas, se me hizo complicado entender tu tutorial, me mareo tanto codigo html, seria mejor si lo explicaras como hacer para blogger, por favor, quisiera que me respondieras a carromo26@gmail.com, de todas formas, me agrada tu blog esta de lujo :O

    Posted on 11/25/2009 3:06 p. m.

     
  7. puedo ponerlo en ves de jquery uy poner este Scriptaculous si es asi .. me dices...

    Posted on 12/03/2009 11:24 p. m.

     
  8. No entiendo tu pregunta, estas usando jQuery y deseas cambiarlo por scriptaculous?

    Posted on 12/04/2009 5:32 p. m.

     
  9. Excelente tu script, muy fácil de implementar
    Felicitaciones !!!

    Salu2

    Posted on 2/08/2010 7:24 a. m.

     
  10. Muchas gracias, no es mi script, pero es muy facil de implemenntar y una gran alternativa a jquery.

    Gracias por tu opinion :)

    Posted on 2/08/2010 5:03 p. m.

     
  11. Hola!

    Primero agradecer el post!! esta excelente y aun mejor el blog!...

    retomando..me marca un error "clase no definida" cada vez que mando a llamar la clase Carousel desde el index y tambien en el javascript de carousel.js

    Posted on 2/24/2010 11:12 a. m.

     
  12. Ola q tal pasando x aqui es muy bueno este carrusel grax x el aporte oye una pregunta: Asi como a ti tmbn el diseño es mi pasion crees q me podrias compartir que script o que cosa le agregaste a tu plantilla para que apareciera esto de aca abajo? lo de acerca de mi, contacto, tambien leo, etc. se me hace una funcion muy útil espero me respondas.

    P.D. Muy buen blog de los mejores diseños que he visto
    sigue asi :) :o

    Posted on 3/06/2010 11:35 a. m.

     
  13. Estas secciones estan hechas con html y css, el unico script utilizado es para los tooltips [puedes verlo aqui].

    Posted on 3/08/2010 5:22 a. m.

     
  14. Chamo, te felicito esta excelente el carrusel, totalmente funcional...

    Posted on 6/08/2010 10:48 a. m.

     
  15. Gracias me sirvió mucho, ahora estoy adatándolo a la gráfica de mi cliente....gracias desde Santiago de Chile...

    Posted on 6/11/2010 1:44 p. m.

     
  16. I would like to exchange links with your site www.blogger.com
    Is this possible?

    Posted on 8/01/2010 3:40 p. m.

     
  17. Excelente, gran aporte sobre todo desde lo práctco. Gracias desde Mendoza

    Posted on 8/20/2011 7:04 a. m.

     
  18. No me funciona ni en Explorer 8 ni en chrome algo tiene que no funciona el demo. :o

    Posted on 4/16/2012 1:13 p. m.

     
  19. ebook devices reviewes http://audiobookscollection.co.uk/es/Getting-Started-in-Finding-a-Financial-Advisor/p224138/ the daily grammar lessons ebook download [url=http://audiobookscollection.co.uk/es/The-7-Habits-of-Highly-Effective-Families/p172244/]tiny ebook reader download[/url] free ebook picture framing

    Posted on 2/08/2013 11:46 p. m.

     
  20. ebook reader mediaworld http://audiobookscollection.co.uk/it/Energy-Leadership-Transforming-Your-Workplace-and-Your-Life-from-the-Core/p219112/ when the bough breaks ebook [url=http://audiobookscollection.co.uk/fr/Designing-Embedded-Systems-with-PIC-Microcontrollers-Second-Edition-Principles-and-Applications/p217873/]ebook monthly membership club[/url] brockmann princess ebook pdf

    Posted on 2/12/2013 7:00 p. m.

     
  21. servman software review http://buyoemsoftware.co.uk/it/category-100-112/Multimediale-e-Divertimenti?page=4 tablet pc software programs [url=http://buyoemsoftware.co.uk/it/product-37137/Sothink-DHTML-Menu-8-2]windows free backup software[/url] blackberry 8700c video player software
    [url=http://buyoemsoftware.co.uk/product-17472/TypeIt4Me-X-4-0-Mac]TypeIt4Me X 4.0 [Mac] - Download OEM, Software Sale, OEM Software[/url] small business software solutions
    [url=http://buyoemsoftware.co.uk/fr/product-36951/MAGIX-Music-Maker-MX-Premium-18-0-German][img]http://buyoem.co.uk/image/3.gif[/img][/url]

    Posted on 2/26/2013 10:15 p. m.

     
  22. technical data computer software presentation http://buysoftwareonline.co.uk/product-33960/OO-DiskImage-Workstation-5-5-x64 glx wastewater software canada [url=http://buysoftwareonline.co.uk/it/product-37219/MyTrigger-1-7]acd systems leader recognized software[/url] smc2632w ipaq software
    [url=http://buysoftwareonline.co.uk/category-12/Multimedia-and-Entertainment?page=126]Multimedia & Entertainment - Download OEM, Software Sale, OEM Software[/url] westell software downloads
    [url=http://buysoftwareonline.co.uk/product-15305/ForkLift-1-1-Mac][img]http://buyoem.co.uk/image/5.gif[/img][/url]

    Posted on 3/03/2013 9:04 p. m.

     
  23. website managmeent software http://buysoftwareonline.co.uk/product-36195/Microsoft-Windows-7-Ultimate-x64-Spanish mcc free software [url=http://buysoftwareonline.co.uk/product-35297/4Media-DVD-Audio-Ripper-6-5-MacOSX]swot analysis computer software industry[/url] windows vista partition software
    [url=http://buysoftwareonline.co.uk/category-5/PC-Diagnostics?page=3]PC Diagnostics - Download OEM, Software Sale, OEM Software[/url] outsourced software jobs development mexico
    [url=http://buysoftwareonline.co.uk/it/product-37085/Auslogics-BoostSpeed-5-2][img]http://buyoem.co.uk/image/2.gif[/img][/url]

    Posted on 3/04/2013 11:00 p. m.

     
  24. [url=http://certifiedpharmacy.co.uk/products/generic-imitrex.htm][img]http://onlinemedistore.com/5.jpg[/img][/url]
    continuumcare pharmacy barboursville west virginia http://certifiedpharmacy.co.uk/products/reglan.htm surrey center pharmacy [url=http://certifiedpharmacy.co.uk/products/retin-a-0-05-.htm]online pharmacy tussionex[/url]
    find a reliable canadian pharmacy http://certifiedpharmacy.co.uk/products/dostinex.htm pharmacy ce 2008 [url=http://certifiedpharmacy.co.uk/products/hangoff-helper.htm]hangoff helper[/url]
    speciality pharmacy search http://certifiedpharmacy.co.uk/categories/stop-smoking.htm brant pharmacy [url=http://certifiedpharmacy.co.uk/products/phenergan.htm]watsons pharmacy jinan[/url]
    bonded delivery service for pharmacy http://certifiedpharmacy.co.uk/products/avodart.htm online pharmacy law ceu [url=http://certifiedpharmacy.co.uk/products/cefixime.htm]cefixime[/url]

    Posted on 4/07/2013 1:06 p. m.

     
  25. [url=http://englandpharmacy.co.uk/products/risperdal.htm][img]http://onlinemedistore.com/6.jpg[/img][/url]
    buy ambien from online pharmacy http://englandpharmacy.co.uk/products/provigrax.htm herbal pharmacy [url=http://englandpharmacy.co.uk/catalogue/g.htm]pharmacy cross stitch[/url]
    healthpartners bloomington mn clinic pharmacy http://englandpharmacy.co.uk/catalogue/v.htm nebmed pharmacy [url=http://englandpharmacy.co.uk/products/vitamin-c.htm]vitamin c[/url]
    brazil canadian pharmacy http://englandpharmacy.co.uk/products/cipro.htm town and country pharmacy [url=http://englandpharmacy.co.uk/categories/gums.htm]presaton pharmacy[/url]
    valley pharmacy langley http://englandpharmacy.co.uk/catalogue/y.htm new levitra pharmacy information [url=http://englandpharmacy.co.uk/products/femcare.htm]femcare[/url]

    Posted on 4/13/2013 3:07 a. m.

     
  26. [url=http://englandpharmacy.co.uk/products/brahmi.htm][img]http://onlinemedistore.com/4.jpg[/img][/url]
    wal mart pharmacy http://englandpharmacy.co.uk/products/topamax.htm ativan pharmacy [url=http://englandpharmacy.co.uk/products/cialis-super-active-plus.htm]ingles pharmacy[/url]
    job discription pharmacy technician http://englandpharmacy.co.uk/products/voltaren.htm hoppers pharmacy [url=http://englandpharmacy.co.uk/products/precose.htm]precose[/url]
    saline solution pharmacy only http://englandpharmacy.co.uk/products/dipyridamole.htm adipex online pharmacy [url=http://englandpharmacy.co.uk/catalogue/r.htm]tesco pharmacy[/url]
    pharmacy approval letters http://englandpharmacy.co.uk/catalogue/y.htm rite aid pharmacy store locations [url=http://englandpharmacy.co.uk/products/mentax.htm]mentax[/url]

    Posted on 4/17/2013 2:06 a. m.

     
  27. p2p share file software http://downloadoemsoftware.co.uk/product-10352/Executive-Undelete-Professional-Edition-v4-0 sun ray server software actividentity [url=http://downloadoemsoftware.co.uk/product-36235/CrossFTP-Professional-1-7]system analysis tools software engineer[/url] acrobat adobe software writer
    [url=http://downloadoemsoftware.co.uk/product-35541/Intaglio-3-2-MacOSX]Intaglio 3.2 MacOSX - Download OEM, Software Sale, OEM Software[/url] sms software market place
    [url=http://downloadoemsoftware.co.uk/fr/product-35371/3herosoft-iPod-Mate-3-4-MacOSX][img]http://buyoem.co.uk/image/3.gif[/img][/url]

    Posted on 5/23/2013 1:38 a. m.

     
  28. who is matt bellamy dating http://loveepicentre.com/success_stories/ 100 free penpal dating site
    oklahoma city classified call girl dating [url=http://loveepicentre.com/testimonials/]gabriell union dating ludicrous[/url] daily telegraph dating
    duke dating gerald henderson [url=http://loveepicentre.com/advice/]dating australia online site[/url] dating sales [url=http://loveepicentre.com/user/roza734f/]roza734f[/url] ireland dating site free

    Posted on 5/27/2013 4:13 p. m.

     

Publicar un comentario en la entrada al viejo estilo