Flickr Slideshow com Prototype

Escrito por Gonçalo Martins

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.

Código HTML

Implementar este slideshow com prototype é relativamente fácil.

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

javascript
<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:

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

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

html
<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:

javascript
<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

Gostou deste Artigo?

Subscreva o feed RSS ou reguiste-se na Newsletter do WebLouca, agora!

Tags:

slideshow, carrousel, prototype, flickr

Categoria:

Se preferir, pode ainda deixar um comentário

PATROCINADORES

ARTIGOS RELACIONADOS

Trackback(0)

TrackBack URI for this entry



Rodrigo Piva Outubro 01, 2008 http://www.curiosando.com.br	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.