Mootools SlideShow

Para os que já tiveram a curiosidade de visitar o site de candidatura de Barack Obama à casa branca, não puderam de deixar de reparar no slideshow que este apresenta.

Vamos então ver como se pode implementar algo parecido utilizando Mootools!

1#Inserir o ficheiros .js

O melhor local para inserir o código de chamada a este género de sripts é no head do website, sendo assim, insira as seguintes linhas imediatamente antes da linha </head> que se encontra no seu ficheiro .html

 Note que deve colocar os ficheiros 'slideshow.js' e 'mootols-1.2-core.js' na pasta js que por sua vez se deverá encontrar na raiz do seu website. O caminho para os scripts pode ser alterado às suas necessidades.

2#Inserir o ficheiro .css

Tal como no ponto anterior inserir a seguinte linha antes de </head>

html
<link rel="stylesheet" href="slideshow.css" type="text/css" media="screen" title="Stylesheet" charset="utf-8" />
 

Aconselho-o a dar uma espreitadela do CSS uma vez que será onde poderá fazer as alterações necessárias à edição do estilo gráfico do SlideShow. Aconselho-o ainda a apagar as linhas que marquei como exessivas, neste mesmo CSS.

3#HTML

As seguintes linhas irão fazer com que o slideshow apareça no seu website. Para tál coloque-as no ficheiro .html onde deseja que este slide apareça. No joomla pode utilizar o mod_custom para inserir as seguintes linhas em qualquer posição do seu website, no wordpress pode editar o template.

html
<div id="slideshow">    
      <span id="loading">Loading</span>
    
      <ul id="pictures">
        <li><a href="linkaescolha"><img src="/caminho/para/a/imagem1" alt="alttag" title="titulo"/></a></li>
        <li><a href="linkaescolha2"><img src="/caminho/para/a/imagem2" alt="alttag2" title="titulo2"/></a></li>    
      </ul>
      
      <ul id="menu">
        <li><a href="/caminho/para/a/imagem1">Texto que aparece na lateral do slide</a></li>
        <li><a href="/caminho/para/a/imagem2">Texto que aparece na lateral do slide</a></li>
      </ul>
    </div>

Pode optar por remover o seguinte código acima, se pretender exibir apenas imagens sem lhes atribuir um link.

html
<a href="linkaescolha>  e </a>

4#Customize o seu slideshow

Opte por customizar o exemplo que lhe forneço, substituindo as imagens bg.jpg e bg_side.jpg, que se encontram na pasta 'images'.

_{Slide Original em: http://devthought.com/}

_{Modificações:}

1. _{Redução do tamanho do Javascript;}
   
2. _{Redução para 2 dos pedidos http://;}

Download dos ficheiros referidos no artigo:

ObamaSlideShow

[ObamaSlideShow]

305 Kb

TrackBack URI for this entry

Leandro Agosto 15, 2008	Puxa esse SlideShow está massa! Ea apresentação dele tambm esta um show. Era disto que andava procurando valeu!
Vitor Julho 31, 2009 http://www.centrosaudevida.com/site/	Muito obrigado! Usei para criar essa peça: http://www.centrosaudevida.com...eshow.html