Dhonishow: Criando uma Galeria de Fotos

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://dhonishow.de/

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;
}

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *