Error loading js file

ckubs

Made a blank plugin to load a small piece of JS to lightbox uploaded images.

 jQuery(document).ready(function($) {
	$('.lightbox_trigger').click(function(e) {
		e.preventDefault();
		var image_href = $(this).attr("href");
		if ($('#lightbox').length > 0) { 
			$('#content').html('<img src="' + image_href + '" />');
			$('#lightbox').show();
		}
		else { 
			var lightbox = 
			'<div id="lightbox">' +
				'<p>Click to close</p>' +
				'<div id="content">' + //insert clicked link's href into img src
					'<img src="' + image_href +'" />' +
				'</div>' +	
			'</div>';
			//insert lightbox HTML into page
			$('body').append(lightbox);
		}
	});
	$('#lightbox').live('click', function() {
		$('#lightbox').hide();
	});
});

There is more than just pasting that in a main.js file? Did it, it's loaded but Flarum breaks on the frontend. The error I get is TypeError: $ is not a function at line function updateHumanTimes() { $('[data-humantime]').each(function () {

Thank you for any help.

clarkwinkelmann

ckubs is your extension code somewhere online ? It's hard to give directions without more than that.

Extensions are usually pre-compiled with Gulp and use some Flarum-specific code to be booted with the remaining of the single page app. It's possible the way you call jQuery creates issues if it's not running at the time Flarum expects it.

Also be careful with those .html() calls, I see potential for XSS vulnerabilities ! There's a possibility an href attributes contains more than an innocent link if it's user input.

Use jQuery's methods to set the attribute or better, implement your lightbox with Mithril (if you're able to).

ckubs

clarkwinkelmann As per my level of knowledge that code comes from a tutorial. I'm more intrigued about the process, why it doesn't work than the code itself.

clarkwinkelmann

ckubs we need to see more of your extension (you made a Flarum extension and one of the files contains this javascript, right ?) to understand what you did or maybe forgot to do. How did you include it in the bootstrap.php file of your extension ? Did you pre-compile this code with Gulp ?

Or did you just include that code via the custom header feature instead of an extension ?

If you're indeed creating an extension and your code is on GitHub for example it' easy for me or somebody else to have a look at your whole extension and spot what needs improving. You can also share the content of your other files through copy-pasting or screenshots but it will be a bit more complicated to read/understand ?

ckubs

clarkwinkelmann Found out smoky lightbox already written in ES6 format, pasted it in dist/extension.js and it load correctly.
Now the thing I can't figure out is how to call the script. With something like wordpress wich I know a little more I could easily call <script> new Smoky( 'a.lightbox' );</script> in the header or footer.

ckubs

Following your advices I figured out( correct me if I'm wrong) that normal javascript can't work with Flarum and has to be compiled. That code was put in myextension/forum/js/main.js and probably I was calling it somehow in the main bootstrap file.

Had previously installed gulp following the tutorial opened it with gulp watch in js/forum directory did another save for my main.js file and in dist/extension.js I only have

System.register("bee/flarum-lazy-bee/main", [], function (_export) {
  "use strict";

  return {
    setters: [],
    execute: function () {}
  };
});