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.

Livros lidos: Investimentos, Devoradores de Mortos e Jquery

Hooaaa.

Hoje acho que tô meio animado pra postar aqui no ElMicox. Então vamo aproveitar essa animação e tagarelar.

Andava bastante desanimado pra postar por vários motivos: prequiça, falta de scripts novos, twitter, outros sites meus dando grana e pedindo minha atenção, pouca leitura de outros sites da área, etc.

Aliás, acho que poucos lerão este post. Os blogs de desenvolvimento web andam meio abandonados, quase ninguém mais lê feeds e talz. Até o Webly está com baixíssimo movimento, ninguém mais tem dúvidas, poucos querem ajudar nas dúvidas dos outros. Sei lá… Acho que todo mundo anda sem tempo.

Aliás, o MayronCachina, uma boa alma, vai dar um curso grátis de PHP. Se você ainda não souber PHP agora é a hora.

Li vários livros durante meu retiro espiritual aqui do blog. Abaixo mostro 3 que achei bem interessantes:

1) Investimentos: Como Administrar Melhor Seu Dinheiro - do Mauro Halfeld

Muuuuuuuito bom. Quando comecei a ganhar uma graninha boa nos meus sites vi que eu não tava segurando dinheiro nenhum. A grana não rendia. Daí topei com este livro lá na Saraiva. O cara escreve muito bem coisas ótimas pra manejar a grana. Não são coisas de outro planeta que só investidores-viciados conseguem entender.

São coisas pra pessoas normais, classse média, aprenderem a usar melhor e investir melhor o dinheiro.

Ele explica várias daquelas siglas que agente vê no jornal e fica sem entender. Explica os melhores investimentos, explica sobre imóveis e como investir nisso, explica sobre bolsa de valores, etc.

Como já twittavam por aí: “Quem trabalha demais não tem tempo pra ficar rico” hehaeh
Agora sério: O lance do Investimento é você fazer o dinheiro trabalhar pra você. Ter rendimentos que independam do seu trabalho (diretamente) tipo aluguéis, sites, ações, empresas. Assim você terá liberdade de criar novas e novas fontes de renda e finalmente ter a liberdade de escolher se quer continuar sendo funcionário ou não.

2) Devoradores de Mortos - do MICHAEL CRICHTON

É uma historinha muito boa. Ótima. Um dos melhores livros de historinha que eu já li.
“O autor apresenta o mais antigo relato da vida dos vikings: o manuscrito do árabe Ibn Fadlan, de 922. Através deste documento, narra a vida desse povo de uma forma inédita, jamais vista pelos ocidentais.” - Submarino.

Mas o melhor é que o livro é (ou diz ser) baseado em um manuscrito do milênio passado que muitos historiadores confirmam a veracidade. Daí, a galera que gosta de “aventuras medievais” e uns lance meio RPG vai curtir pra caramba o livro e ficar naquela de ’será que aconteceu mesmo? será que é vero?’.

“Ibn Fadlan ficou conhecido por escrever um manuscrito (Kitāb ilā Malik al-Saqāliba (كتاب إلى ملك الصقالبة)) sobre suas viagens como embaixador do Abássida al-Muqtadir para a terra dos búlgaros.

Por muito tempo, havia apenas uma versão incompleta dos manuscritos, espalhada por verbetes no dicionário geográfico escrito por Yaqut al-Hamawi, publicado em 1823.[1] Porém em 1923, o estudioso Zeki Validi Togan encontrou num museu em Meshed o manuscrito MS 5229, que continha entre outras coisas a versão mais completa do escrito de Ibn Fadlan.[2]” - Wikipedia

Destaque para as passagens mostrando a porqueira da época, a putaria da época, os monstros marinhos (que alguns historiadores acreditam ser baleias), anões adivinhos, uma raça humana desconhecida, o espírito lutador dos nórdicos, tabernas, etc.

Pra variar, fizeram uma bosta de um filme baseado neste livro: O 13o Guerreiro. É lógico que o filme não mostra nem 40% do livro e é um fracasso total.

Compre este livro, não costuma ser mais de 20 conto.

3) Livro Jquery do Maujor

Bom, esse aqui nem precisa falar muito né. É um livro técnico explicando como usar o biblioteca para javascript Jquery.
Se você é novato na área e não entende muito de javascript e nem de jquery, este livro vai te ajudar.

O Maujor explica detalhadamente (quase) todas os métodos, propriedades e funções do jquery e dá um monte de exemplos. Muito bom pra se usar quando se precisa de referência em Jquery.

Eu só não gostei muito da forma repetitiva que as funções/métodos são mostrados e nem da forma como foram apresentados os seletores.
Como o Maujor é um grande mestre do CSS, achei que os seletores seriam mostrados como foram no site CSS dele, onde está mais fácil de entender e com menos texto.

No restante o livro é show.

(Obs.: Como nunca citei livros aqui no blog, alguns podem pensar que eu quero só ganhar uma grana extra com comissão. Bom, o ElMicox não rende nem 1 centavo por mês e acredito que com estes livros não será diferente.
As indicações do livro são mais pra voltar o pique do blog já que tô sem scripts novos. Se alguém comprar através da minha indicação, bem, senão, amém. Ganho MUITO mais grana com meus outros blogs/sites.
A idéia é mesmo mostrar livros bons que li.)

Gostou da dica acima? Então clica nos botões de compartilhamento abaixo e me ajude a dica a subir no Google.

Help CHM da API do jQuery, Leilão El Micox e outras notícias

"Ôlha só quem estâ de vôoolta, êle mêêsmo, o Micôx, com notícias quentinhas. É fantâârdigo." - Cid Moreira sobre Nova postagem no El Micox

Ae malucada, comecemos falando sobre a lentidão ao acessar o site do jquery, principalmente quando estamos apressados atrás de uma documentação sobre a api.
Porém há uma luz no fim do tunel. Em uma postagem no grupo de discussões do jQuery em inglês, o senhor Charles (char101) disponibiliza um arquivo .chm (help do windows) para o nosso amado jQuery. Baixem e agilizem suas pesquisas sobre a API. Amém irmãos...

Em seguida mostro 2 dos ótimos layouts feitos para o desafio Webly de layout 2050 que está na reta final. Os caras capricharam.
Só coloquei os 2 que tinham thumbs, mas os todos os layouts ficaram muito bons, dava até pra usar como layout atual hehe. Compensa visitar e depois votar.

Ahora djo falar sobre o leilão do banner no El Micox que rendeu váaarios lances, um melhor que o outro. Chegamos a ótima cifra de R$360,00 por um mês de banner.

Infelizmente, é lógico que "esto non ecxiste, es fruto de la imarrinación del microx".
Mas o leilão não foi de todo ruim. Recebi 1 lance de R$50 e uma doação gratuita (pleonasmo) do grande Tiago Celestino (vivaaa).
O lance que recebi até agora foi de R$50 contos do brodi canha , aeeee. Ainda dá tempo de você participar desta importantíssima competição nacional que está dando o que falar. Vou fechar a bagaça na próxima terça (se eu lembrar).

Pra encerrar esta edição do Micox News, informamos que, como a quantidade de comentários caiu, o leilão só rendeu 1 lance, este blog está encerrando as atividades hoje. Hasta la vista.
(mas que mentira besta)

Gostou da dica acima? Então clica nos botões de compartilhamento abaixo e me ajude a dica a subir no Google.

Accordion Menu (menu sanfona)

Opa pessoal, desculpe o sumiço. Em breve posto os ótimos resultados que tive no meu pedido de ajuda. Muita gente mesmo. Valeus povo.

Agora um tutorialzinho rápido pra saberem que tô vivo e usando JQuery. Convertam-se também! Amém.

Tutorial de como fazer um accordion menu (menu sanfona) rapidamente e de forma não obstrusiva, crossbrowser (IE, FF, OP) e com pouca digitação de código.
Pergunta: "a tradução seria 'menu acordeão' ?!?".

Clique aqui pra ver uma página de demonstração do accordion menu .

Este tutorial foi postado inicialmente no fórum iEvolution. Cadastre-se, contribua, encha de perguntas lá. Vou ficar esperando.
O tuto foi adaptado de uma videoaula do site do oficial do JQuery.

Came to work soldier:

1) Você tem sua página com sua lista dt-dd-dl normal:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
 <title>DL Demo</title>
 <style>
 body { font-family: Arial; font-size: 16px; }
 dl { width: 300px; }
 dl,dd { margin: 0; }
 dt { background: #F39; font-size: 18px; padding: 5px; margin: 2px; }
 dt a { color: #FFF; }
 dd a { color: #000; }
 ul { list-style: none; padding: 5px; }
 </style>
</head>

<body>
<dl>
 <dt><a href="/">jQuery</a></dt>
 <dd>
 <ul>
  <li><a href="/src/">Download</a></li>
  <li><a href="/docs/">Documentation</a></li>
  <li><a href="/blog/">Blog</a></li>

 </ul>
 </dd>
 <dt><a href="/discuss/">Community</a></dt>
 <dd>
 <ul>
  <li><a href="/discuss/">Mailing List</a></li>
  <li><a href="/tutorials/">Tutorials</a></li>

  <li><a href="/demos/">Demos</a></li>
  <li><a href="/plugins/">Plugins</a></li>
 </ul>
 </dd>
 <dt><a href="/dev/">Development</a></dt>
 <dd>
 <ul>

  <li><a href="/src/">Source Code</a></li>
  <li><a href="/dev/bugs/">Bug Tracking</a></li>
  <li><a href="/dev/recent/">Recent Changes</a></li>
 </ul>
 </dd>
</dl>
</body>
</html>

2) Você baixa o jquery.

3) Você inclui o arquivo externo do jquery no seu documento.

<script type="text/javascript" src="jquery.js"></script>

4) Adiciona este script ao head da sua página:

 <script>
 $(document).ready(function(){
  $("dd:not(:first)").hide();
  $("dt a").click(function(){
   $("dd:visible").slideUp("slow");
   $(this).parent().next().slideDown("slow");
   return false;
  });
 });
 </script>

5) Prontim. Totalmente não obstrusivo, limpo, rápido, bonito, etc etc blábláblá.

Aposto que se interessou pela JQuery heim? Veja uma introdução sobre o bixo aqui também (link pedido descaradamente pelo meu 'padrinho' no jquery Vitor Prado heuaeh - mas o site do cara é bom mesmo pra aprender. Passeia lá).

Dúvidas? Manda pro fórum que agente gosta de responder. Somos doidos. Eu não respondo por email :-)

Gostou da dica acima? Então clica nos botões de compartilhamento abaixo e me ajude a dica a subir no Google.