Como o lightbox exibe uma página da internet

Escrito por vail joy | Traduzido por césar campos
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como o lightbox exibe uma página da internet
Exiba páginas da internet em uma estrutura lightbox usando um script que suporte iframes (Comstock/Comstock/Getty Images)

O "lightbox" (caixa de luz), também conhecido como janela modal, é uma bela maneira de exibir o conteúdo vinculado como imagens, formas e diálogos sobrepondo-os na página principal de seu site. Isso pode ajudar a manter a atenção do visitante sobre o conteúdo e melhorar a utilidade geral da página. Pelo projeto, a maioria dos plugins e scripts de "lightbox" são codificados para exibir conteúdo baseado em texto ou imagem. Para exibir outra página da internet, você precisa escolher um script que suporte especificamente a guia HTML "iframe".

Nível de dificuldade:
Moderadamente fácil

Outras pessoas estão lendo

Instruções

  1. 1

    Baixe e instale o plugin de jQuery "prettyPhoto", que é uma versão melhorada do script de lightbox original jQuery que suporta a exibição de páginas da web. Se você usa uma plataforma de publicação on-line como o Drupal ou WordPress, pode instalar o "prettyPhoto" automaticamente através de um plugin ou módulo.

  2. 2

    Abra a página que contém o link ou elemento que você deseja abrir o site externo usando o editor alinhado da plataforma de publicação. Como alternativa, abra o documento em um editor de HTML ou de texto.

  3. 3

    Remova as guias "href" existentes do link ou elemento e substitua-a por uma nova que se pareça com essa:

    <a href="#" rel="prettyPhoto" width="X" height="X">

    Substitua "#" pela URL para a página que você deseja exibir no lightbox . Substitua "X" pela altura e a largura que você deseja que a estrutura do lightbox tenha. É importante que a altura e a largura sejam grandes o suficiente para exibir todo o conteúdo, mas não ultrapasse essas medidas de resolução de tela do visitante. Como isso é difícil de prever, tente usar estruturas que não sejam maiores a 1000 pixels de largura por 700 pixels de altura.

  4. 4

    Posicione o cursor no final da URL e digite o parâmetro "?iframe=true”. Por exemplo, seu link finalizado deve ficar dessa forma:

    <a href="http://www.mysite.com/page.html?iframe=true" rel="prettyPhoto" width="800" height="600">Texto de link ou elemento HTML aqui</a>

    O "? iframe = true" diz ao script para inicializar o suporte para atrair o conteúdo externo, e o atributo relativo "prettyPhoto" diz ao jQuery para abrir o link usando o lightbox.

Dicas & Advertências

  • Você pode criar o seu próprio lightbox usando apenas os estilos CSS, criando um recipiente oculto para o iframe e definindo a URL de destino do seu link para o recipiente oculto. Usando o parâmetro "ontarget" em seus estilos CSS, você pode obter o elemento de link para exibir o recipiente oculto com um clique, sem usar qualquer JavaScript.

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