Using bigfoot.js with Kirby

Has anyone been successful in getting bigfoot.js to integrate with Kirby?
I have added jquery.js & bigfoot.js to my assets/js folder and added these to my header.php but cannot seem to get it to work.

Any tips would be greatly appreciated.

This is no different from the way you would add it to a static website.

  • Make sure your markup is correct?
  • Do the jQuery and Bigfoot.js libraries get loaded (check with your dev tools)?
  • Have you called bigfoot() in your script as described in the bigfoot docs?

Just on a side note: You might not need Javascript, instead you could also create footnotes using markdown or the Kirby footnotes plugin

@texnixe Thank for your help and info!

So my markup is correct and I can get it to work on a static site, so I have the right components but I’m missing a couple of things.

If you have some time to provide any further help, it wold be greatly appreciated.

jQuery is loading but Bigfoot.js is not.

According to the bigfoot docs, this should be added to the website:

`

`

So, using the js helper, I added that via the following to the header.php document:

<?php echo js(array( 'assets/js/jquery-1.8.3.min.js', 'assets/js/bigfoot.js', 'assets/js/site.js', )) ?>

However I am not sure how to add $.bigfoot(); and I’m not sure where to place the bigfoot() call your mentioned in item #3.

I apologize if I am making this more complicated than it should be :slight_smile:

If bigfoot.js isn’t loading, make sure that the filename is correct and that you have placed it into /assets/js, not into a subfolder.

The $.bigfoot() command, you can either put into your site.js file, or into the footer within script tags like in the docs.

Make sure don’t don’t get any errors in console.

@texnixe You are amazing! Thanks so much for your help and patience.

Putting $.bigfoot() in the site.js file did it! :thumbsup:

hi @texnixe, I’m also running into problems with running bigfoot.js

I added the the js files in my scripts file and linked them in the footer.php file… When i’m putting $.bigfoot() in my index.js file i get this error ( see below)

Do you know what could cause the problem?
Bildschirmfoto 2022-03-16 um 12.14.04|690x53

Thank you in advance already