Data attributes in Oxygen

As of Oxygen 2.2.1, there is no built-in provision for adding data attributes to elements.

While my earlier tutorial on this topic did provide a working solution to this, it is clunky compared to the simplicity of the method in this article.

We can add a Code Block and utilize jQuery’s attr property like this:

$('#link_text-19-224').attr('data-featherlight', '#lightbox');

Details

In your Oxygen Template/editor, add a Code Block component at the end of all others.

PHP & HTML:

<?php
	// echo "hello world!";
?>

JavaScript:

(function($) {
'use strict';

	$('#link_text-19-224').attr('data-featherlight', '#lightbox');

}(jQuery));

Replace link_text-19-224 with the ID of your element.

With the above code in place, we are telling the browser to wait until the webpage (DOM – Document Object Model) loads and then run the code inside an anonymous function that takes in jQuery as a parameter and runs the code replacing all instances of $ with the passed parameter, jQuery.

Info on use strict can be seen here.

For adding data attributes to multiple elements, simply add more lines like this:

(function($) {
'use strict';

	$('#section-2-224').attr('data-lax-preset', 'spin fadeInOut');
	$('#link_text-19-224').attr('data-featherlight', '#lightbox');

}(jQuery));