Programação

Lightbox ao carregar página

Salve galáxia, mais um post pra ajudar quem precisa, hahaha. Nesse tutorial vou ensinar como implementar no site um lightbox ao carregar página, ou seja, quando o usuário acessar a home por exemplo, abrirá um lightbox com imagem ao abrir o site.

Veja aqui o exemplo

Eu não vou usar nenhum plugin pro Lightbox, vou apenas usar jQuery, CSS e HTML, mas é muito fácil e rápido pra implementar, então, mãos a obra.

Lightbox ao carregar página

Caso você ainda não esteja chamando a biblioteca jQuery no seu site, você pode usar a biblioteca do Google, para isso basta adicionar a linha abaixo antes de fechar a tag < /head > no seu código.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

O script a seguir é apenas para que o lightbox ao carregar página seja fechado quando o usuário clicar na imagem ou fora dela, e o script ficou assim:

<script type="text/javascript">
// JavaScript Document
 var $q = jQuery.noConflict();
$q(document).ready(function()
{
$q("#lightbox, #lightboxContent").click(function(){
$q("#lightbox, #lightboxContent").hide();
})});
</script>

Agora vamos inserir a marcação HTML, que no exemplo, eu adicionei logo abaixo do fechamento da tag

<div id="lightbox"></div>
<div id="lightboxContent"><img src="caminho-da-imagem"></div>

E finalmente o CSS do lightbox ao carregar página que no exemplo, ficou dessa maneira

#lightbox {
    background-color: #000;
    float: left;
    height: 100%;
    opacity: 0.8;
    -moz-opacity: 0.80;
    filter: alpha(opacity=80);
    position: fixed;
    width: 100%;
    z-index: 9999999;
}	
#lightboxContent {
    margin: 0 auto;
    opacity: 1;
    position: absolute;
    text-align: center;
    top: 150px;
    width: 100%;
    z-index: 2147483647;
    cursor:pointer;
}

Veja aqui o exemplo

Agora o ligthbox ao carregar página já esta pronto, e o que achou? Fácil de implementar né.

Se o post te ajudou curte a página, não custa nada e me incentiva a continuar escrevendo.
Posts recomendados
Comentários

    4 respostas para Lightbox ao carregar página

    1. Leandro escreveu em 23 de agosto de 2014

      valeu pela dica. Estou um tempinho sem programar e me ajudou com atualização do meu site

    2. Qcabeca escreveu em 24 de agosto de 2014

      Que bom que ajudou Leandro, sucesso ae. Abraço

    3. VLADIMIR escreveu em 25 de fevereiro de 2015

      Dica ótima! Só que estou com o problema.
      Talvez problema pra mim, não pra vocês.
      Quero criar uma assinatura de Newsletter nesse modal, e fazer a validação dos campos, mas quando clico no botão cadastrar fecha o modal e não a pessoa não vai ver a mensagem.
      Tem alguma forma de deixar o modal fechar somente quando clicar ou no botão fechar, ou quando concluir o cadastro?
      Obrigado – acho que falei muito.

    4. Qcabeca escreveu em 6 de março de 2015

      Olá Vladimir, no tutorial, existe a linha abaixo

      $q("#lightbox, #lightboxContent").click(function(){

      Crie uma div para o botão fechar, no caso, vai ter ID chamado close, e você deve alterar a linha acima, pelo seguinte código

      $q("#close").click(function(){

      Depois no seu lightbox, crie a marcação do botão, exemplo

      <div id="close">Fechar</div>

      Acho que é isso, sucesso ae. Abraço

    Envie seu comentário.

    Seu email não será publicado