Você está na página 1de 6

Como criar um slideshow usando Jquery e o Plugin Cycle em 3 minutos

Com o plugin cycle do jQuery possvel criar diversos tipos de slideshows, sem saber javascript, em 3 apenas minutos. Sem exagero algum, se dvida disso, leia o post todo, depois deixe um miojo na gua fervendo enquanto faz o slideshow e se queimar pode me mandar um email me xingando. O plugin bem leve ( 10kb ) e pode ser baixado no aqui ou no site do plugin (l pode ter verses mais novas). E vamos aos cdigos. Invoque os scripts dentro da tag head da sua pgina: <script type="text/javascript" src="cycle.js" ></script> <script type="text/javascript" src="jquery.js" ></script>

1 2

Voc pode baixar o cycle aqui e o jquery aqui. Para as imagens no serem mostradas antes do load total da pgina, coloque a seguinte linha de cdigo no seu css: 1 2 3 4 5 6 dv.pics { display: none; } div.pics img { height: 200px; // altura das imagens width: 300px; // largura das imagens overflow:hidden; // limitando a div }

Escreva o html: 1 2 3 4 5 6 7 <div class="pics" id="galeria1"> <img src="01.jpg" alt="Teste <img src="02.jpg" alt="Teste <img src="03.jpg" alt="Teste <img src="04.jpg" alt="Teste <img src="05.jpg" alt="Teste </div> de de de de de JQuery" /> JQuery" /> JQuery" /> JQuery" /> JQuery" />

E depois s brincar com as opes do cycle : Primeiro exemplo: 1 2 3 <script type="text/javascript"> $(document).ready(function() { $('#galeria1').cycle({

4 5 6 7 8

fx:'scrollLeft', speed: 3000 }); }); </script>

O Speed a velocidade de transio, fx o efeito. Alm desse efeito existem mais 27 efeitos: blindX, blindY, blindZ, cover, curtainX, curtainY, fade, fadeZoom, growX, growY, scrollUp, scrollDown, scrollLeft, scrollRight, scrollHorz, scrollVert, shuffle, slideX, slideY, toss, turnUp, turnDown, turnLeft, turnRight, uncover, wipe e zoom Segundo exemplo, com play e pause: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 <script type="text/javascript"> $(document).ready(function() { $('#galeria2').cycle({ fx: 'growX', speed: 3000 }); $('#pauseButton').click(function() { $('#galeria2').cycle('pause'); }); $('#resumeButton').click(function() { $('#galeria2').cycle('resume'); }); }); </script>

Pausar Continuar Existem diversas outras opes como boto anterior e prximo, paginao, etc. Segue abaixo a lista de opes (em ingls). Opo fx timeout continuous speed speedIn speedOut next prev prevNextClick pager pagerClick Valor O que faz? milliseconds between slide transitions (0 to disable auto advance) true to start next transition immediately after current one completes speed of the in transition speed of the out transition id of element to use as click trigger for next slide id of element to use as click trigger for previous slide callback fn for prev/next clicks : function(isNext, zeroBasedSlideIndex, slideElement) id of element to use as pager container callback fn for pager clicks: function(zeroBasedSlideIndex, slideElement)

fade one of: fade, shuffle, zoom, scrollLeft, etc 4000 0

1000 speed of the transition (any valid fx speed value) null null null null null null null

Opo pagerEvent before after end easing easeIn easeOut shuffle animIn animOut cssBefore cssAfter fxFn height startingSlide sync random fit pause autostop autostopCount delay slideExpr cleartype nowrap

Valor

O que faz? callback fn for building anchor links transition callback (scope set to element to be shown) transition callback (scope set to element that was shown) callback invoked when the slideshow terminates (use with autostop or nowrap options) easing method for both in and out transitions easing for in transition easing for out transition coords for shuffle animation, ex: { top:15, left: 200 } properties that define how the slide animates in properties that define how the slide animates out properties that define the initial state of the slide before transitioning in properties that defined the state of the slide after transitioning out function used to control the transition zero-based index of the first slide to be displayed true if in/out transitions should occur simultaneously true for random, false for sequence (not applicable to shuffle fx) force slides to fit container true to enable pause on hover true to end slideshow after X transitions (where X == slide count) number of transitions (optionally used with autostop to define X) additional delay (in ms) for first transition (hint can be negative) expression for selecting slides (if something other than all children is required) true if clearType corrections should be applied (for IE) true to prevent slideshow from wrapping

click event which drives the pager navigation null null null null null null null null null null null null 0 1 0 0 0 0 0 0 null 0 0

pagerAnchorBuilder null

auto container height

Outros exemplos e uma documentao maior pode ser visto no site do plugin.