24 Jul
Adicione uma galeria de destaques a qualquer site
Postado por kaiserlino em: Recursos, Todos. Ninguém comentou
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.
Nosso plugin em ação, clique para ver o demo.
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)
Download:
Dk Slideshow 113
