I have over two hundred web pages that need a lightbox added to them. I’ve added a javascript file at the bottom of the <body> for these pages. Unfortunately, I forgot to add JQuery in the <head>…I’m hating myself for this :(.
Basically, I’m creating and appending the <script> and <link> tags to the <head> of my html from my javascript file at the bottom of my <body>
I believe that since I’m loading the script tags from the end of my HTML that it’s an order of operations problem.
When I click on the designated tag defined by the shadowbox plugin, nothing happens.
I’m a little stuck on this one if anyone could help. I’d really appreciate it!
Here is some example code that I’m using:
//Get head element
var head = document.getElementsByTagName("head")[0];
//Create and attach JQuery
var jquery = document.createElement('script');
jquery.type = 'text/javascript';
jquery.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js';
jquery.onload = function() {
};
head.insertBefore(jquery,head.childNodes[4]);
//Create and attach shadowbox CSS
var shadowboxCSS = document.createElement('link');
shadowboxCSS.type = 'text/css';
shadowboxCSS.rel = 'stylesheet';
shadowboxCSS.href = 'http://image.iloqal.com/lib/fe5c1570746107757c1c/m/1/shadowboxCSS.css';
head.appendChild(shadowboxCSS);
//Create and attach shadowbox JS
var shadowbox = document.createElement('script');
shadowbox.type = 'text/javascript';
shadowbox.src = 'http://image.iloqal.com/lib/fe5c1570746107757c1c/m/1/shadowboxJS.js';
head.appendChild(shadowbox);
//Call shadowbox function in head
var shadowboxcall = document.createElement('script');
shadowboxcall.type = 'text/javascript';
shadowboxcall.innerHTML = "Shadowbox.init()";
head.appendChild(shadowboxcall);
Remove the “call shadowbox function” section, it’s not right.
Instead, add
shadowbox.onload = function() {Shadowbox.init();};to the end.