Web Louca

Home scripts Mootools SlideShow

Mootools SlideShow

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


<script language="javascript" type="text/javascript" src="/js/mootools-1.2-core.js"></script>

<script language="javascript" type="text/javascript" src="/js/slideshow.js"></script>

 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>

 

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

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

<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(0)
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

Muito obrigado!

Usei para criar essa peça: http://www.centrosaudevida.com...eshow.html


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!


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

Nuvem de Tags

browser script firefox site