4

Estou tentando a algum tempo resolver uma situação que tenho, preciso que ao entrar no site uma propaganda seja exibida e para isso estou tentando usar o plugin Lightbox2 mas na documentação do próprio plugin não é indicado como fazer isso, fiz algumas pesquisas e até cheguei em algumas alternativas mas mesmo assim nada funcionou.

Consegui esse código no SO em inglês e fiz como recomendado:

// Automagically load Lightbox on Page Load - by Bramus! (http://www.bram.us/)
// Code modded from http://www.huddletogether.com/forum/comments.php?DiscussionID=1269&page=1#Item_0
function autoFireLightbox() {
    //Check if location.hash matches a lightbox-anchor. If so, trigger popup of image.
    setTimeout(function() {
            if (document.location.hash && $(document.location.hash.substr(1)).rel.indexOf('lightbox') != -1) {
                myLightbox.start($(document.location.hash.substr(1)));
            }
        },
        250
    );
}
Event.observe(window, 'load', autoFireLightbox, false);

Link da pergunta em inglês: Lightbox2 pageload trigger

No corpo da minha página tenho esse link:

<a href="imagens/promocao.jpg" data-lightbox="image-1" data-title="" id="myLightbox"></a>

Mas mesmo com as tentativas não obtive êxito.

2 Respostas 2

3

Até aonde sei Event.observe(...); é uma "função" do prototype.js (https://github.com/prototypejs/prototype/blob/5fddd3e/src/prototype/dom/event.js#L763, não confundir com <Object>.prototype), logo se olhasse no console do navegador provavelmente iria ver muito bem evidente o erro:

TypeError: Event.observe is not a function

Basta usar o que é NATIVO que não vai ter problemas:

window.addEventListener("load", autoFireLightbox);

Ou pode usar também o DOMContentLoaded, que só espera até o DOM estar pronto, assim sendo mais rapido que o load, pois não vai precisar esperar outros recursos:

document.addEventListener("DOMContentLoaded", autoFireLightbox);

Claro que usando jQuery você pode usar o $.ready() (ou o equivalente $()), assim:

$(autoFireLightbox);
1
+50

O código que você tentou usar, mostrado na pergunta e copiado de uma questão do site gringo não me parece ser o que você precisa. O código apenas verifica se na URL da barra de endereço do navegador possui um hash específico para disparar uma função. O que você quer, na verdade, é mais simples, que é apenas disparar o link com o Lightbox2.

Isso é bem simples de se fazer:

Basta, após o carregamento do DOM, você disparar um .click() no link do Lightbox2 após um pequeno delay com setTimeout:

$(document).ready(function(){
   setTimeout(function(){
      $("#myLightbox").click();
   }, 500);
});

Veja que coloquei um atraso de 500 milissegundos (ou meio segundo), já que a documentação do plugin não informa nenhum callback de quando o componente foi carregado (o que seria o ideal). Então você pode ajustar esse valor de 500 para mais ou para menos de acordo com o que achar melhor e que o tempo seja suficiente para que o plugin tenha sido carregado.

Importante:

O evento $(document).ready(function(){... necessita que o jQuery já tenha sido invocado na página, senão resultará em erro. Você pode substituir essa linha pelo código nativo do JavaScript document.addEventListener("DOMContentLoaded", function(){ se quiser ou for o caso.

Veja funcionando:

$(document).ready(function(){
   setTimeout(function(){
      $("#myLightbox").click();
   }, 500);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.1/css/lightbox.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.1/js/lightbox.js"></script>
<a href="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" data-lightbox="image-1" data-title="" id="myLightbox"></a>
Aguarde meio segundo...

Uma outra forma é usando setInterval até que a div#lightboxOverlay seja criada pelo plugin, indicando que ele já está pronto:

$(document).ready(function(){
   var tempo = setInterval(function(){
      if($("#lightboxOverlay").length){
         clearInterval(tempo);
         $("#myLightbox").click();
      }
   }, 1);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.1/css/lightbox.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.1/js/lightbox.js"></script>
<a href="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" data-lightbox="image-1" data-title="" id="myLightbox"></a>

1
  • Olá @Sam, muito obrigado pela respostas e exemplos, ficou muito bom. 5/12/2019 às 11:22

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .