Flickr Slideshow com Prototype
27 Setembro 2008
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:
<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)
Outubro 01, 2008