WorldWideScripts.net Delivering the best Add-Ons in more than 37 languages.

中文(简体), English, हिन्दी/हिंदी, Español/Castellano, العربية, Русский язык, Français, 中文 (台灣), বাংলা, Bahasa Indonesia, اردو, Português, Deutsch, Bahasa Melayu (بهاس ملايو‎), 日本語 (にほんご), فارسی, Italiano, తెలుగు, Türkçe, ગુજરાતી, Język polski/polszczyzna, Tiếng Việt, ಕನ್ನಡ, Українська мова, ไทย
JavaScript / Images and Media

Responsive Slideshow Photo Gallery Grid

— Add-On para WorldWideScripts.net

@pt1wwsAssine o nosso feed para se manter atualizado!

Novo! Siga-nos o que você quiser!


Responsive Slideshow Photo Gallery Grid - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

A Responsive Slideshow Galeria de fotos tem um / layout flexível / responsivo fluido. Basicamente, a grade é adicionado em uma página HTML para uma div do seu chosing e está adaptando base de largura que de div, a altura da grade é modificada com base no número de miniaturas e se outros elementos estão abaixo da div grade que vai ser empurrado para baixo automaticamente (fluxo de documentos). Nos exemplos fornecidos você pode ver algumas maneiras em que você pode usar essa grade, é claro que são possíveis outras configurações (note que o código desse exemplos é fornecido nos arquivos de download).

OOP pura JavaScript código, sem uso de jQuery ou outras bibliotecas, dessa forma não haverá incompatibilidades com páginas HTML que possam estar usando jQuery ou outras bibliotecas JavaScript.

A Responsive Slideshow Galeria de fotos está usando a GPU (aceleração de hardware), utilizando padrões HTML5. A velocidade de renderização e desempenho é impecável em computadores desktop e mais importante em dispositivos móveis, a forma como ele funciona ele vai tentar usar CSS3 e se este não estiver disponível, ela vai para baixo queda para CSS2 ou CSS1 para navegadores mais antigos, como o IE7 e IE8.

Excelente desempenho em dispositivos móveis, você pode ver no vídeo de demonstração que ele seja executado como um aplicativo nativo!, foi codificado e otimizado para dispositivos móveis e é 100% compatível e móvel é claro que vai correr tão grande em computadores desktop incluindo em navegadores mais antigos, como o IE7 e IE8. Nós testamos em iPad3 (IOS) e em um Samsung Galaxy S3 (android) e funciona muito bem em ambos os dispositivos, abaixo estão os links para visualizar este demos.
Assista demonstração em execução no Samsung Galaxy S3 (android) ou Assistir demonstração em execução no IPAD (IOS).

GRID PRINCIPAIS CARACTERÍSTICAS

Flexível layout / fluido: você pode controlar o tamanho da grade com CSS ou JavaScript, basicamente, tem um layout adaptável que torna o candidato perfeito para qualquer tipo de projeto.

Todo o tema de cor pode ser modificado.

Tamanho personalizável miniaturas e geometria: esse recurso permite que você altere o tamanho das miniaturas e o espaço entre as miniaturas.

Customizável fronteira miniaturas e fundo: cada miniatura pode ter uma borda e um fundo, cor de fundo da miniatura, o tamanho da borda e cor da beira são customizáveis.

Thumbnail descrição: cada polegar pode ter uma breve descrição com um fundo transparente sob ele e essa descrição é visível quando o mouse está sobre uma miniatura, o texto pode ser formatado com CSS, a cor de fundo ea opacidade também pode ser modificado (opcional).

"Carregar mais miniaturas apresentam": este é um recurso impressionante que melhora o desempenho global ea velocidade de carregamento, pois desta forma nem todas as miniaturas são carregados e exibidos ao mesmo tempo. Por exemplo, se você tem um total de 120 miniaturas você pode mostrá-los em conjuntos de 50 miniaturas, e por isso inicialmente na grade do primeiro conjunto de 50 miniaturas são carregados e exibidos, e quando a "carga mais miniaturas" botão é pressionado a próxima conjunto de 50 miniaturas são carregados e exibidos, e, finalmente, quando o botão "carregar mais thumbnails" é pressionado novamente os 20 miniaturas restantes são mostrados. O número de miniaturas para carregar por jogo é personalizável, ele não tem que ser 50, pode ser qualquer número que você considera. Esse recurso é opcional, se for desativado todas as miniaturas são carregados e exibidos.

Personalizado acção de imprensa em miniatura: quando uma miniatura é pressionada, você pode optar por exibir um lightbox mídia original que temos codificado, ou para abrir uma nova página, a url e alvo desta página Web pode ser especificado. A lightbox pode exibir imagens, ou possa exibir os vídeos carregados no YouTube ou Vimeo.

LIGHTBOX CARACTERÍSTICAS PRINCIPAIS

Flexível layout / fluido: a lighbox sempre preencher a janela do navegador disponível.

Todo o tema de cor pode ser modificado.

Vimeo e apoio YouTube: tudo que você tem a fazer é incluir o link do vídeo do YouTube ou Vimeo que você deseja exibir e lighbox irá exibir e reproduzir o vídeo. O tamanho (largura e altura) de cada vídeo pode ser ajustado facilmente.

Zoom e apoio a extração de imagens: você pode zoom in e out uma imagem e você pode deslocar a imagem, desta forma você pode ver a imagem em grande detalhe (opcional).

Botão Slideshow (opcional).

Slideshow atraso, o atraso da apresentação de slides pode ser definido em segundos.

Autoplay Slideshow.

Slideshow gráficos personalizados animados.

Avançar e anterior botões de navegação (opcional).

Informações botão e janela de informações: cada item lighbox pode ter uma descrição, a aparência do texto e janela pode ser formatado com CSS (opcional).

Border customizável e fundo: o tamanho da borda e cor e também a cor de fundo principal é customizável.

O suporte ao teclado: as setas esquerda e direita pode ser usado para navegação (opcional).

ATUALIZAÇÕES

2013/02/19 - Nós adicionamos um novo recurso a esta rede, a opção de adicionar ícones dos media sobre as miniaturas quando eles são selecionados, agora você pode escolher entre a descrição thumbnails, ícones de mídia ou "nenhum" quando uma miniatura é selecionada.

2013/03/07 - Corrigido alguns bugs relacionados à lightbox e acrescentou um melhor suporte para detecção de móveis.


Download
Outros componentes nesta categoriaTodos os componentes deste autor
ComentáriosPerguntas mais frequentes perguntas e respostas

Propriedades

Criado:
15 de 13 de janeiro

Última atualização:
8 março 13

Alta resolução:
sim

Navegadores compatíveis:
IE7, IE8, IE9, IE10, IE11, Firefox, Safari, Opera, Chrome

Arquivos incluídos:
JS JavaScript, HTML, CSS

Palavras-chave

eCommerce, eCommerce, Todos os itens, css3, dinâ, mico, flexí, vel, fluido, grade, html5, caixa de luz, mí, dia, responsivo, vimeo, Youtube