Ótimos efeitos de transição de imagens em jQuery : Coin Slider

30 ago 2010

Navegando na internet, encontrei um site de um designer, russo se eu nao me engano, onde ele mostrava as imagens de seu portfólio com um lindo efeito de transição de imagens, que eu achava ser em flash.
Curioso ao ver que não era Flash, entrei no código fonte e encontrei a mágica: jQuery!

jQuery é uma biblioteca feita em JavaScript que é o bambambam dos webdesigners atualmente. Possui excelentes recursos que deixam seu site super atraente e sem deixar pesado como sites em Flash.

O nome do plugin é Coin Slider, e eu achei nesse site aqui, em inglês. Ótimo site por sinal, com vários post interessantes.

E como esse plugin foi útil pra mim, resolvi postar aqui no blog, que aliás está precisando de atualizações!

Então vamos ao que interessa.

Clique na imagem e veja uma página de demonstração do efeito.

Recursos

* Efeitos de transição únicos
* Compatível com Internet Explorer 6+, Firefox 2+, Safari 2+, Google Chrome 3+, Opera 9+
* Valid markup
* Configuração flexível
* Auto slide
* Barra de navegação
* Super leve (somente 8kb)
* Possibilidade de colocar links nas imagens
* Uso livre sob a licença do MI
* Totalmente customizável usando CSS

Download do plugin

Configuração

Faça o download do jQuery, do plugin Coin Slider e do arquivo CSS que está incluído no pacote do link acima e inclua tudo na seção <head> sua página:

Crie uma div com o id “coin-slider” e coloque as imagens, os links e as descrições, seguindo o modelo abaixo:

<div id=’coin-slider’>
<a href=”img01_url” target=”_blank”>
<img src=’img01.jpg’ >
<span>Descrição para a imagem 1</span>
</a>

<a href=”img02_url” target=”_blank”>
<img src=’img02.jpg’ ><span>Descrição para a imagem 2</span>
</a>
</div>

Pode colocar quantas imagens desejar, não tem limite. A descrição e o link não são obrigatórios.

No final do seu arquivo, antes do </body>, insira o código abaixo:

Exemplo

Este plugin possui várias opções para você configurar seu slider do jeito que você quiser. Se você quiser um slide de largura 900px, sem botões de navegação e com intervalo de 5 segundos entre as imagens, o código é o seguinte:

Lista com todas as opções

width: 565, // largura do slider panel
height: 290, // altura do slider panel
spw: 7, // quadros por largura
sph: 5, // quadros por altura
delay: 3000, // intervalo de tempo entre as imagens, em milissegundos
sDelay: 30, // intervalo de tempo entre as imagens, em milissegundos
opacity: 0.7, // opacidade do título e da navegação
titleSpeed: 500, // velocidade de aparição do títuo em milissegundos
effect: ”, // random, swirl, rain, straight
navigation: true, // botões anterior e próximo
links : true, // mostrar links nas imagens
hoverPause: true // pausar a transição ao parar o mouse em cima da imagem

CUIDADO ao configurar o spw e sph porque se você colocar muitos quadros, a transição fica muito lenta e o site também. Aconteceu isso comigo! Então aconselho a não modificar os valores padrões.

Se você não setar o tipo de efeito, o padrão será random.

É isso aí, qualquer dúvida é só comentar.

Tags: coin-slider, efeitos, imagens, jquery, plugin, slide

46 Responses to Ótimos efeitos de transição de imagens em jQuery : Coin Slider

diego fuzatto

setembro 17th, 2010 at 2:31 pm

ola amigo tudu bem?!
adorei essa transiçao de imagens so q nao consigo colocar no site q estou fazendo..

1-nao consigo baixar o jquery, ai em cima ond vc pede para fazer o download dele..

2-duvida:
as divs ja posso colocar na pagina ou tem q ser antes do body tb^^ =D

pode me ajudar??
obrigado

Yuri

setembro 30th, 2010 at 9:57 am

Valew ae Ralph…. muito legal esse post…
valew
abç

Ralph Almeida

setembro 30th, 2010 at 10:33 am

olá, o jquery vc pode fazer o download em http://www.jquery.com
as divs sao dentro do body!
abraços

felipe

outubro 26th, 2010 at 8:41 am

muito bom o tuto. eu ja tava preparado pra mexer no spw e sph ai li o aviso de CUIDADO. hehehehe. por as minhas imgs serem menores ai os quadrados ficaram grandes. mas vlw

Paulo

outubro 31st, 2010 at 10:34 am

Não rola aqui. só mostra as imagens em sequencia. Porque? requer algum pluggin? Veja meu código:

Documento sem título

$(document).ready(function() {
$(‘#slide’).coinslider();
});

diegocrusius

novembro 8th, 2010 at 9:31 am

sinceramente não entendo por que meu código não funciona. Revisei ele inúmeras vezes. Refiz o tutorial do site orinigal e desse aqui. Elas ficam em sequencia, como se o navegador não conseguisse carregar o jQuery ou o plugin. Não sei. Raiva.

novembro 8th, 2010 at 9:41 am

Não funciona com jquery 1.4. Testei no 1.3.2 e funcionou.

novembro 8th, 2010 at 10:03 am

Olá Paulo, qual versão do jquery vc está usando?
o diego disse que nao funcionou com a versão 1.4. tente usar a 1.3.2, pois é a q eu uso tambem.
abraços

Rene

dezembro 6th, 2010 at 5:58 am

Baixei a versão JQuery 1.3.2 e não funcionou tb… por que será?

dezembro 6th, 2010 at 8:08 am

Consegui fazer funcionar, perdoem-me a ignorância, se houver, mas a unica coisa que eu fiz diferente do tutorial foi colocar o script

depois da antes da e também usei o JQuery 1.3.2… vlw

Luciana

janeiro 26th, 2011 at 8:05 pm

Muito bom! Obrigada por disponibilizar e ensinar Funcionou perfeitamente na versão 1.4.2 do jQuery.

Otávio Piazzi

janeiro 27th, 2011 at 3:51 pm

nossa, top demais e funcionou com o 1.4.4

Alberto Jr

fevereiro 10th, 2011 at 11:45 am

Os “quadradinhos” do menu estão centralizados e as imagens à esquerda. Como centralizo tudo??? Valeuuuuu

Rafael

março 31st, 2011 at 4:54 am

Ralph otimo post.

Muito bom consegui fazelo rodar.

mas quando jogo no site ele nao carrega os scripts.

funcionou com o pluglin 1.4.2

Luiz Mattioli - [GODO]

abril 12th, 2011 at 10:33 am

MUITO OBRIGADO! DEU CERTO AQUI COM O 1.3.2.min.js

Não estava dando certo o script final, dai eu copiei do código de fonte da página de demonstração.

ótimo mesmo, valeu! abs

Elton

maio 7th, 2011 at 5:38 pm

Posso usá-lo em um site que eu estou desenvolvendo e vou comercializar?

maio 9th, 2011 at 4:01 am

Ola Elton, pode sim, sem problemas. Só deixe os comentarios dos arquivos js intactos pra dar os creditos pra pessoa que fez.

maio 9th, 2011 at 4:02 am

Veja se colocou o tamanho exato da imagem na chamada do script no rodape.

Guilherme

maio 11th, 2011 at 7:04 pm

Estou tentando trocar o next e Prev por imagens. Basta trocar no css?

Não ta funcionando… (talvez seja burrice minha)

Celso

maio 12th, 2011 at 8:08 am

Olá, usei seu script e funcionou muito bem, obrigado. Só queria tirar uma dúvida… Na navegação ao invés de ter os quadradinhos com links pra todas as imagem tem como fazer uma navegação com estilo anterior – próximo (diferente da que tá dentro)??

Teo Anderson

maio 13th, 2011 at 10:34 pm

Funciona no blogger/blogspot???

Ricardo

junho 14th, 2011 at 4:57 pm

Cara, foi uma mão na roda esse script, o mais prático que já vi, serve como swap image e gallery.

thanks brother.

Abs.

Prof. Baco

agosto 4th, 2011 at 2:17 pm

Adorei o seu script, mas estou com um pequeno problema, eu vou usar as imagens como plano de fundo de um site.
Tem com eu usar width e o height em 100% para que as imagens fazem a transição independente da resolução do monitor?

mauricio

agosto 5th, 2011 at 8:55 am

muito bom estava procurando um diferente para colocar num site de cliente

agosto 5th, 2011 at 9:21 am

hum isso complica pois vai ficar distorcendo a imagem. eu ja fiz com a imagem em background do site, ai fiz imagens grandes, veja: http://www.wernerolegariomaciel.com.br/novo
o site ainda está em construção, por isso esta nesse dominio /novo

Robson

agosto 30th, 2011 at 10:54 am

Oi amigo. Muito bom o seu scrip. Parabéns.
Só que as minhas imagens só ficam no canto da tela. Como faço para deixá-las no meio?

Até salvei o seu código fonte e suas imagens para ver se dava certo e deu mesma coisa.

Obrigado

setembro 9th, 2011 at 1:52 pm

Não consegui abrir o arquivo, o que fasso?

Tipo, o jquery, não sei fazer o download

setembro 11th, 2011 at 3:35 pm

Guilherme baixa o jquery nesse site http://jquery.com/

setembro 11th, 2011 at 3:36 pm

o arquivo está zipado. baixa o WinRAR para descompactar esse arquivo.

setembro 11th, 2011 at 3:37 pm

para centralizar, coloque uma div com o seguinte css: defina um tamanho no width e use margin:0 auto;

Valmor Seabra

setembro 14th, 2011 at 9:04 pm

Olha só… maravilha este tutorial seu… funcionou perfeitamente.. só tem um ajuste que gostaria de fazer e não achei…. minha imagem tem 890 x 200 logo a descrição da imagem manteve o tamanho menor… aonde eu altero isso? fora isso ta tudo OK.
Parabéns pelo posto e pelo Blog.

setembro 15th, 2011 at 3:44 am

Olá Valmor, vc altera o tamanho na chamada do script:

Washington

setembro 17th, 2011 at 12:10 pm

Muito bom post, parabéns.

Rodrigo

outubro 3rd, 2011 at 9:09 am

Olá, eu tenho um blog ( Blogger ) e queria saber se consigo colocar esse efeito e se o procedimeno é o mesmo. Obrigado

outubro 3rd, 2011 at 1:04 pm

Coloquei mas as imagens ficarão uma embaixo da outra.

Thiago Henrique

novembro 3rd, 2011 at 8:30 am

estou com problemas ao colocar o plugin fiz tudo como no tuto ai na hora que abre a pagina esta dando um erro

entre no site http://gtecinformatica.net/teste-slider.php que vai aparecer o erro

novembro 3rd, 2011 at 8:40 am

Olá, nao tenho certeza, mas acho que dá sim.
Uma sugestão, use o wordpress, é bem melhor!

Gabriel

novembro 14th, 2011 at 6:36 pm

Amigo, eu quero fazer este esquema do coin-slider, só que é o seguinte.. meu site tem um sistema de administração, onde os clientes montam o layout do jeito que querem… ai eles hospedam o banner em um banco de dados Mysql. A questão é o seguinte: Como carregar estas imagens do Mysql para este script? Por favor, me adiciona no msn.. preciso disso para ontem… seria ótimo se trocassemos uma idéia a respeito.. Muito obrigado des de já..

Gabriel.

novembro 17th, 2011 at 3:52 am

olá gabriel, faça o looping dentro da div do coin-slider:


	< ?php

        $sql = mysql_query("SELECT imagem FROM banners ORDER BY rand() LIMIT 5");

        while ($a = mysql_fetch_array($sql))

             echo < img src='imagens/banners/".$a['imagem']."'  />";

       ?>

dezembro 7th, 2011 at 5:04 pm

Ola Rodrigo, isso acontece geralmente quando o caminho do script e do css estao errados. De uma verificada

Dikson

janeiro 3rd, 2012 at 4:13 am

Coloquei aqui mais as imagens ficam grandes uma em baixo da outra. Alguem pode me ajudar ?

janeiro 3rd, 2012 at 4:15 am

Ola Dikson, isso acontece geralmente quando o caminho do script e do css estao errados. De uma verificada

janeiro 3rd, 2012 at 6:44 am

Ola Ralph, valeu pela dica conseguir aqui um abraço!!!! É muito massa!!
agora vou implementar no portal da empresa

Henrique

janeiro 5th, 2012 at 5:04 am

Fiz aqui com a versão mais atual do jQuery e funcionou perfeitamente! Muito obrigado pelo tutorial amigo! Sucessos com o site

Higor Oliveira

janeiro 23rd, 2012 at 5:07 pm

Cara, excelente! Estou iniciando por conta própria em javascript e esse tuto era tudo que eu precisava!

Higor Oliveira: Cara, excelente! Estou iniciando por conta própria em javascript e esse tuto era tudo que eu precis [...]

Henrique: Fiz aqui com a versão mais atual do jQuery e funcionou perfeitamente! Muito obrigado pelo tutorial [...]

Dikson: Ola Ralph, valeu pela dica conseguir aqui um abraço!!!! É muito massa!! agora vou implementar no [...]

Ralph Almeida: Ola Dikson, isso acontece geralmente quando o caminho do script e do css estao errados. De uma verif [...]

Dikson: Coloquei aqui mais as imagens ficam grandes uma em baixo da outra. Alguem pode me ajudar ? [...]

Ralph Almeida – SEO, Otimização, Design

Ótimos efeitos de transição de imagens em jQuery : Coin Slider

Recursos

Download do plugin

Configuração

Exemplo

Lista com todas as opções

46 Responses to Ótimos efeitos de transição de imagens em jQuery : Coin Slider

Faça seu comentário aqui

Links

Sobre este blog

Categorias

Arquivos

Favoritos

Parceiros