Aplicando efeito fade ciclicamente a um conjunto de imagens com jQuery

Senhores.

Precisei aplicar um efeito de fade para fazer transição entre várias imagens de uma galeria. Pra isso eu sempre usava o velho plugin jQuery cycle, mas dessa vez o bixo não ajudou.

Porém o jQuery Cycle dá uma modificada em propriedades como top e width das imagens que não estava me sendo útil. Além disso, ele aplica o efeito em imagens que ainda não estão carregadas, o que fica feio pra caramba.

Como eu precisava de algo simples e não de todas as funcionalidades do jQuery Cycle preferi programar rapidinho esta transição.

Meu código, atualmente é só pra fade, mas quem entende de jQuery sabe que é só mudar o nome do efeito que está lá na definição do fadeInterval.

Outro benefício do meu código é que ele não exibe imagens ainda não carregadas.

O código está abaixo:

function micoxFadeCycle($targetJqObj, imgArr, waitTime){ //by elmicox.blogspot.com var $targetJqObj = (typeof $targetJqObj=='string') ? $($targetJqObj) : $targetJqObj; var waitTime = waitTime ? waitTime : 3000; var loadedcount=0, $imgAtual, $first, fadeInterval; var putImages = function(imgArr){ var i, $img, $notLoaded; $notLoaded = $('<div class="notLoaded" style="height:0px; overflow:hidden; opacity:0" /> ').appendTo('body'); for(i=0, imLen = imgArr.length; i<imlen ; i++){ $img = $('<img src="'+ imgArr[i] +'" alt="pos-'+i+'" />').appendTo($notLoaded); if($img[0].complete){ prepareCycle.call($img[0]); }else{ $img.on('load',prepareCycle); } } $imgAtual = $first = $targetJqObj.find('img').first(); } var prepareCycle = function(){ $(this).prependTo($targetJqObj); //também removeu da div notLoaded loadedcount++; if(loadedcount==3){ fadeInterval = setInterval(function(){ $imgAtual.fadeOut('slow'); var $prev = $imgAtual.prev('img'); if($prev.length==0){ $prev = $first;} $prev.fadeIn('slow',function(){ $imgAtual = $(this) }); },waitTime) } } putImages(imgArr); }

Modo de uso: <div class='painel'> <img src='img1.jpg' alt='Foto Casamento' /> </div> <script> var alvo = $('.painel'); var imagens = Array('img2.jpg','img3.jpg'); micoxFadeCycle(alvo, imagens); </script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Site onde apliquei: www.robsonlazzari.com.br

Dúvidas? É só comentar que eu respondo.

//Esse blogger tá uma bosta pra postar códigos. Gostou da dica acima? Então clica nos botões de compartilhamento abaixo e me ajude a dica a subir no Google.