Web Louca

Home scripts Flickr Slideshow com Prototype

Flickr Slideshow com Prototype

27 Setembro 2008 Escrito por Gonçalo Martins


slideshow carrousel

Todos os utilizadores do flickr, conhecem o slideshow que lá consta. Aquele slideshow não passa de um carrousel relativamente fácil de implementar utilizando, por exemplo, prototype.

O exemplo abaixo demostra como implementar um slideshow Flickr style, na sua página de Internet ou blog.

 



Testado em Windows XP SP3 com:
- IE 6 + 7
- Firefox 1.5.0.7 + 2.0.0.3
- Google Chrome 0.2
- Opera 8.0 + 8.5 + 9.00
- Safari 3+

Exemplo
 Download

Código HTML

Implementar este slideshow com prototype é relativamente fácil.

Na tag <head> do seu site,  cole o seguinte código .js:

<script src="lib/prototype.js" type="text/javascript"></script>
<script src="lib/carousel.js" type="text/javascript"></script>
<script src="lib/effects.js" type="text/javascript"></script>

.... e de seguida chame o CSS que irá customizar o seu carrousel:

<link href="slideshow.css" rel ="stylesheet" type="text/css" />

 

Agora no <body> do seu ficheiro .HTML adicione o seguinte código:

<div id="horizontal_carousel">
<div class="container">
<ul>
<li><img src="img/img_1.png"></li>
<li><img src="img/img_2.png"></li>
<li><img src="img/img_3.png"></li>
....
</ul>
</div>
<div class="buttons">
<div class="previous_button"></div>
<div class="next_button"></div>
<br />
</div>

 

Por fim adicione as seguintes linhas antes da tag </body> do seu html, de forma a que o slideshow funcione:

<script type="text/javascript">
// <![CDATA[
function runTest() {
hCarousel = new UI.Carousel("horizontal_carousel");
}
Event.observe(window, "load", runTest);
// ]]>
</script>



O slideshow anterior funciona em todos os browsers modernos, e ainda no Internet Explorer 6. Pode editar a aparencia do Carrousel modificando o ficheiro slideshow.css

 


Trackback(0)
Rodrigo Piva
Outubro 01, 2008

O efeito fica realmente muito bom! Parabéns.
Abraços
Deepali
Agosto 12, 2009

Hello,

I hope you understand English. Your module is superb! It work like charm on my website.

I just wanted to ask you that now 2 images are moving at a time but i wanted to move 3 images at a time so what kind of changes i need to do?

please help me. mean while i try to find out.
Regards!
Deepali
Agosto 12, 2009

Just for the sake of curiosity what you have used here Jquery or mootools?

P.S- Along with this comment the email address ll come that id is correct.(sorry for the first one it was typing mistake)

Regards!
Leonardo Francia
Março 23, 2010

Estou adicionando uma galeria de imagens em um site ja criado. No Firefox funciona porem no IE da erro (quando clica na thumbnail esta nao abre na ID DIV.
Thiago
Julho 13, 2011

Pessoal queria saber que tem como colocar tempo para fazer tipo uma rotação dos slides?

Obrigado!

Escreva o seu Comentario
 
  pequeno | maior
 

busy
Subscreve a newsletter gratuita e começa hoje mesmo a criar websites e a ganhar dinheiro na internet!


Como rodar imagens com javascript
jsimageNeste artigo vou-lhe demonstrar como rodar imagens e qualquer elemento desde div a span co...
Crie facilmente miniaturas das suas imagens com PHP
phpthumbAtualmente praticamente todos os websites possuem a necessidade de listar os seus artigos...
Otimize as suas imagens com PunyPng
benchmarksA pouco mais de um ano falei sobre uma ferramenta para otimizar imagens (Artigos/optimize...
Como redimensionar imagens com PHP
phpimageredRedimensionar uma imagem com php pode ser um processo complicado. Quando por exemplo um wo...
Links de Afiliados com Javascript - Update
linksafiliadosNo inicio do ano escrevi um artigo onde dáva a conhecer uma forma de criar links de afili...

Nuvem de Tags

html javascript mootools