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

Acho que tenho um certo problema para nomear os novos plugins, porém segue mais uma galeria de destaques:

Ontem na madrugada lancei a versão para adicionarem em qualquer site, portanto são 2 posts diferentes, mesmo usando a mesma imagem.

Agora estou lançando a versão para Wordpress do mesmo plugin:

Como o funcionamento do plugin é praticamente o mesmo do Dk Obama não irei fazer mais uma descrição tão longa, já que a demonstração fala por si só. (Cliquem na imagem para visualizar o plugin em funcionamento).

Instalação:

• Baixe o arquivo “dkslideshow.zip“  para sua máquina.
• Extraia e envie a pasta dkslideshow para a “wp-content/plugins” (NÃO MUDE NENHUM NOME INTERNO OU DA PASTA).
• Ative o plugin Dk Slideshow no painel administrativo
• Adicione o seguinte código nos arquivos de seu template, no local onde desejar que a galeria apareça:

<?php include (ABSPATH . '/wp-content/plugins/dkslideshow/galeria.php'); ?>

Customização:

Novamente a customização é feita pelos arquivos CSS, porém desta vez são um pouco mais complexas, principalmente pela quantidade de imagens a ser colocadas, pois as mesmas estão em uma div invisível de aproximadamente 2890px, o que complica nos cálculos.

Para aumentar ou diminuir a quantidade de imagens/links, devemos alterar os arquivos galeria.php e /js/galeria.js dentro da pasta do plugin.

Algumas dicas extras:

Assim como foi efetuado os testes na versão standalone o plugin funciona muito bem em conjunto com plugins como Lytebox, Floatbox, etc, os quais não estão incluídos no pacote para dar autonomia aos usuários de customizar como quiserem.

Incompatibilidades:

Solicitamos que caso encontrem alguma incompatibilidade nos informem, pois o mesmo foi testado com algumas bibliotecas e não houve grandes problemas.

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)

Decidi retomar esta série, que fez bastante sucesso aqui no DK. Tentarei como sempre manter a periodicidade dela, porém infelizmente não posso garantir nada.

Semana que vem na quinta-feira tem mais.

Faz um tempo atrás eu utilizava aqui no Dk Design o plugin “The Featured Content Gallery” do site WpElements, porém queria utilzar algo visualmente mais customizável e remover o uso de descrições direto do painel, o qual seria incluido direto na imagem.

 

E como muitos devem ter percebido, o usado acima é nada menos que uma réplica do usado no site de Barack Obama. Quando entrei no site dele, pois sinceramente é muito bem feito, tinha reparado que usava Jquery e tentei fazer a cópia, porém não sou um grande programador. Até o dia que o pessoal do DevThought desenvolveu exatamente o que eu queria, uma cópia, e coincidentemente usava Mootools, assim como o plugin anterior que eu usava.

 

A criação do plugin se tornou fácil, pois foram necessárias algumas mudanças no plugin usando antes. Com isso pude aproveitar a página de opções e a garantia que o plugin funcionaria perfeitamente. Assumo que foi um processo muito mais simples do que criar do zero, porém acho besteira recriar um código que já estava correto.

Instalação:

• Baixe o arquivo “dkobama.zip“  para sua máquina.
• Extraia e envie a pasta dkobama para a “wp-content/plugins” (NÃO MUDE NENHUM NOME INTERNO OU DA PASTA).
• Ative o plugin Dk Obama no painel administrativo
• Adicione o seguinte código nos arquivos de seu template, no local onde desejar que a galeria apareça:

<?php include (ABSPATH . '/wp-content/plugins/dkobama/galeria.php'); ?>

 

Agora para utilizar a galeria depois de instalada, dentro da aba opções (settings) do painel administrativo basta acessar a aba Dk Obama. Os campos são auto-explicativos, portanto não deverão ter maiores problemas.

Customizando a galeria (opcional):

Para alterar as dimensões basta alterar o arquivo slideshow.css dentro da pasta “Css” do plugin. Os itens responsáveis pela largura e altura principalmente são:

#slideshow { background: url('images/fundo.gif') no-repeat top; position: relative; padding: 0px 0 0px; width: 603px; height: 306px; }
#slideshow #pictures { background: url(’images/intro.jpg’); width: 437px; height: 300px; left: 0; overflow: hidden; }
#slideshow #menu { background: url(’images/lateral.jpg’); list-style-type: none; width: 166px; height: 240px; right: 0; padding-top: 60px; }

Também pode baixar o arquivo (template-slide.zip) que contém o psd que criei para as imagens internas. Todas as imagens estão dentro da pasta “Css/images”.

 

Semana que vem na quinta-feira tem mais.