Efeitos de slideshow com jQuery Cycle Plugin

Posted on 01/06/2010 by Rodolfo

Como criar efeitos de transição entre fotos sem utilizar flash que comprometem o desempenho da página?

Nessa busca me deparei com um plugin muito interessante do jQuery, o jQuery Cycle Plugin

DEMO

Ele traz diversos efeitos de transição entre imagens, desde faders básicos até efeitos de rotação e zoom, tudo isso com uma excelente velocidade e tamanho

Primeiros Passos

Como requerimento para utilizar o Plugin é necessário referenciar o js do jQuery, que pode ser baixado em http://jquery.com/, e referenciar também o código do jQuery Cycle Plugin que pode ser baixado em http://www.malsup.com/jquery/cycle/

Como ele funciona

Ele fornece um método chamado cycle que é chamado em um container, onde cada elemento filho se tranforma em um slide.

Exemplo .js
  1. <script type=”text/javascript”>
  2. $(document).ready(function() {
  3. $(‘.slideshow’).cycle({
  4. fx: ‘fade’ // Tipo de transição.
  5. });
  6. });
  7. </script>

A estrutura html que devemos montar para que esse codigo funcione adequadamente é simplesmente um container com a classe slideshow e dentro dele imagens que serão os slides

Code Snippet
  1. <div class=”slideshow”>
  2. <img height=”200″ width=”200″ src=”http://cloud.github.com/downloads/malsup/cycle/beach1.jpg”/>
  3. <img height=”200″ width=”200″ src=”http://cloud.github.com/downloads/malsup/cycle/beach2.jpg”/>
  4. <img height=”200″ width=”200″ src=”http://cloud.github.com/downloads/malsup/cycle/beach3.jpg”/>
  5. </div>
Code Snippet
  1. <div style=”border: #000080 1px solid; color: #000; font-family: ‘Courier New’, Courier, Monospace; font-size: 10pt”>
  2. <div style=”background: #000080; color: #fff; font-family: Verdana, Tahoma, Arial, sans-serif; font-weight: bold; padding: 2px 5px”>Code Snippet</div>
  3. <div style=”background: #ddd; max-height: 300px; overflow: auto”>
  4. <ol style=”background: #ffffff; margin: 0 0 0 2em; padding: 0 0 0 5px;“>
  5. <li><span style=”color:#0000ff”>&lt;</span><span style=”color:#a31515″>div</span> <span style=”color:#ff0000″>class</span><span style=”color:#0000ff”>=&quot;slideshow&quot;&gt;</span></li>
  6. <li style=”background: #f3f3f3″> <span style=”color:#0000ff”>&lt;</span><span style=”color:#a31515″>img</span> <span style=”color:#ff0000″>height</span><span style=”color:#0000ff”>=&quot;200&quot;</span> <span style=”color:#ff0000″>width</span><span style=”color:#0000ff”>=&quot;200&quot;</span> <span style=”color:#ff0000″>src</span><span style=”color:#0000ff”>=&quot;http://cloud.github.com/downloads/malsup/cycle/beach1.jpg&quot;/&gt;</span></li>
  7. <li> <span style=”color:#0000ff”>&lt;</span><span style=”color:#a31515″>img</span> <span style=”color:#ff0000″>height</span><span style=”color:#0000ff”>=&quot;200&quot;</span> <span style=”color:#ff0000″>width</span><span style=”color:#0000ff”>=&quot;200&quot;</span> <span style=”color:#ff0000″>src</span><span style=”color:#0000ff”>=&quot;http://cloud.github.com/downloads/malsup/cycle/beach2.jpg&quot;/&gt;</span></li>
  8. <li style=”background: #f3f3f3″> <span style=”color:#0000ff”>&lt;</span><span style=”color:#a31515″>img</span> <span style=”color:#ff0000″>height</span><span style=”color:#0000ff”>=&quot;200&quot;</span> <span style=”color:#ff0000″>width</span><span style=”color:#0000ff”>=&quot;200&quot;</span> <span style=”color:#ff0000″>src</span><span style=”color:#0000ff”>=&quot;http://cloud.github.com/downloads/malsup/cycle/beach3.jpg&quot;/&gt;</span></li>
  9. <li> <span style=”color:#0000ff”>&lt;</span><span style=”color:#a31515″>img</span> <span style=”color:#ff0000″>height</span><span style=”color:#0000ff”>=&quot;200&quot;</span> <span style=”color:#ff0000″>width</span><span style=”color:#0000ff”>=&quot;200&quot;</span> <span style=”color:#ff0000″>src</span><span style=”color:#0000ff”>=&quot;http://cloud.github.com/downloads/malsup/cycle/beach4.jpg&quot;/&gt;</span></li>
  10. <li style=”background: #f3f3f3″> <span style=”color:#0000ff”>&lt;</span><span style=”color:#a31515″>img</span> <span style=”color:#ff0000″>height</span><span style=”color:#0000ff”>=&quot;200&quot;</span> <span style=”color:#ff0000″>width</span><span style=”color:#0000ff”>=&quot;200&quot;</span> <span style=”color:#ff0000″>src</span><span style=”color:#0000ff”>=&quot;http://cloud.github.com/downloads/malsup/cycle/beach5.jpg&quot;/&gt;</span></li>
  11. <li><span style=”color:#0000ff”>&lt;/</span><span style=”color:#a31515″>div</span><span style=”color:#0000ff”>&gt;</span></li>
  12. </ol>
  13. </div>
  14. </div>

Opções

O jQuery Cycle Plugin possui diversas opções para customizar seus efeitos, para isso é necessário sobrescrever suas propriedades default’s

Propriedades
  1. $.fn.cycle.defaults = {
  2. fx: ‘fade’, // name of transition effect (or comma separated names, ex: fade,scrollUp,shuffle)
  3. timeout: 4000,  // milliseconds between slide transitions (0 to disable auto advance)
  4. timeoutFn: null,  // callback for determining per-slide timeout value:  function(currSlideElement, nextSlideElement, options, forwardFlag)
  5. continuous: 0,     // true to start next transition immediately after current one completes
  6. speed: 1000,  // speed of the transition (any valid fx speed value)
  7. speedIn: null,  // speed of the ‘in’ transition
  8. speedOut: null,  // speed of the ‘out’ transition
  9. next: null,  // selector for element to use as click trigger for next slide
  10. prev: null,  // selector for element to use as click trigger for previous slide
  11. prevNextClick: null,  // callback fn for prev/next clicks:  function(isNext, zeroBasedSlideIndex, slideElement)
  12. pager: null,  // selector for element to use as pager container
  13. pagerClick: null,  // callback fn for pager clicks:  function(zeroBasedSlideIndex, slideElement)
  14. pagerEvent: ‘click’, // name of event which drives the pager navigation
  15. pagerAnchorBuilder: null, // callback fn for building anchor links:  function(index, DOMelement)
  16. before: null,  // transition callback (scope set to element to be shown):     function(currSlideElement, nextSlideElement, options, forwardFlag)
  17. after: null,  // transition callback (scope set to element that was shown):  function(currSlideElement, nextSlideElement, options, forwardFlag)
  18. end: null,  // callback invoked when the slideshow terminates (use with autostop or nowrap options): function(options)
  19. easing: null,  // easing method for both in and out transitions
  20. easeIn: null,  // easing for “in” transition
  21. easeOut: null,  // easing for “out” transition
  22. shuffle: null,  // coords for shuffle animation, ex: { top:15, left: 200 }
  23. animIn: null,  // properties that define how the slide animates in
  24. animOut: null,  // properties that define how the slide animates out
  25. cssBefore: null,  // properties that define the initial state of the slide before transitioning in
  26. cssAfter: null,  // properties that defined the state of the slide after transitioning out
  27. fxFn: null,  // function used to control the transition: function(currSlideElement, nextSlideElement, options, afterCalback, forwardFlag)
  28. height: ‘auto’, // container height
  29. startingSlide: 0,     // zero-based index of the first slide to be displayed
  30. sync: 1,     // true if in/out transitions should occur simultaneously
  31. random: 0,     // true for random, false for sequence (not applicable to shuffle fx)
  32. fit: 0,     // force slides to fit container
  33. containerResize: 1,   // resize container to fit largest slide
  34. pause: 0,     // true to enable “pause on hover”
  35. pauseOnPagerHover: 0, // true to pause when hovering over pager link
  36. autostop: 0,     // true to end slideshow after X transitions (where X == slide count)
  37. autostopCount: 0,     // number of transitions (optionally used with autostop to define X)
  38. delay: 0,     // additional delay (in ms) for first transition (hint: can be negative)
  39. slideExpr: null,  // expression for selecting slides (if something other than all children is required)
  40. cleartype: !$.support.opacity,  // true if clearType corrections should be applied (for IE)
  41. cleartypeNoBg: false, // set to true to disable extra cleartype fixing (leave false to force background color setting on slides)
  42. nowrap: 0,     // true to prevent slideshow from wrapping
  43. fastOnEvent: 0,     // force fast transitions when triggered manually (via pager or prev/next); value == time in ms
  44. randomizeEffects: 1,  // valid when multiple effects are used; true to make the effect sequence random
  45. rev: 0,     // causes animations to transition in reverse
  46. manualTrump: true,  // causes manual transition to stop an active transition instead of being ignored
  47. requeueOnImageNotLoaded: true, // requeue the slideshow if any image slides are not yet loaded
  48. requeueTimeout: 250   // ms delay for requeue
  49. };

Alem disso, diversos exemplos de uso do Plugin podem ser vistos no site do projeto:

http://www.malsup.com/jquery/cycle/

Obrigado

Rodolfo

This entry was posted in jQuery and tagged , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>