A adição de um espetáculo de luz ou caixa de luz para um site permite que você visualize fotos com maior clareza . Um usuário pode clicar em uma imagem para ampliá-lo em uma janela de caixa de luz , que se redimensiona de acordo com o tamanho da imagem . Lightbox é uma ferramenta eficaz para exibir fotos enormes , sem abrandar o tempo de carregamento , porque você vai estar mostrando miniaturas em vez de suas fotos reais. O usuário não tem que sair da página atual para ver a imagem maior. Ele pode simplesmente fechar a imagem de olhar para outra foto. Lightbox é construído em Javascript e pode ser adicionado a um site usando Javascript, jQuery ou um plugin Wordpress. Coisas que você precisa
Notepad
Mostrar Mais instruções
Wordpress
1
instalar o Lightbox 2 plugin no Wordpress. Vá para a área de administração do site e clique em " Adicionar Novo ", no menu " Plugins" . Pesquisar usando o texto " Lightbox 2. " Instale o primeiro plugin que aparece nos resultados da pesquisa .
2
Ative o plugin. Esta opção irá aparecer na página uma vez que o plugin foi instalado.
3
Adicionar imagens a um post em seu blog .
4
Clique em uma imagem em um poste e caixa de luz será aberta.
Javascript
5
Baixe os Lightbox 2 arquivos e instalar no servidor ( consulte Recursos).
6
Abra um editor de texto, como o Bloco de Notas.
7
Crie um novo arquivo HTML.
8
Adicione os links para os arquivos de biblioteca JavaScript que foram baixados em uma etapa e links para imagens anteriores:
< roteiro type = "text /javascript " src = " js /scriptaculous.js ? carga = efeitos , construtor "> < /script >
< tipo de script = "text /javascript " src = " js /lightbox.js "> < /script >
href="images/image1.jpg" rel="lightbox[roadtrip]"> imagem 1
imagem 2
imagem 3
9
Salve o arquivo e executá-lo em um navegador. Clique no link para abrir a imagem em uma caixa de luz.
JQuery
10
Baixe os arquivos JQuery e instalá-los no servidor ( consulte Recursos).
.
11
Abra um editor de texto, como o Bloco de Notas e crie um novo arquivo HTML
12
Adicionar links para o JQuery e CSS eo link para a foto :
< tipo de script = "text /javascript " src = " js /jquery . lightbox- 0.4.js ">
< link rel =" " type =" stylesheet text /css "href = " css/jquery.lightbox-0.4.css " media = " tela "/>
href="image1.jpg"> 
13
Adicione código JQuery , para mostrar a caixa de luz quando a foto é clicado :
