Como criar um visualizador de imagens com lightbox2
Video: [VB.NET] Como criar um visualizador de imagens By Dkmaster
Conteúdo
Grupos de imagens podem ser apresentadas na web em uma variedade de maneiras diferentes. Há galerias, controles deslizantes e visualizadores de imagem Luz, todos os quais podem ser construídas em um número ilimitado de maneiras. Por exemplo, visualizadores de imagem pode ser construído usando uma combinação de HTML, CSS, javascript, jQuery, ou mesmo o Flash.
Embora a melhor solução será compatível com as normas e ter uma pegada pequena de cerca de 25K ou menos, a solução certa, muitas vezes depende das necessidades específicas do site.
Para ilustrar, suponha que você está projetando um site para um artista que quer ter uma página carteira com oito pequenas imagens organizadas em uma grade, e quando você clicar em qualquer das imagens menores, uma versão maior será exibido na tela. Uma das melhores soluções para este tipo de necessidade é o visualizador de imagens Lightbox2.
Além de ser um dos visualizadores de imagens mais populares hoje em dia, é também leve e super fácil de instalar.
O visualizador de imagens Lightbox2 funciona melhor quando você tem dois conjuntos de imagens. O primeiro conjunto é o menor imagens em miniatura que aparecem quando a página é aberta no browser, eo segundo conjunto é as maiores imagens visíveis através do widget Lightbox2.
Video: Baixe visualizador de imagens para Windows 10, 8, 8 1 , 7, Xp
Os passos seguintes mostram como é fácil adicionar o visualizador de imagens Lightbox2 para uma página web:
Visite a website Lightbox2 e baixar uma cópia dos arquivos Lightbox2.
O arquivo Lightbox Zip contém vários arquivos, incluindo um arquivo de exemplo chamado index.html, uma pasta com dois arquivos javascript, uma pasta com um arquivo CSS, e um imagens pasta com todas as imagens usadas no visualizador de imagens Lightbox2. Copie o conteúdo extraído deste arquivo Zip em seu Lightbox pasta do site gerenciado.
(Opcional) Se você estiver usando o Dreamweaver, criar um site conseguiu uma nova pasta no seu computador chamado Lightbox.
Escolha Site → Novo Site para criar um novo site conseguiu o novo Lightbox pasta. No campo Nome do site digite o nome Lightbox e no campo pasta do site local, procurar e selecionar o novo Lightbox pasta.
Abra o arquivo chamado lightbox.html no Dreamweaver ou em seu editor web preferido.
O layout deste arquivo inclui uma mesa cheia de oito imagens em miniatura, pronto para que você adicione o código Lightbox2.
Adicione os seguintes links para os arquivos javascript e CSS para o do seu código:
Esses links chamar os arquivos apropriados que ajudam a tornar a função Lightbox.
Converter cada uma das imagens em miniatura em hiperlinks que apontam para suas respectivas imagens em close-up e incluem a rel =”coleção [mygroup]” atributo que ativa Lightbox.
Certifique-se de substituir meu grupo com um nome descritivo para o seu grupo particular de imagens.
Por exemplo, alterar o código para a primeira imagem a partir desta:
Para isso, onde as ligações imagem em miniatura para o close up:
(Opcional) Se você gostaria de suas imagens para incluir uma legenda, adicione o título atribuir ao tag link, como mostrado aqui:
Repita as etapas 5 e 6 para as imagens restantes na tabela.
Se desejar, combinar os títulos de seus closeup imagens com o texto alternativo de suas respectivas imagens em miniatura.
Salve o arquivo e visualizar o visualizador de imagens Lightbox2 com o lançamento da página no seu navegador preferido.
Clique em qualquer das imagens em miniatura para ver como o Lightbox2 funciona. Você deverá ver a página do browser fraca como uma janela pop-up aparece acima dela, exibindo a imagem do close-up da miniatura que você clicou.
Com a imagem close-up na tela, passe o mouse sobre ele para ver uma seta de navegação à esquerda ou branca aparecer na parte superior da imagem close-up.
Ao clicar no lado esquerdo ou direito da imagem avança-lo de um close-up para o próximo. Abaixo do close-up, você também deve ver o título da imagem, juntamente com o número atual e total de imagens no conjunto (como Não em Kansas, Imagem 5 de 8) e um grande X você pode clicar para fechar a Lightbox e voltar para a janela do navegador pai.
Se por algum motivo o seu visualizador de imagem Lightbox não está funcionando corretamente, voltar através dos passos para verificar que você adicionou todos os links corretamente. Para obter ajuda adicional, visite o Lightbox2 Forum.