Como criar uma "lightbox" para abrir no iFrame

Escrito por terrance harrington | Traduzido por caio borges
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como criar uma "lightbox" para abrir no iFrame
Adicione praticamente qualquer conteúdo em uma lightbox com o código correto (Comstock/Comstock/Getty Images)

"Lightbox" adiciona uma funcionalidade interessante a sites comerciais. Ao clicar no link do site, a tela escurece e uma lightbox aparece flutuando sobre a tela e preenche toda a página. Lightboxes com "inline frames" (iframes) -- quadros alinhados -- são simples de criar. Para isso, salve uma única pasta no servidor da internet e adicione algumas linhas de códigos em uma página do seu site.

Nível de dificuldade:
Moderadamente fácil

Outras pessoas estão lendo

Instruções

  1. 1

    Baixe o arquivo "GreyBox_v5_54" gratuitamente no orangoo.com/labs/GreyBox/. Descompacte-o. Carregue a pasta "greybox" no seu diretório (raiz) principal de internet.

  2. 2

    Cole o código na seção do cabeçalho (entre <head> e </head>) do HTML, na página em que a lightbox deve aparecer, substituindo "www.meusite.com" com o endereço do seu website:

    <script type="text/javascript"> var GB_ROOT_DIR = "http://www.meusite.com/greybox/"; </script> <script type="text/javascript" src="greybox/AJS.js"></script> <script type="text/javascript" src="greybox/AJS_fx.js"></script> <script type="text/javascript" src="greybox/gb_scripts.js"></script> <link href="greybox/gb_styles.css" rel="stylesheet" type="text/css" />

  3. 3

    Crie o link para a lightbox no corpo do HTML da página utilizada na etapa 2 (entre <body> e </body>) com o código a seguir, substituindo "meu site" com o seu site:

    <a href="http://www.meusite.com" rel="gb_page_center[400,500]"> Lightbox to display mysite's web site, 500 pixels wide, 400 pixels high, in the center screen.</a>

    Troque os valores de altura e largura para conseguir lightboxes de tamanhos diferentes.

  4. 4

    Teste a lightbox, abrindo a página do site em um navegador e clicando no link. Se estiver funcionando da forma que você deseja, pode-se adicionar lightboxes nas demais páginas.

Dicas & Advertências

  • Greybox fornece guias no orangoo.com/labs/GreyBox/Documentation/. Leia os exemplos e as seções de uso normal e avançado para adicionar funcionalidades. Leia também as páginas de perguntas frequentes para ter inspirações.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível