Boa tarde galera, voltemos a falar um pouco do bom e velho jCarousel, agora com novidades!
Vamos fazer um carrosel que pega as URLs das imagens que deseja-se colocar no carrosel de um documento de texto (dynamic_ajax.txt) e gerar nosso carrosel dinâmicamente. Ao trabalho:
- Inserimos as bibliotecas JavaScript (jQuery e jCarousel, conforme este post);
- Inserimos os seguintes códigos na tag <head> da nossa página (O código está comentado para facilitar o entendimento ^^):
- Pronto! Basta a sua página e o arquivo de texto ‘dynamic_ajax.txt’ estarem na mesma pasta que funciona!
<script type="text/javascript">
function mycarousel_itemLoadCallback(carousel, state)
{
// Uma vez que temos todas as URLs em um arquivo, basta adicionar todos os itens
// e definir o tamanho de acordo.
if (state != 'init')
return;
// Aqui e' colocado o arquivo com as URLs das imagens
jQuery.get('dynamic_ajax.txt', function(data) {
mycarousel_itemAddCallback(carousel, carousel.first, carousel.last, data);
});
};
function mycarousel_itemAddCallback(carousel, first, last, data)
{
// Os itens são separados pelo '|'
var items = data.split('|');
// Adiciona os itens no Jcarousel
for (i = 0; i < items.length; i++) {
carousel.add(i+1, mycarousel_getItemHTML(items[i]));
}
// Define o tamanho do Carousel
carousel.size(items.length);
};
// Função que auxilia a criação do HTML
function mycarousel_getItemHTML(url){
return '<img src="' + url + '" width="75" height="75" alt="" />';
};
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
itemLoadCallback: mycarousel_itemLoadCallback
});
});
</script>
Dúvida? Então baixe o exemplo e teste ai no seu pc!
Após baixar, deve prosseguir da seguinte maneira:
- O arquivo esta com extensão .doc. Mude-a para .zip, apenas apagando o “.doc”, ou abra com o seu software de descompressão predileto (winrar ou outros);
- Coloque ambos arquivos em um mesmo diretório, de forma a poder controlar quais imagens aparecerão no carrosel através do arquivo de texto;
- Pronto! Abra o arquivo ‘dynamic_ajax.html’ e veja o carrosel funcionando! Mude as URLs do bloco de notas, atualize seu navegador, e Voalá! Funciona esse trem! rs
Apenas lembrando que as imagens devem ter preferencialmente 45X45 pixels (se não tiver, o jCarrousel diminui, mas pode causar distorções!), e não pode ser um arquivo do seu computador, deve ser uma URL, ou seja, um link da internet, completo, desta forma:
http://farm3.static.flickr.com/2449/3909735243_cc35f8c488_s.jpg
No próximo post, abordarei sobre como fazer esse carrousel com php, pegando todos as imagens de um determinado diretório! Até lá!
Dúvidas e sugestões, a la vonté! Até mais! ^^
Tem como eu alterar o template do carrousel? Tipo ficar duas linhas mas num mesmo scroll?… queria que ficasse 2×2.
obrigada.
Cara aline,
Vc quer fazer duas linhas independentes, com rolagens diferentes, ou duas linhas que andam juntas? Vamos aos casos:
– Linhas independentes: Faz normal, cria duas divs, cada qual com o conteudo que vc deseja, e coloca a classe do jCarrousel;
– Linhas juntas: Nesse caso, como é um carrosel de imagens, eu recomendo que vc junte as imagens (superior e inferior) e faça um carrosel normal, porem com a altura maior.
Caso tenha alguma duvida especifica, especifique qual tipo deseja usar, que procurarei te ajudar.
atc,
Então… a minha intenção é fazer as linhas juntas, a segunda opção que você deu e as imagens teriam links.
Obrigada,
@aline
Entao, ja postei aqui mesmo como fazer isso! ^^
Primeiramente, olhe nesse link as configurações básicas, de como colocar o carrosel!
Depois, neste link, vc ve como configurar o tamanho das imagens e quantidade de imagens por “rodada”.
Qualquer duvida, poste aqui ou comente direto no post correspondente!
^^
Puts cara…
Tentei de tudo, mas não consegui montar o carrossel!!!
A parte CSS funcionou, mas a outra, em JS, não funcianou!!!
Não sei o que fiz de errado!!!
Fiz as 5 postagens com aqueles códigos que vc havia me passado, mas não funciona!!!
Será que vc poderia me dar uma mãozinha???
Faz um tempão que estou editando meu template de testes…
Só falta colocar o Carrossel e meu banner!!!
Você poderia me ajudar a fazer o carrossel???
Obrigado por tudo…
Olá…
Estou montando um template novo para meu blog…
Mas estou tendo dificuldade em montar um carrossel dinamico para adicionar ao novo template!!!
Meu blog de testes: http://meutesblog.blogspot.com/
Meu blog Original: http://redecerebral.blogspot.com/
Minha intenção é de criar um carrossel com imagens com links direcionados a determinadas postagens.
E não estou conseguindo fazer isso!!!
Vc poderia dar só uma olhada no meu blog de testes e me ensinar a montar um carrossel para o topo esquerdo da página???
Obrigado!!!
contato: paulo_s2000@yahoo.com.br
Opa, isso pode ser feito de forma simples com a jQUery.
Para cada post, lembre de colocar uma imagem com uma classe especifica, e setar o style=”display:none;” , caso essa imagem seja usada apenas no carrosel.
Após isso, basta fazer um foreach para percorrer todos os titulos, pegar seu link (attr href) e buscar após deles uma imagem com a classe especificada.
Coloca isso tudo na div do topo, com as classes requeridas pelo jCarrousel, especifica as configurações, e voa la! Prontinho! hehe
Estou desenvolvendo algo parecido e em breve passo o código aqui!
Não esqueça de me seguir no twitter para ficar por dentro de dicas e atualizações.
@ViniciusWebmast
Já enviei um e-mail para vc com as informações necessárias!!!
Vc faria esse favor para mim?
Colocaria o carrossel do jeito que havia me falado?
Vlw!!!