Adding third party javascript to a project

Using JavaScript with Hype
4

Here is a quick example. This is really just to show you a way.. as I dod not have your setup.

LighboxExample.zip (246.6 KB)

I basicly move the lightbox.js on doument load to the body ( see js in the head) this way I am able to add the file to Hype along with the jquery one.

Moving the javascript link to body

	function loadJS(hypeDocument, element, event){ 
 
 	
	 

 if (window.loaded ){ return}

    var url = "${resourcesFolderName}/lightbox.js";
    
    var scripts = document.getElementsByTagName('script');
    for (var i = scripts.length; i--;) {
     // console.log(scripts[i].src)
        if ((scripts[i].src).includes(url) ) {
        document.body.appendChild(scripts[i]);
        console.log(scripts[i].src)
        } ;
    }
	  
   } 

if("HYPE_eventListeners" in window === false) {
window.HYPE_eventListeners = Array();
}


window.HYPE_eventListeners.push({"type":"HypeDocumentLoad", "callback":loadJS})
 
 
	</script>

We then just add the attributes as we need them see loadlightBox() function.

Each image hold has the class name of imageHolder

 var imageHolders = document.getElementsByClassName('imageHolder')
 
     var i;
    for (i = 0; i < imageHolders.length; i++) { 
        var thisImage  = imageHolders[i]
        var thisImageID = thisImage.id
        console.log( imageHolders[i])
        imageHolders[i].innerHTML =   "<a href=\"${resourcesFolderName}/" + thisImageID + ".jpg\" data-lightbox=\"image-" + thisImageID + "\" data-title=\"My caption\"></a>"
        
        
      //Image #" + thisImageID + "
}

The last function is just so we do not see the hyperlinks text but can still click the image to launch the lightbox

The images folder is only for the "lightbox.css" requierments

There is also an older thread with a similar request

3 Likes