| Maior acervo de vídeo aulas da web

David CHC
21.266 visitas
1 set 2009
81 Comentários

Não consegue visualizar a vídeo aula?

Criando um Efeito Carrossel com Jquery

Salve Amigos do VAB, David CHC em mais uma vídeo aula de Jquery. Nessa vídeo aula iremos aprender a como criar um efeito carrossel utilizando o jquery e um plugin, o jcarouselLite, com esse plugin fica muito fácil criar esse efeito. Boa Aula.

Jquery - http://jquery.com/
Plugin JCarousel Lite – http://www.gmarwaha.com/jquery/jcarousellite/
Script Criado-
http://www.mxmasters.com.br/comunidade/viewtopic.php?f=54&t=2505&start=0

Você gostou dessa Vídeo Aula, então compartilhe com seus amigos

Comentários

Allan da Rocha

kara otima video aula, muito boa mesmo, muito bem esplicado e detalhado, estão de parabens
Allan da Rocha

finalmente 1º comentario
http://www.portalconectados.com.br João carlos

Ola por favor com eu faço para, usar os outros efeitos que tem no site lá!!! com botoes personalisados igual tem lá….

http://www.videoaulasbrasil.com.br David CHC

@João carlos, eu utilizei um link para fazer as ações, vc pode criar imagens ou no caso do site, usar a tag input do tipo button.

DANILO MARTINS

Sempre quis aprender a fazer isso…!!!
Parabéns + uma vez DAVID CHC e o VAB.
Sugiro que vocês criem uma aula falando sobre sistema de votação ou sistema de enquete online via php e tals muito obrigado!! at ++
Junio Cesar

parabens pela video aula nota 10, estava procurando isso msm.

QUERIA SABER SE FOR POSSIVEL SE AQUELA ANIMACAO QUE TEM NO SITE DAS LOJAS AMERICANAS EMBAIXO USA JQUERY TBM…

http://www.videoaulasbrasil.com.br David CHC

@Junio Cesar, o das lojas americanas é feita em flash, mas existe algo similiar com jquery, nunca teste: http://interface.eyecon.ro/demos/carousel.html

Henrique Mezzomo Malheiros

Não consigo assistir toda a video aula, aparece que terminou quando esta na parte da configuração do CSS da DIV “carrossel”!

http://www.videoaulasbrasil.com.br David CHC

@ Henrique , tente limpar o cache do seu navegador. Se vc estiver usando Internet Explorer basta vc apertar CTRL + F5, caso esteja usando o Firefox, vá em Ferramentas > Opções > Avançado. Escolha a Aba Rede, clique em Limpar agora. Veja se isso resolve.

http://www.tudoacho.com Júlio Barros

Muito boa a video ula, ta de parabéns mais uma vez.

Gostaria de saber se um carrocel no estilo do eencontrado no site : http://www.rosadesaron.com.br na discografia da banda, feito em flash é muito complicado de fazer.

http://www.videoaulasbrasil.com.br David CHC

@Júlio Barros, eu postei alguns comentários acima um efeito parecido com q esse do site do Rosa de Saron feito jquery, dá uma conferida.

http://www.cursopadrao.com.br marcello lima

muito boa mesmo essa video aula estava muito querendo aprender isso agora vou colocar na pratica a aula. valeu mesmo ate mais.
http://www.rdstudioweb,com.br Ricardo Marangoni

Opa David, parabéns cara você como sempre está nota 10..
Gostaria de te fazer um pedido, na empresa em que trabalho estão exisgindo OOP ou POO, mais não entendo nada sobre o assunto.
Se você souber algo e pudesse postar aqui salvaria minha vida
Preciso do básico mesmo.

Vlw e até mais David!!
Leonardo Tavares

Parabéns David!! Ficou Show!
Abraço
http://tutorial-city.net Tutorial City

Mudou pro blip.tv? não foi uma escolha muito legal, o Vimeo é muito melhor em todos os quesitos…. Além disso o vídeo tah parando em um certo ponto, e não dá pra assistir ao tutorial todo.

http://www.videoaulasbrasil.com.br David CHC

@Ricardo Marangoni, vou ver se faço alguma video aula falando um pouco sobre OOP.

@Tutorial City, eu coloquei no blip.tv pq tava demorando muito a renderizar, tava quase 5 horas, e nada, e para não ficar sem video aula eu coloquei no blip.tv, mas ela tá tbm no vimeo. Mas já troquei agora para o vimeo. Se continuar travando, tente limpar o cache do seu navegador.

Charles Potel

Olá David, parabens por mais essa video aula, a forma como vc explica ate anima a gente a aprender mais sobre java, kk !! Gostaria de saber se existe algum manual de referencia sobre Jquery em Portugues, pois os que achei ate hj na internet são em ingles e muita gente fala que em portugues tem pouco material sobre esta framework !! flws
http://tutorial-city.net Tutorial City

Baixei o vídeo no blip.tv e consegui assistir.

Usar plugin de jQuery é basicamente isso aí, nao tem como errar… É legal ter essa possibilidade de usar plugins, por que antigamente era um inferno usar aquelas soluções prontas em javascript pleno, além de serem rígidas eram impossíveis de ser entendidas.

Só duas dicas:
–adicionar as dimensões da imagem no HTML é sempre recomendável, é uma boa prática.
–Pra duplicar uma linha no Notepad++ vc pode usar p atalho CTRL+D. No Aptana é CTRL+ALT+Setinha (setinha pra cima se quiser copiar pra cima e setinha pra baixo se quiser compiar pra baixo).

@CHARLES POTEL
você está confundindo conhaque de alcatrão com catraca de canhão, isso é Javascript e não Java. Javascript está para bola assim como Java está para bolacha

http://www.videoaulasbrasil.com.br David CHC

@Tutorial City, tinha q fazer aqueles scripts monstros pra fazer um efeito simples. Por isso q gosto do jquery, ele facilita muita a vida, e agiliza todo o processo. Sobre as dimensões das imagens, pq muita gente não tem hábito de colocá-las, inclusive eu, mas vi q ele acelera a exibição da imagem. Não sei se alguém reparou, eu usei o doctype do html5. Ohtml5 vindo pra facilitar o desenvolvimento, mais um ponto para semântica, rs. Vlw pelas dicas.

Charles Potel, como o tutorial city falou java é uma coisa e javascript outro, até sei q vc deve sabe disso, queria apenas simplificar, mas é interessante evitar pra não ocorre má interpretações. Sobre o jquery, vc encontra bastante tutorial em português, claro q é interessante sempre olhar o site do jquery pra ver separadamente as coisas. Tem o site Simples Ideias, q tem uns artigos interessante: http://simplesideias.com.br/usando-jquery-na-pratica/, tem o blog do maujor tbm : http://www.maujor.com/blog/, mas pra quem quer começar indico esse aqui:
http://i18n.2kminterativa.com.br/jquery/jquery-getting-started-pt_br.html

Charles Potel

Valeu David pela sua dica, o sites são muito bons, eu acho que nao tinha procurado direito pq nao tinha encontrado nada tão especifico, kkk, e quanto a palavra java, realmente é costume meu falar java ao inves de javascript, pois tenho mtos colegas da area e costumamos abreviar a palavra em potencial, o que temos consciencia que é um ato erroneo, kk, mais realmente pode haver pessoas que interpretem mal a palavra e as vezes faça confusao quanto ao entendimento !!! Vlw pela dica !!
Henrique Mezzomo

Muito boa a video aula! Meus parabéns pela iniciativa, pois estava mesmo precisando deste efeito ;D
http://tutorial-city.net Tutorial City

@DAVID CHC
Eu reparei que estava em HTML 5 e ia mencionar,mas preferi ficar quieto….. rs
Eu acho que HTML 5 vai trazer de volta aquela bagunça do HTML 4 (sintaxe), como tags podendo ter letras maiúsculas ou minúsculas, tags que não precisam ser fechadas etc etc, mas a bagunça nao é por conta disse, e sim por conta de vc poder escolher entre usar ou não, o que vai trazer uma certa despadronização dos documentos.
O ponto principal do HTML5, na minha opinião, é trazer algo que realmente seja definitivo, e reconhecido igualmente entre todos os navegadores, justamente pra acabar com a zona que agente tem hoje, de ver coisas diferentes em navegadores diferentes.

http://www.videoaulasbrasil.com.br David CHC

@Tutorial City, acho q acontece é que estamos acostumados as regras do xml. Mas acredito, que mesmo voltado as origens, se assim podemos dizer, muitos adotaram esse padrão do xml ainda, abrir e fechar tag, letra minuscula para declaração das mesmas. Pelo o que vi do html 5, e que me agrada, é o fato tentar dar significado , a querida semântica, e tentar diminuir a “sopa de tag”, ou conhecida como “div mania”. Eu tbm prefiro um código padronizado, de acordo como as regras do xml. Pelo q tbm li o grupo do xhtml 2 tinha sido abandonado, eles iriam focar no html 5, não sei se ainda é vigente essa noticia. Não sei tbm se vc viu o café com browser, eles estão trazendo os representantes dos navegadores, já teve com pessoal do opera, da fundação mozilla, e tbm da Microsoft. O da microsoft eu vi, pq colocaram a online apresentação do IE8, falando dos suportes, etcs. Aqui tem o Elcio da Visie fazendo uma pergunta ao pessoas do IE (praticamente um desabafo, rs) , http://vimeo.com/6283664

http://tutorial-city.net Tutorial City

@DAVID CHC
É legal ver a microsoft tomando porrada por causa do IE.
assiste ao video sobre HTML 5 (vai rolando a página q vc acha….rs)
http://blog.locaweb.com.br/

http://www.videoaulasbrasil.com.br David CHC

@Tutorial City, eu tinha visto esse video, é bem interessante.

Sergio Araujo – SP

Ola David blz…

Kara fantastica essa video,a tempos eu queria ver algo assim e vc simplesmente matou cajadada minha duvida. Parabens

Abraços
Will Fernando

muitoo bomm .. parabens =]
Pedro Antonio

David CHC, pq não faz uma aula sobre Fisheye?

Vlw!
Arlington

Olá David, gostei bastante da video aula, continue sempre assim trazendo novidade para nos, tava querendo que vc fizesse uma video aula ensinando como colocar uma imagem de background no body e que se adeque a qualquer resolução, estou tendo muita dificuldade com esse assunto, se vc puder fazer essa video aula para nos, ficaria muito agradecido

Abraçux
http://www.marcosdg.com Marcos

Gostaria de saber se conseguiu resolver o problema das imagens que não aparecem se não tiver o tamanho e altura.
O problema é q estou usando um thumbnail em PHP e aí as imagens não estão aparececendo só quando determino o tamanho exato.
Obrigado Marcos.
Valeu pela aula muito boa.
Ronaldo

Muito Bom, Parabéns por essas e pelas outras video aulas feita por vc.
http://www.plansys.eng.br Aline Villela

Olá David!Primeiramente parabéns pela ótima vídeo aula e obrigada por dividir conosco o seu conhecimento. Como fiz passo-a-passo toda vídeo aula, gostaria de saber como estiliza-lo, como nos exemplos do site. Mais uma vez um muito obrigada e um forte abraço!

http://www.videoaulasbrasil.com.br David CHC

@Ronaldo obrigado.

@Aline, o do site é usado um diferente, esse q ensinei é mais simples de vc usar. Para estilizar vc vai usar apenas CSS. Vai criar uma div q englobará o carrossel, declarar com position relative, e os links como absolute, posicionando em relação ao documento, vou ver se crio um exemplo, e te passo o link , com itens comentados

http://www.plansys.eng.br Aline Villela

Obrigada David!Estou aguardando ansiosa.
Guilherme

Cara procurei isso em tudo que é site e não achei, fui achar aqui, entro nesse site quase todo dia e não tinha visto ainda.
Valeu DAVID

http://www.videoaulasbrasil.com.br David CHC

@Guilherme, então é bom entrar item por item no menu, pq vc encontrar várias soluções pra alguns problemas.

Ciro Cruz

Achei fantástico este efeito, sua aula, como sempre perfeita.
Tentei utilizar um efeito que está no site chamado “Custom Widget” e não consegui.
Voce poderia mostrar atraves de uma vídeo aula?
Parabéns

http://www.videoaulasbrasil.com.br David CHC

@Ciro , pra usar esses efeito precisará tbm chamar pra pagina Easing plugin, veja na instalação do jCarousel Lite

http://www.gmarwaha.com/jquery/jcarousellite/#install

Ciro Cruz

Davi, obrigado pela atenção, baixei o plugin e chamei como voce orientou, não consegui, estou apanhando com o código do arquivo “carrossel.js”. Tento seguir a orientação do site mas não funciona.

http://www.videoaulasbrasil.com.br David CHC

@Ciro Cruz, depois irei fazer um teste.

Danilo

David,

Estou com um problema, esse JS não funciona no IE 7…tem alguma solução??

Grato!

http://www.videoaulasbrasil.com.br David CHC

@Danilo, funciona no IE6, IE7, IE8, Firefox, Opera, Chrome . Veja a dica q digo na aula, sobre colocar width e height no img, pq tem um bug no plugin

Danilo

Cara, foi eu que errei mesmo, tinha colocado uma “,” depois do visible : 4

Msm assim agradeço pela atenção!!
http://www.autoresponder.sucessoerenda.net tiago

Olá David
Aqui deu tudo certo com o efeito carrossel, por´m estava precisando de quando o mouse parar em cima, eles páram automaticamente, e quando o mouse sai, eles voltam a roda… como eu conseguiria fazer isso?

Obrigado

http://www.videoaulasbrasil.com.br David CHC

@tiago, creio q com esse plugin não tem essa opção, infelizmente. Dei uma olhada na documentação e não vi nada a respeito.

Fábio

David,

Como fazer para mesclar imagem e texto no carrossel? Ou seja, mudar de texto à medida que muda de imagem, como no site da Placar: http://placar.abril.com.br/.

Abs,

Fábio

http://www.videoaulasbrasil.com.br David CHC

@ Fábio, com esse plugin, para adicionar na estrutura com tem a imagem, no caso da li, exemplo:

http://pastebin.com/rVy49YcG

Veja apenas q coloquei uma tag de paragrafo dentro da li, ela seria a legenda. O resto é o CSS. Para declara a li com position:relative, e o elemento de paragrafo como absolute;

li{position:relative}

li p{
position:absolute;
background:#000;
bottom:0;
z-index:9999;
}

Seria algo mais ou menos nesse estilo.

Ricardo Marangoni

David fiz aqui pra empresa que trabalho atualmente e ficou blzinha, só no ie que n aparecem as imagens, nem definindo o width e height. Em nehuma das versões.

http://www.videoaulasbrasil.com.br David CHC

@Ricardo, Qual a versão do IE q tá dando problema?

Ricardo Marangoni

DAVID vou te passar o link ai você pode testar, mas a princípio em todas as versões.

segue :

http://www.cinq.com.br/pt/servicos/cinq_mobile.aspx

Abraço David e vlw pela atenção,

http://www.videoaulasbrasil.com.br David CHC

Ricardo, o problema não é o plugin, e sim o html, tem tags sem fechar, e aspas abertas sem fechar tbm, deveria ficar assim:

http://pastebin.com/84vU5DBn

É interessante sempre validar o codigo, pq assim vc ver alguns erros de sintaxe q as vezes esquecemos.

Ricardo Marangoni

Pois é David era isso mesmo o IE não reconhecia a imagem porque a tag do link não estava fechada, muito obrigado!

Abraços
http://sanguerosasevinhotinto.blogspot.com Rô!

Muitissímo obrigada pelo tutorial!! Muito bom e fácil, para ficar mais simples que isso só trocando a ferramenta que vê o vídeo, no caso, eu mesma!

Acredita que ontem o meu não tava funcionando de jeito nenhum? Fiquei um tempão tentando resolver. Hoje, cheguei pro trabalho, e depois de mais um pouquinho de briga percebi que tinha esquecido de por o ‘T’ no ‘SCRIPT’ que puxava o .js, dai é claro que num funcionava, né! rsrs

http://www.videoaulasbrasil.com.br David CHC

Q bom @Rô! q tutorial pode te ajudar. E esquece algum letra, ou incluir arquivo isso é normal, acontece comigo direto, rs

Wellington

Boa tarde Davi

Como faço para as imagens rolarem na vertical em vez da horizontal?

Obrigado.

http://www.videoaulasbrasil.com.br David CHC

Basta definir a propriedade vertical como true

Wellington

Boa tarde Davi,

Perfeito, depois de alterar o false para true as img da lista estão rolando na vertical.

Muito obrigado.

Vlw
urbano

David, cheguei a fazer essa mesma pergunta, na aula de cycle, porém ainda continuo na dúvida, é o seguinte: tô usando o carrossel na vertical, só que em vez de imagens texto(fiz uma lista de menu ul, ex. menu(empresa, contato), menu(servicos e dentro desse menu servicos abre outra ul com os submenus)).coloque o visible 10 no carrosel para mostrar os 10 menus. na tag -/li a/- do menu servicos, que abre os submenus coloque um slidetoggle. para ficar o efeito acordion. Quando carrega as outras paginas do site ao clicar nos outros menu, para não ficar aberto o menu servico, não coloque o display none pela folha de estilo, optei por colocar via jquery no momento que carregar as paginas que não fossem o menu servico, por ex. quando clicar no menu empresa, como os outros menu que não fosse o menu servicos, via jquery coloque display:none. Minha dúvida é a seguinte: quando clico nos outros menus rapidamente ele abre a lista de servicos e fecha. Como faço para isso nao acontecer. lembrando que dentro das outras paginas ref. aos menu(ex. empresa…) tem o include para o menu.
Valeu!

http://www.videoaulasbrasil.com.br David CHC

@urbano, vc quer quando clicar em um item no menu, não feche o outro, seria isso? Recomendo ver essa video aula para entender o funcionamento de mostrar e não mostrar um submenu:

http://www.mxmasters.com.br/tableless-css/menu-com-submenu-na-horizontal-css-parte-2/

Urbano

blz.
Edmar F. Oliveira

Olá, fiz tudo corretamente como foi explicado, mas na hora de postar no meu site o carrossel não movimenta, vc poderia me ajudar, por favor?

http://www.videoaulasbrasil.com.br David CHC

@Edmar , me mostra o link do seu site pra dá uma olhada.

Edmar F. Oliveira

Olá David, primeiramente muito obrigado por ter me atendido!
O site em questão é este link abaixo, ainda estou montando, mas o carrossel não se moviementa. Espero contar com sua ajuda amigo! Valeu! Obrigado!

http://ed.brazil.sites.uol.com.br/Teste.html
Edmar F. Oliveira

David o link que lhe enviei nos comentários abaixo é de um site que estou tentando criar. É um passatempo para levar um pouco de cultura a população da cidade onde eu moro, Aguaí, município paulista que fica no centro-norte da região de Campinas.
As fotos não estão totalmente formatadas iguais aos tamanhos, pois é só um exemplo. Estou tentando criar um site com a história de minha cidade com fotos linkadas, coisa que eu sei fazer tranquilo, meu único problema está no carrossel que não se movimenta, fiz do jeitinho que vc explicou no vídeo. Tenho alguns Blogs na net, faço uso deles com várias ferramentas do HTML, e achei super bacana esse esqueminha do carrossel e, gostaria de aplica-lo neste site, mas empaquei no problema dele não se movimentar. Por isso resolvi pedir sua ajuda.
Desde já agradeço mais uma vez sua colaboração.
No mais é isso meu amigo, espero não estar incomodando, e conto com sua ajuda se for possível!
Deus lhe abençõe!

http://www.videoaulasbrasil.com.br David CHC

@Edmar, no caso onde vc chama carrossel.js, está faltando uma aspas

Está assim:

src=js/carrossel.js”

Seria assim:

src=”js/carrossel.js”

Edmar F. Oliveira

Olá David, olha eu sempre me atentei a esses detalhezinhos do HTML, mas neste caso fugiu mesmo, mas também não foi a solução para o meu problema, o carrossel continua paradinho. Se ainda assim puder me ajudar eu agradeço amigo!
Obrigado por enquanto!

http://ed.brazil.sites.uol.com.br/Teste.html#
Victor

Olá David, esta de parabéns pela vídeo aula. Venho acompanhando suas vídeo aulas a um tempo já e achei muito interessante essa vídeo aula. Eu gostaria de perguntar se no lugar no “Anterior” e “Próximo” não daria pra colocar a numeração ordenada das imagens e quando rolar por exemplo pra imagem 2… na lista numérica das imagens rolar um efeito de transição para saber em qual imagem esta e quando clicarmos no numero aparecer a imagem correspondente ao numero que clicamos. Estou aprendendo JS com você nas vídeo aulas, pois não tenho conhecimento em JS, mas tenho muito interesse em aprender… Será que você pode me ajudar..rsrs

Admiro muito seu trabalho.

Abração se cuida.

http://www.videoaulasbrasil.com.br David CHC

Vlw @Victor. Creio que nesse plugin não tem a opção da paginação. Vc usa mais a paginação quando é slide show, eu tenho um aula sobre slide show usando jquery:

http://www.videoaulasbrasil.com.br/ajax/criando-um-slide-show-com-jquery/

http://davidchc.wordpress.com David CHC

Ortega, a quantidade que será visivel, , vc defini pela propriedade visible. Assim poderá passar 3 e 3 imagens, 5 em 5, 2 em 2, sucessivamente:

visible: 2
Adler_coelho

Seria possível fazer uma vídeo aula básica com o plugin “AutoComplete”, retornando informações de um banco de dados?Obrigado.

http://davidchc.wordpress.com David CHC

Adler, já tem uma video aula com esse assunto :

http://www.videoaulasbrasil.com.br/ajax/recurso-auto-completar-utilizando-ajax-jquery-e-php/

http://www.facebook.com/lanternaled Roberta Bernades Campos

DAVID, eu queria saber que pack ou alteracao fez no notepad++ para poder sugerir tags. Há, tem outra seria muito legal se vc fizesse uma videoaula adaptado para banner com o plugin supersize jquery. (http://buildinternet.com/project/supersized/). Esse resolveria os problemas de resolucao dos monitores.

http://davidchc.wordpress.com David CHC

Oi Roberta. No NotePad++, vc pode ir em Configurações > Preferências > Backup / Auto Completar. E habilitar a opção : Habilitar auto completar para cada entrada.

Sobre a video aula, esse efeito é bem interessante, tendo um tempinho vou dá uma estudada no plugin e fazer uma video aula.

http://davidchc.wordpress.com David CHC

Basta acessar o link abaixo, e tens os efeitos pra vc baixar :

http://interface.eyecon.ro/
Leandro

Como seria utilizando banco de dados php + mysql, pegar as fotos em um banco.
Existe alguma video aula com os 2 temas JQuey + PHP MYSQL?
http://davidchc.wordpress.com David CHC

Creio q da maneira q vc quer fazer, não tem como fazer com jCarrosselLite
http://davidchc.wordpress.com David CHC

Não tem problema, a maneira q vai fazer o efeito será o mesmo
Pauline Hellinger

Muito obrigada :)

Me ajudou muito, excelente aula muito bem explicado.

Parabéns!

http://davidchc.wordpress.com David CHC

Pauline q bom q aula pode te ajudar. abrs

Fabio_autocar

Bom, isso você faria atraves de callbacks, quando parar de reproduzir o vídeo, ele rolar o carrossel. Eu já fiz isso uma vez para um cliente meu.
http://davidchc.wordpress.com David CHC

Creio q seja realmente algum bug do plugin. Eu tbm faço uma condição, contando os registros, pra depois liberar o plugin. No caso vc utilizar $(window).load(function(){}) ao invés de $(function(){ }) para executar o plugin ?