How to load Lightbox2 when entering the page

Question

I am trying for some time to resolve a situation I have, I need that when entering the site an advertisement is displayed and for that I am trying to use the plugin Lightbox2 but in the documentation of the plugin itself is not indicated how to do this, I did some research and even arrived at some alternatives but still nothing worked.

I got this code from the English OS and did as recommended:

// 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 to the question in English: Lightbox2 pageload Trigger

On the body of my page I have this link:

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

But even with the attempts I did not succeed.

Answer 1

As far as I know Event.observe(...); is a "function" of prototype.js (https://github.com/prototypejs/prototype/blob/5fddd3e/src/prototype/dom/event.js#L763, not to be confused with <Object>.prototype), soon if you looked in the browser console you would probably see very clearly the error:

Typeerror: Event.observe is not a Function

Just use what is NATIVE that will not have problems:

window.addEventListener("load", autoFireLightbox);

Or you can also use the DOMContentLoaded, that only waits until the DOM is ready, thus being faster than the load, because you won’t have to wait for other resources:

document.addEventListener("DOMContentLoaded", autoFireLightbox);

Of course using jQuery you can use the $.ready() (or the equivalent $()), thus:

$(autoFireLightbox);

Answer 2

The code you tried to use, shown in the question and copied from an issue of the gringo site does not seem to me to be what you need. The code only checks if the browser address bar URL has a hash specific to trigger a function. What you want is actually simpler, which is to just fire the link with Lightbox2.

This is very simple to do:

Just, after charging the DOM, you fire a .click() on the Lightbox2 link after a short delay with setTimeout:

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

Notice I put a delay 500 milissegundos (or half a second), since the plugin documentation does not inform any callback when the component was loaded (which would be ideal). Then you can adjust this value to 500 to more or less according to what you think best and that the time is enough for the plugin to have been loaded.

Important:

The event $(document).ready(function(){... requires that jQuery has already been invoked on the page, otherwise it will result in error. You can replace this line with native Javascript code document.addEventListener("DOMContentLoaded", function(){ if you like.

See working:

$(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...

Another way is by using setInterval until the div#lightboxOverlay is created by the plugin, indicating that it is already ready:

$(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>