encotrei essa galeria com miniaturas de rolagem, que deslizam para fora a partir de uma navegação. bem interessante no codrops veja aqui um demo –>>
Nós estamos indo para usar jQuery e algumas propriedades CSS3 para o estilo. A idéia principal é ter um menu de álbuns onde cada item irá revelar uma barra horizontal com as miniaturas quando clicado. O recipiente de miniaturas rolará automaticamente quando o usuário move o mouse para a esquerda ou direita.
Quando uma miniatura é clicada, será carregado como um preview da imagem completa ao fundo da página. Teremos também um recipiente de texto para um dos itens do menu.
As belas fotos são de Mark Sebastian's photostream no Flickr. Você pode encontrar todas as imagens usadas no demo no conjunto A "coisa" Factor. Reveja a licença Creative Commons, que está incluída na demo.
Então, vamos começar!
A Markup
Nosso HTML está indo principalmente composto por uma capa e lista do menu. Teremos alguns outros elementos, como a imagem completa, o div de carga e da sobreposição de tons intermédios. Primeiro, vamos criar o wrapper:Dentro da nossa capa, vamos adicionar o seguinte:
O primeiro elemento é a nossa imagem de visualização completa. A sobreposição é vai ser um div fixo, que se estenderá durante toda a tela repetindo um padrão de meio-tom para criar um efeito de sobreposição de fantasia sobre a imagem. Nós também adicionar um título e uma div de carregamento.
Em seguida, adicionar uma lista não ordenada, onde cada elemento li vai conter um espaço para o seu título ea capa miniaturas. O último elemento li que vai conter algumas wrapper para o texto, é por isso que não vamos dar-lhe o "álbum" de classe. Mais tarde, em função jQuery teremos de distinguir isso.
As imagens em miniatura obter o valor de alt o caminho para a imagem em tamanho completo. Isso pode não ser o uso correto do atributo alt, mas isso é tão conveniente para os nossos funcionalidade que vamos usá-lo desta forma.
Vamos dar uma olhada no estilo.
A CSS
Primeiro, vamos repor as margens e paddings de todos os elementos e definir os estilos gerais:Fazer o transbordamento corpo escondido evitamos qualquer barra de rolagem aparecendo, mas você pode adaptar isso para as suas necessidades. Ou seja, se é importante que o tamanho imagem é completamente visível pelo usuário, você pode querer remover o excesso: propriedade oculta.
Em seguida, vamos definir o estilo para a imagem em tamanho completo, a sobreposição ea div de carga:
Ao definir a largura da imagem a ser sempre 100%, podemos ter certeza que ele ocupa todo o espaço horizontal da página. Para telas muito grandes a imagem pode ficar pixelado que pode, naturalmente, ser evitado pelo uso de imagens gigantescas. Em nossa demo, usamos uma largura máxima de 1600 pixels para fazer o tempo de carregamento suportável. O padrão de meio-tom na parte superior da imagem ajude um pouco para disfarçar um efeito pixelado.
Favor observar que quando a opacidade é usado, o IE propriedade de filtro deve ser usado se você deseja obter efeitos semi-transparente no IE. O overlay é um lixo se você usar a propriedade de filtro, no entanto. Confira o arquivo ZIP, eu adicionei o IE DXImageTransform filtro para o respectivos estilos.
A navegação será posicionado absolutamente:
O valor inicial é definido como deixou -300 pixel porque queremos que ela deslize em apenas após a nossa imagem completa é carregado. Se você usar títulos mais na lista de itens, poderá ser necessário adaptar este valor.
elementos de nossa lista vai ter o seguinte estilo:
A extensão para o título será denominado como segue:
Em seguida, vamos definir o estilo para o vãos com a seta para cima / baixo para abrir e fechar o recipiente em miniatura:
O invólucro para a embalagem miniatura será posicionado de forma absoluta e nós queremos esconder o transbordamento vertical:
Embora os polegares são apenas 120 pixels de altura, queremos deixar algum espaço para que a sombra da caixa de imagens no interior não vai ser cortada.
O recipiente de miniaturas serão simplesmente denominados como se segue:
As miniaturas terá uma caixa de sombra pura e alguns espaçamentos:
A classe st_about é a classe wrapper para o contentor de texto:
E, finalmente, o recipiente próprio texto:
E isso é todo o estilo! Vamos fazer alguma mágica!
O JavaScript
Em nossa função jQuery, vamos primeiro definir algumas variáveis:A primeira coisa que nós queremos fazer é carregar a imagem no tamanho atual completo.Após o carregamento, queremos que a navegação seja exibida:
O buildThumbs () calcula as larguras de todos os contêineres em miniatura. Nós precisamos que o valor para a função de rolagem automática posteriormente:
Em seguida, definir o comportamento de clicar nas setas. Se ele é baixo, vamos expandir o contêiner de miniaturas e esconder qualquer outro. Se isto acontecer, vamos fazer o contêiner atual esconder novamente.
Antes de definir o hideThumbs () função, especificar o que acontece quando se clica em um polegar. A imagem em tamanho completo será exibido e enquanto ele está carregando faremos a div de carregamento aparecer. Em seguida, animar a opacidade e se desvanece a imagem em:
A função para ocultar as miniaturas é a seguinte:
Nós animar a altura da li e fazer o recipiente de miniaturas desaparecem assim. Precisamos também de definir a classe para a extensão de seta corretamente.
E, finalmente, vamos definir o makeScrollable () função que rola automaticamente o div miniaturas horizontalmente em mover o mouse:
Para cufonizing os títulos e adicionar alguma sombra decente, vamos incluir o seguinte na cabeça do nosso documento html:
E é isso! Esperamos que tenham gostado do tutorial e achar que é útil!
demo –>> http://tympanus.net/Tutorials/ThumbnailsNavigationGallery/
downloads—>> http://tympanus.net/Tutorials/ThumbnailsNavigationGallery/ThumbnailsNavigationGallery.zip
creditos: codrops
.png "English"){kind=small}
Postagens
