Dkcell Design Tendências, inspiração e novidades do design

Sempre estou desenvolvendo novas idéias para Wordpress, porém em diversas conversas com o Dimitri do portal Ezone, pensamos que também muita coisa poderia ser aproveitada.

Como apenas adaptei o plugin Dk Obama para Wordpress, pois o mesmo já possuía uma versão para ser instalada em qualquer página Html, decidi com o meu novo plugin: DK Slideshow já dar esta oportunidade para quem nos visita e também não usa wordpress.

Na demonstração, como explicamos na página de demonstração utilizamos também o floabox, o qual não iremos explicar seu funcionamento por hora.

Instalação

Abra o arquivo html onde deseja incluir a galeria com seu editor preferido (recomendamos Dreamweaver ou Notepad++).

Adicione as seguintes linhas antes da tag </head> de seu documento:

<script type="text/javascript" src="js/galeria.js"></script>
<link rel=”stylesheet” type=”text/css” href=”css/slideshow.css”>

Agora faremos a chamada para a galeria dentro do site:

<div id="galeria” style=”z-index: 5″>
<div class=”headlines“><b>O melhor do Dk Design:</b></div>
<div class=”nav“><p><span id=”storyRange“>1-3</span> de 10</p><a id=”link2″ href=”#” name=”link2″><img src=”css/imagens/esq.gif” /></a><a id=”link1″ href=”#” name=”link1″><img src=”css/imagens/dir.gif” /></a></div>
<br style=”clear:both” />
<div id=”dlScroll” style=”width: 575px; overflow: hidden”>
<div style=”width: 2890px”>

Vamos a explicação das tags, para que possa saber o que está fazendo:

• galeria: é a div que faz a principal chamada para a base da galeria, onde controlamos via Css a altura e largura da base.
• headlines: é o título dado acima das imagens a serem adicionadas
• nav: são as 2 setas na lateral esquerda da galeria, e inclui também a contagem.
• storyRange: é o que controla a contagem das imagens exibidas, o mesmo também serve de referência para o arquivo galeria.js
• Dlscroll: é a galeria em si, onde serão incluidas as imagens e seus links/descrições.

Apenas uma outra caracteristica que gostaria de comentar é o fator de termos uma div com o tamanho de 2890px. A mesma é a div onde estão todas as imagens, e está oculta. Este valor tão grande normalmente é baseado na soma de todas as imagens e espaços entre as mesmas. Foi colocado um valor alto para que não houvessem bugs.

Agora podem adicionar as imagens, seguindo esta estrutura:

<a href=”http://www.linkparaosite.com” class=”descricao” id=”descricao1“>
<img src=”linkparathumbnail.jpg” alt=”Titulo alternativo para a imagem” />
<h4>Titulo da imagem</h4>
<p>Descrição da imagem/link.<br /></p>
</a>

Basta substituir as explicações marcadas em vermelho pelo conteúdo desejado.

Apenas lembrem sempre de ao partir para a próxima imagem mudar o campo marcado em azul pelo número correspondente, ex: 1,2,3,4…

Não se esqueça de finalizar a galeria com as devidas divs:

</div>
</div>
</div>

Cada uma fecha as que foram abertas no ínicio do código.

Pronto, com isso temos uma galeria como a do exemplo acima instalada no seu site.

Abaixo seguem todos os arquivos da demonstração, incluindo imagens (exceto o floatbox)