Adding third party javascript to a project


#1

I want to use a lightbox function on my images - I don’t want to create the lightbox within Hype itself - I want to add a third-party lightbox to the project. There is a css file and a js file. Once added, I need to include href tags to each picture to invoke the lightbox, such as:

<a href="images/image-1.jpg" data-lightbox="image-1" data-title="My caption">Image #1</a>

This should then open the lightbox within the final web page. So, my question is, would I add the above code to the image by double/clicking it and then adding the code to the html box?

Also, I know how to ad the lightbox js and it’s style sheet to the project, but how how would I ensure that the css file was loaded in the head of the document, and the lightbox.js before the closing tag of the body.

Any guidance would be appreciated.


(Mark Hunte) #2

You probaly need to inject the js into the body tag on document load.
This is not too hard to do and for those wondering some js will only work correctly if loaded into the body and not in the head.

Example script in the head to load script into body.

	<script type="text/javascript">
 
 
 	function loadJS(hypeDocument, element, event){ 
 
 	
	 

 if (window.loaded ){ return}

    var   theScript = document.createElement("script");
	  
	theScript.type = 'text/javascript';
	  theScript.src = 'http://foo.js';
	 
	 document.body.appendChild(theScript);
	  
   } 

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


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

If you could post a example project and links to the external file it may be easier to give you a better answer.


#3

Hi Mark,

Thanks for looking into this. The lightbox I want to use is the one HERE. Below are the instructions from the guide. I think I can add the JS and CSS manually after export (probably the easiest option. Where I’m having concerns is how to initiate the HTML. I need to be able to add the atribute to images within the hype project. Firstly, not sure how to add the attribute and secondly, not sure if I need to add an on-click function to the images themselves. Anyway, you may be able to make more sense of it.

Many thanks in advance.

  1. Download the latest version as a zip file
    Or use a package manager…
    NPM: npm install lightbox2 --save

Bower: bower install lightbox --save

  1. Open up the zip file and take a peek at the barebones, working example that is included in the /examples folder.

  2. Ready to set Lightbox up on your page? Start by including the Lightbox CSS and Javascript. You can grab both these files from the /dist folder.

  • Include the CSS at the top of your page in your <head> tag:
<link href="path/to/lightbox.css" rel="stylesheet">
  • Include the Javascript at the bottom of your page before the closing </body> tag:
<script src="path/to/lightbox.js"></script>
  1. Make sure jQuery, which is required by Lightbox, is also loaded.
  • If you already use jQuery on your page, make sure it is loaded before lightbox.js . jQuery 1.7 or greater is required.
  • If you are not currently using jQuery, I’ve created a packaged file that includes both Lightbox and jQuery. Include dist/js/lightbox-plus-jquery.js instead of lightbox.js .
  1. Confirm that the four images loaded by lightbox.css are in the correct location. You can grab the images from the /dist/images folder.

Initialize with HTML

  • Single images. Add a data-lightbox attribute to any image link to enable Lightbox. For the value of the attribute, use a unique name for each image. For example:
<a href="images/image-1.jpg" data-lightbox="image-1" data-title="My caption">Image #1</a>

Optional:

  • Add a data-title attribute if you want to show a caption.
  • Add a data-alt attribute if you want to set the alt attribute of the linked image.
  • Image sets. If you have a group of related images that you would like to combine into a set, use the same data-lightbox attribute value for all of the images. For example:
<a href="images/image-2.jpg" data-lightbox="roadtrip">Image #2</a>
<a href="images/image-3.jpg" data-lightbox="roadtrip">Image #3</a>
<a href="images/image-4.jpg" data-lightbox="roadtrip">Image #4</a>

(Mark Hunte) #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


#5

@frank52

A couple of things … although the approach Mark has taken (and of course this was in reference to you asking to load the script before the body tag) is fine. You wouldn’t be able to use the “option” method with lightbox 2. i.e

    lightbox.option({
      'resizeDuration': 200,
      'wrapAround': true
    })

because the global object “lightbox” won’t be available because the script loads after the DOM content generated by Hype.

This won’t be a problem if you don’t need to change any of the default options

But … if you do. Read on.

This is my approach.

  • In the Head. Add in the dependancies

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.10.0/css/lightbox.css" integrity="sha256-i6N2FjiALCyH7H0pVVd5Ut+9oJ9CJ2t/25aELbdW2xg=" crossorigin="anonymous" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.10.0/js/lightbox-plus-jquery.min.js" integrity="sha256-gbqsBwBVZ0bNBUY4I5rT6yRhMbB9roODov0c8qE4iNE=" crossorigin="anonymous"></script>
    

    Note: I have taken these from a CDN. You could easily add them in Hype. Just make sure you’re including the right scripts in the right order. Also, the time to load is minimal so it won’t be of a great benefit to load before the body tag.

    <link href="lightbox css">
    <script src="jquery">
    <script src="lightbox">
    

    I would probably use the lightbox owners jquery+lightbox script.

  • Now, you can add images into Hype as you normally would and (as you mentioned) in the innerHTML of those images you can add the following

    <a style="display: block; width: 100%; height: 100%;" href="${resourcesFolderName}/IMAGE-NAME" data-lightbox="image name or group name" data-title="with a caption"></a>
    

    Note the styling. Without this there would be no link. It’s basically expanding the link tag to the whole element.
    Also Note that the ordering in Hype depicts the order in the images if you are grouping them. So, re-arrange the order in the “Timeline” section to see this.

  • And finally, you can run a function on Scene load to utilise the lightbox.option method.

    lightbox.option({
      //whatever options
    })
    

And there we have it!

Bonus Points: lightbox2-example.zip (1.6 MB)


(Mark Hunte) #6

Nice, like that…


#7

Hi Guys.

Great help as usual. I’ve now managed to get a slider gallery working with the lightbox feature - followed your instructions to the letter and it works - hooray!. But, a couple of issues. I used the example kindly supplied by @DBear. However, I noticed that the JS and CSS is actually hosted on cloudflare. If I wanted to host these myself, how would I go about downloading the bits needed to make it work locally. I’ve tried downloading the JS and CSS files through the web browser and saving them. However, when added to the head of the page in which I’ve embedded the hype animation, it doesn’t work as expected. I see a reduced size lightbox with a couple of arrows and a close icon, but no image.

Secondly, with the cloudFlare served version of the CSS and JS, whilst the gallery works perfectly, it does create a slight problem when different layouts of the hype document are created for iPad and iPhone. Basically, the image count triples from 20 to 60 images. I guess this is because it’s counting the images from every layout. Is there a way to overcome this problem?, or is there a way to remove the image count altogether.

Sorry to be a pain, but I’m still a bit new to this coding stuff (although I am getting there).

Look forward to any advice.


#8

Hi, I’ve managed to remove the image count
by adding the option:

‘albumLabel’:" ",

into the function lightbox()


#9

Thanks Ed, I didn’t see these options for customisation until you altered me. I’ve used the
'showImageNumberLabel': false
Option instead - works fine.

Thanks for pointing me in the right direction.


#10

I was playing with those options starting from the top of the list , and now I see that showImageNumberLabel works too for your purpose.


#11

Well, it’s all working fine (DEMO HERE). Now all I need to do is remove dependency from having the script and the CSS hosted somewhere in the cloud. It would be so much better to have everything self contained.


#12

Ask and ye shall receive!

lightbox2-files.zip (1.8 MB)

Now … get ready! DO NOT DRAG ALL FILES INTO HYPE RESOURCES!!!

Just in case you got itchy fingers.

Well, I mean you have to drag them all in but rather than do them all at once. I’d prefer to do them in some sort of order as Hype automagically puts them into the Head for you.

Drag them in this order.

lightbox.min.css
lightbox-plus-jquery.min.js

The rest are the images and a .map file. You can drag these in as you please. The important ones are above.

Please note. I have altered the files here so that everything is pointing to the ${resourcesFolderName}/ special variable (if you replace these with another version then it will break) but now you won’t have to depend on the cloud they will be there inside the hype resources folder.

I guess you’ve overcame the image count thing. But, when you create your images notice there is a data-lightbox attribute. In my example, i gave this a value of nature. Any image that you want in a lightbox as a group (image 1 of 3, etc) you must have the same attribute value.

data-lightbox="nature"

SO, if you have different layouts and want them to show as separate groups then just change the data-lightbox attribute in each layout to a unique name, like “layout-iPad” for example.

<a style="display: block; width: 100%; height: 100%;" href="link-to-image-1" data-lightbox="layout-iPad"></a>
<a style="display: block; width: 100%; height: 100%;" href="link-to-image-2" data-lightbox="layout-iPad" data-title="with a caption"></a>

<a style="display: block; width: 100%; height: 100%;" href="link-to-image-1" data-lightbox="layout-Desktop"></a>
<a style="display: block; width: 100%; height: 100%;" href="link-to-image-2" data-lightbox="layout-Desktop" data-title="with a caption"></a>

This will then show a lightbox with only 2 images in each layout when clicking on an image. Hope that makes sense.


#13

Fantastic, All present and correct - can’t thank you enough.


#14

You’re Welcome!

9D4C7EBC-BC71-4804-96C0-6D5F4189841E

:smiley:


#15

Hi @DBear I’m back with yet another issue that I hope you can fathom out. The lightbox gallery is working just fine. However, I decided to make some of the links open locally hosted videos (all 1280x720). These, however, cause a problem. They open just fine, although the lightbox isn’t styled. furthermore, there is no way to close the lightbox - no X and clicking outside the video doesn’t do anything. Is there something about video files that would override the lightbox style, or prevent the lightbox from closing?


#16

Ok, I just noticed that the lightbox 2 JS doesn’t support video, so there is no answer. I’m going to try something else so I’ll start a new thread on how to achieve what I’m trying to do.


(Mark Hunte) #17

Hmm,

In @DBear 's last example
I just replaced one of the hrefs to point to a video and it loads and plays ok. Close button works


#18

Yep - it works here also. Unfortunately, when the project is exported and opened in a browser, it doesn’t work - no close button - it just filled the screen.


(Mark Hunte) #19

I exported to folder and tried it. It still works for me but I did have to disable cross domain restrictions for the lightbox js files to be picked up…