DhoniShow é um javascript criado para você desenvolver galeria de fotos com transição e aplicar em sites.
1. Primeira coisa a se fazer é baixar os códigos javascripts necessários para o funcionamento.
- Dhonishow – versão atualizada: http://lifedraft.de/projekte/dhonishow/
Frameworks necessários:
- Prototype: http://prototypejs.org/
- Script.aculo.us: http://script.aculo.us
2. Após baixar os arquivos, vamos organizar a estrutura de pasta, para ficar mais organizado. Crie uma pasta “site” e as subpastas “js” / “css” / “img”.
site (raiz www)
|——-js
|——-css
|——-img
3. Copie para dentro da pasta “js” os arquivos: dhonishow.js, prototype.js (arquivo foi renomeado), effects.js e scriptaculous.js e para dentro da pasta “css” o arquivo: dhonishow.css.
4. Agora, faça a chamada destes scripts dentro das tags <head></head> do seu código HTML.
Deverá ficar assim:
<head>
<link rel=”stylesheet” href=”css/dhonishow.css” type=”text/css” media=”screen” />
<script src=”js/prototype.js” type=”text/javascript”></script>
<script src=”js/effects.js” type=”text/javascript”></script>
<script src=”js/scriptaculous.js” type=”text/javascript”></script>
<script src=”js/dhonishow.js” type=”text/javascript”></script>
</head>
5. Veja como é fácil criar uma galeria de fotos com efeitos surpreendentes. Basta colocar as suas imagens dentro da tag <div>. Esta tag deverá conter uma classe de nome “dhonishow”.
obs. as imagens devem estar dentro da pasta “img”.
<div class=”dhonishow”>
<img src=”img/img1.jpg” alt=”Imagem 1″ />
<img src=”img/img2.jpg” alt=”Imagem 2″ />
<img src=”img/img3.jpg” alt=”Imagem 3″ />
<img src=”img/img4.jpg” alt=”Imagem 4″ />
</div>
6. Para visualizar os botões de navegação, deve-se copiar a pasta “dhoni_img”, que está junto com o pacote de download do dhonishow, para o diretório onde está localizado o seu arquivo index.html.
obs. se você quiser alterar o nome desta pasta ou até mesmo colocá-la em outro lugar, deve-se alterar os dados no arquivo dhonishow.css
.dhonishow-navi .dhonishow-next-picture {
margin-right: 15px;
background: url(../dhoni_img/next.gif) no-repeat;
}
.dhonishow-previous-picture {
background: url(../dhoni_img/previous.gif) no-repeat;
}
.dhonishow-next-picture:hover {
background: url(../dhoni_img/next_hover.gif) no-repeat;
}
.dhonishow-previous-picture:hover {
background: url(../dhoni_img/previous_hover.gif) no-repeat;
}
Related posts:
