Linha de comando.com - Tecnologia, Informação, Dicas e muito mais. » dhonishow http://www.linhadecomando.com quem sabe eu possa te ajudar! Thu, 02 Feb 2012 09:42:53 +0000 en hourly 1 http://wordpress.org/?v=3.3 Dhonishow: Recursos Avançados http://www.linhadecomando.com/galeria-de-fotos/dhonishow-recursos-avancados http://www.linhadecomando.com/galeria-de-fotos/dhonishow-recursos-avancados#comments Wed, 28 Jan 2009 18:03:47 +0000 Tiago http://www.linhadecomando.com/?p=155 continuando… eu dividi o post pois estava ficando muito extenso.

Este post será focado nos itens a mais, disponíveis, para configurar o dhonishow.

Recursos Avançados

» Alterando o tamanho do div, da imagem a ser exibida e da barra de navegação:

Para alterar estes parâmetros deve-se editar o arquivo dhonishow.css. Localize as linhas abaixo e mude os valores de witdh (largura) e height (altura).

.dhonishow {
    width: 293px;
}           
.dhonishow-image {
    width: 293px; 
    height: 384px;
}     
.dhonishow-navi {  
    width: 293px;
}

» Tipos de transições:

parâmetros:  effect_appear, effect_blind, effect_slide, effect_horizontal

Exemplo:

<div class=”dhonishow effect_appear“>

» Alterar a duração da transição:

parâmetro: duration_n (n = o valor em segundos) 

Exemplo:

<div class=”dhonishow duration_3“>

» Quantidade de segundos para cada foto aparecer:

parâmetro: autoplay_n (n = o valor em segundos) 

Exemplo:

<div class=”dhonishow autoplay_5“>                               

» Ocultando coisas:

parâmetros: hide_paging, hide_alt (título da imagem), hide_navigation

Exemplo:

<div class=”dhonishow hide_paging“>

Resultado final:

]]> http://www.linhadecomando.com/galeria-de-fotos/dhonishow-recursos-avancados/feed 0 Dhonishow: Criando uma Galeria de Fotos http://www.linhadecomando.com/galeria-de-fotos/criando-uma-galeria-de-fotos-com-dhonishow http://www.linhadecomando.com/galeria-de-fotos/criando-uma-galeria-de-fotos-com-dhonishow#comments Wed, 28 Jan 2009 17:37:01 +0000 Tiago http://www.linhadecomando.com/?p=132 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;
}

]]> http://www.linhadecomando.com/galeria-de-fotos/criando-uma-galeria-de-fotos-com-dhonishow/feed 0