O Web Kit Banners é a última palavra em exposição de imagens. Ele é flexível, fácil de personalizar e completamente construído com HTML5 e CSS3.

Características

• Código limpo e leve
• 17 Efeitos de Transição
• Totalmente responsivo em todos os efeitos
• Utiliza aceleração de hardware em animações CSS3
• Suporte a legendas
• Reescrito para navegação mobile
• Construído com HTML5, CSS3, PHP 5.3+ e a última versão do jQuery

Exemplo Slideshow Screen

Slideshow com o famoso efeito Ken Burns.

Exemplo Slideshow Padrão

Exemplo Showcase Box

Exemplo Showcase com Botão

Exemplo Abas

Exemplo Barra com Abas

Exemplo Lista

Você vai adorar ver a arte de sua empresa impressa no Agência Web BH Kit em seu site.

Com o Agência Web BH Accordion, você pode expôr um conjunto de itens em um espaço reduzido. Quando você clica em cada título, ele é aberto/expandido mostrando um conjunto de itens anteriormente oculto.

Características

• Código limpo e leve
• Responsivo se adequando a qualquer tipo de tela de dispositivos portáteis
• Transição suave
• Opção de mostrar o conteúdo com tamanho específico pré definido
• Opção de abrir automaticamente, ou já estarem abertos todos os itens ao entrar na página
• Construído com HTML5, CSS3, PHP 5.3+ e a última versão do jQuery

Exemplo

Slide 1

Headline

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Slide 2

Headline

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Slide 3

Headline

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Slide 4

Headline

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Como usar

O Agência Web BH Accordion é a maneira mais fácil de criar e administrar todo conteúdo que você queira utilizar que possua interface amigável. Após criar o accordion, você pode carregá-lo onde preferir dentro de seu site utilizando trachos de código, ou através de módulos pré criados.

Slidesets são conjuntos de itens organizados exibidos ao mesmo tempo dentro de uma animação. Esses itens são totalmente costumizáveis com relação a tamanho e número de itens exibidos por vez..

Características

• Código limpo e leve
• Efeitos de transição marcantes
• Totalmente responsivo... Todos os efeitos inclusos
• Suporte a nomeclatura de grupos de elementos
• Navegação mobile dedicada
• Construído com HTML5, CSS3, PHP 5.3+ e a última versão do jQuery

Exemplo Slide

Sets criados automaticamente (4 itens por set), os nomes dos itens são exibidos e usados nos botoes de navegação.

Exemplo Zoom

Os sets são compostos manualmente, e os nomes são utilizados na navegação.

Exemplo Gotas

Os nomes dos arquivos são mostrados no set e é utilizado o efeito de Gota e navegação por botões.

Exemplo Deck

Set gerado automaticamente e utilização de botões Anterior/Próximo para navegação.

Slideset a melhor maneira de agrupar e expor produtos em seus site.

O Agência Web BH Mapas traz um jeito fácil e completo de inserir mapas em seu site. Várias características deixam você livre para customizar facilmente seus mapas, como mudar cores, adicionar pontos de referência e o extremamente útil traçar rota.

Características

• Seleção de localização automática via geocode
• Suporte a múltiplas marcações com pop-up informativo
• Opção de pegar direções através das marcas ativas
• Suporte a mapas customizados e também coloridos
• Utiliza a última versão da API do Google Mapas
• Construído com HTML5, CSS3, PHP 5.3+ e a última versão do jQuery

Exemplo Traçar Rota

Este mapa possui todas as propriedades, multiplas marcações e você ainda pode obter as direções.

Exemplo de Mapa com alteração de Cor

Ajuste ou inverta cores, saturação, luzes e gamma do mapa map.

Exemplo de Mini Mapa

Este mapa possui largura fixa, sem controles e sem marcas.

Como usar

Com o Agência Web BH Mapas, você pode facilmente criar mapas com cores diferentes, multiplas marcações, balões informativos, texto em pop-ups e obter direções de qualquer lugar a uma marca fixa, que no caso, pode ser o endereço da sua empresa.

O Web Kit Galeria oferece um jeito rápido, fácil e automatizado para que você tenha a melhor experiência na hora de publicar suas fotos em seu website. Você só tem que escolher a pasta de imagens e o restante todo é feito de forma automática, incluíndo recursos de arrastar e soltar.

Características

• Totalmente responsivo, incluídos todos os efeitos
• Criação de pastas basedas na seleção de imagens
• Suporte a multiplas pastas de imagens
• Criação automática de miniaturas
• Suporte a títulos nas imagens e links customizados
• Utiliza Web Kit spotlight e Lightbox
• Construído com HTML5, CSS3, PHP 5.2+ ae a última versão do jQuery

Exemplo ShowCase Box

Exemplo Parede de Imagens com Efeito Aumentar

Exemplo Polariod

Tony

Susan

Jennifer

Kim

Vanessa

Clark

Exemplo Escorregar 1

Exemplo Escorregar 2

Exemplo Slideshow Tela

Exemplo SlideShow Padrão

Exemplo ShowCase

Exemplo SlideShow Interno

Spotlight Example

Slideset Example

O Web Kit vem com uma administração facilitada para que você, com o mínimo de treinamento, consiga postar e organizar as fotos em seu site, solicite uma demonstração gratuitamente, ligue e converse com um de nossos consultores.

O Web Kit Central de Midia, é um player html 5, totalmente construído com html e css. Você pode incorporar facilmente video em seu site utilizando o elemento video do html 5. Uma chamada flash é utilizada para browsers antigos.

Características

• Player nativo para os navegadores mais recentes com tecnologia HTML 5
• Suporta MP4 (h.264), WebM, FLV, WMV e arquivos MP3
• Totalmente construído com HTML e CSS
• Design responsivo que se adapta a todos os dispositivos móveis
• Mesma interface em todos os navegadores
• Possibilidade de você mesmo criar a interface gráfica
• Retorno em flash para navegadores antigos

Exemplos

Exemplo de som em MP3:

Como usar

Use o elemento video do HTML5 para incorporar videos em seu site. Como no exemplo:

<video src="/video.mp4" width="320" height="240"></video>

Você pode também adicionar multiplas fontes para aumentar a compatibilidade de seus videos como h.264, WebM ou Ogg:

<video width="320" height="240">
  <source type="video/mp4"  src="/video.mp4" />
  <source type="video/webm" src="/video.webm" />
  <source type="video/ogg"  src="/video.ogv" />
</video>

Use o elemento audio do HTML5 para incorporar arquivos de audio MP3. Como no exemplo:

<audio src="/audio.mp3" type="audio/mp3"></audio>

O Web Kit Twitter é maneira mais amigável para que você exiba de forma amigável. Todos os Tweets são armazenados em cache para ficar super rápido, mesmo se o serviço do Twitter estiver fora do ar.

Características

• Filtro por hastags, palavras, de usuários, para usuários, referenciando usuários
• Bloquear tweets usando lista-negra
• Tweets armazenados em cache para aumentar a performance
• Tweets são mostrados mesmo quando o serviço está off-line
• 3 maneiras diferentes de exibir seus tweets
• Design responsivo para se adequar a todos os dispositivos
• Construído com HTML5 usando tempo e elementos de artigos

Como usar

Crie e publique. Uma série de opções a seu dispor para a exibição de seus tweets.

Por exemplo você pode mostrar apenas os teets de um determinado usuário ou tweets que possuem determinadas hash-tags ou palavras específicas. Todas as opções podem ser combinadas. Para filtrar as combinações basta utilizar um espaço entre as palavras. Por exemplo: Agência Web BH manager.

O Web Kit Spotlight cria uma película sobre suas fotos, que se move ao passar do mouse. Esta camada pode ser um html ou imagem. A imagem de lupa, padrão, é ideal para o aumento de suas fotos através do recurso lightbox.

Características

• Crie imagens de sobreposição facilmente
• Suporta sobreposição com imagens ou HTML
• 5 tipos de animação diferentes
• Design responsivo que se adapta a todas as resoluções de dispositivos móveis
• Construído com a última versão do jQuery

Exemplos

Caso você não configure sua spotlight, será carregado automaticamente a imagem de lupa. Se você definir uma sobreposição customizada, poderá escolher através das diferentes animações - fade, bottom, top, right e left.

Sobreposição (abaixo)

Sobreposição (direita)

Sobreposição (topo)

Sobreposição (esquerda)

Como usar

Use o atributo de customização do HTML5 data-spotlight para ativar o Agência Web BH spotlight.

<a data-spotlight="on" href="/mypage.html">
  <img src="/image.jpg" width="180" height="120" alt="" />
</a>

Para criar uma sobreposição customizada, use o elemento DIV da classe CSS overlay. Você pode ajustar o parâmetro efeito para o atributo data. Como no exemplo:

<a data-spotlight="effect:bottom;" href="/mypage.html">
  <img src="/image.jpg" width="180" height="120" alt="" />
  <div class="overlay">Custom Overlay</div>
</a>

Você pode ajustar o parâmetro efeito para Aparecer, abaixo, no topo, direita e esquerda.

O Agência Web BH LightBox permite que você veja suas imagens de uma maneira diferente e sofisticada, conteúdo HTML e multi-mídia sobre uma camada translucida sem deixar a página.

Características

• Display images, videos, HTML, Iframes, Ajax requests and SWF
• Supports YouTube, Vimeo, MP4 (h.264), WebM and FLV movies
• Group lightboxes and mix different content types
• Responsive design to fit all device resolutions
• Load other widgets in a lightbox
• 3 different opening and closing transitions
• 4 different caption styles
• Keyboard and mouse scroll wheel navigation
• Built on the latest jQuery version
• Works with Joomla and WordPress

Exemplos

Diferentes animações - aparecer, elástico e nenhum

Diferentes posições de título - flutuante, interno e sobrepor

Vários exemplos em uma só galeria (tente utilizando o teclado e o mouse)

• YouTube
• Vimeo
• MP4 (h.264)
• Swf
• Inline
• Iframe

Carregue Widget na Lightbox

Use #wk-ID para carregar Galerias de fotos, ou slideshows na lightbox. Como no exemplo: Web Kit Slideshow

<a data-lightbox="width:600;height:300;" href="#wk-10">Lightbox</a>

Como usar

Use o atributo data do HTML5 data-lightbox para ativar a lightbox. Você pode ajustar vários parâmetros através do atributo data. Como por exemplo:

<a data-lightbox="width:1000;height:600;" href="http://www.wikipedia.org">Lightbox</a>

Aqui você uma lista dos parâmetros mais comuns:

• titlePosition - Onde você quer que o título apareça? (flutuante, fora, dentro ou sobreposto)
• transitionIn - Ajuste a transição de abertura. (aparecer, elastico, ou nenhum)
• transitionOut - Ajuste a transição de fechar. (aparecer, elastico, ou nenhum)
• overlayShow - Ajuste para verdadeiro ou falso
• scrolling - Ajuste para Sim ou Não
• width - Ajuste em píxels
• height - Ajuste a altura em píxels
• padding - Ajuste o espaçamento em píxels