How to initialize Tobii framework without using inline script in HTML?

Ricolette256 commented 1 year ago

We have to initialize Tobii framework by const tobii = new Tobii() How can this be done without using inline script?

(I am a beginner, using your lightbox. Please answer my question, although it may present me as unprofessional! :-)

midzer commented 1 year ago

Hi @Ricolette256 and thanks for opening an issue :)

Tobii lightbox doesn't have to be initialized in an inline script.

You can put the initialization line in a separate file like app.js or main.js (or where your other JS stuff is) as long as it is included in your HTML after tobii.min.js.

Ricolette256 commented 1 year ago

Thank you for your quick reply. It seems, that my question is not so stupid...

I did follow your advice and I can see the correct implementation in the source code of my website. Here is the relevant part of it: `

` But sorry to say: This doesn't do the trick. I have looked at it via the Firefox Inspector, network analysing tool and I found, that the initialisation script (the file tobii.start.js) will start to load after the tobii.min.js But tobii.min.js is not ready loading, while tobi.start.js is executed. There should be a delay for tobi.start.js and I do not know, how to manage this. I am running Joomla websites in conjunction with Yootheme pagebuilder. Therefore my opportunities, to insert the initialisation script somewhere else (e.g. in the template index.html) are very limited. How can I proceed best now?

viliusle commented 1 year ago

Here is simple working demo:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Tobii demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <link rel="stylesheet" href="https://midzer.github.io/tobii/dist/tobii.min.css">
</head>
<body>

<a href="https://img.youtube.com/vi/HHi8qOtHnhE/maxresdefault.jpg" class="lightbox" data-group="single">
  <img alt="Aquarium" title="Aquarium view" src="https://img.youtube.com/vi/HHi8qOtHnhE/mqdefault.jpg" />
</a>

<script src="https://midzer.github.io/tobii/dist/tobii.min.js"></script>
<script>
const tobii = new Tobii()
</script>

</body>
</html>

But if you would move line <script src="https://midzer.github.io/tobii/dist/tobii.min.js"></script> after <script>const tobii = new Tobii()</script>, you would get error, that tobii.min.js is not loaded yet.

Usually it is always better to use onload event to init libraries:

window.addEventListener("load", (event) => {
  console.log("page is fully loaded");
});

https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event

Ricolette256 commented 1 year ago

I don't know anything about "eventListener" and how to use it properly. I assume, it is a condition, from which an action is triggered, as soon as the condition is fullfilled. But I don't know, how to insert the appropriate code within my website.

Of course I don't want inline code. Then I have the chance, to invoke JS scripts from one single point within the YooTheme Framework / Pagebuilder. From there, I don't have influence, what is loaded at which time. Perhaps I can put the eventListener in the same JS, which does contain "const tobii = new Tobii()" ? You see, I have no idea about JS. I am a simple practitioner of mental health (Heilpraktiker Psychjotherapie) who wants to create his new website, containing many video, audio and iframe with HTML.

Could it be like: window.addEventListener("load", (event) => { const tobii = new Tobii() });

and I put it in a JS file, which is loaded together with all the other JS files, because the eventlistener would trigger the function "const tobii = new Tobii()" immediately after the event has happened?

viliusle commented 1 year ago

Could it be like: window.addEventListener("load", (event) => { const tobii = new Tobii() });

Yes, it should fix your issues.

Ricolette256 commented 1 year ago

Thank you so much! Yes, that did the trick and tobii is running.

midzer / tobii

How to initialize Tobii framework without using inline script in HTML? #106