Scripts

This module registers popular scripts like Flickity and Isotope so you can load them anywhere in Oxygen.

To enqueue Flickity, for example, you can simply place

<?php
wp_enqueue_style( 'oxy_toolbox_scripts_flickity' );

wp_enqueue_script( 'oxy_toolbox_scripts_flickity' );
?>

in a Code Block’s PHP & HTML area.

Note: You would need to initialize these scripts on elements of your page as needed.

Ex.:

(function ($) {

	$('.posts-carousel').flickity({
		// Groups cells together in slides. Flicking, page dots, and previous/next buttons are mapped to group slides, not individual cells. is-selected class is added to the multiple cells in the selected slide.

		// if set to a percent string, group cells that fit in the percent of the width of the carousel viewport.
		groupCells: '80%',

		// At the end of cells, wrap-around to the other end for infinite scrolling.
		wrapAround: true,

		// Unloaded images have no size, which can throw off cell positions. To fix this, the imagesLoaded option re-positions cells once their images have loaded.
		imagesLoaded: true,
	});

})(jQuery);

(above code goes in JavaScript area of the Code Block)

Below is the list of scripts that are registered by this module and their handles:

Flickity

CSS file handle: oxy_toolbox_scripts_flickity
JS file handle: oxy_toolbox_scripts_flickity

GLightbox

CSS file handle: oxy_toolbox_scripts_glightbox
JS file handle: oxy_toolbox_scripts_glightbox

Isotope

JS file handle: oxy_toolbox_scripts_isotope

imagesLoaded

JS file handle: oxy_toolbox_scripts_imagesloaded

Infinite Scroll

JS file handle: oxy_toolbox_scripts_infinite-scroll

Tutorial: [Scripts] Infinite Scroll on Posts page in Oxygen

Splide

JS file handle: oxy_toolbox_scripts_splide

CSS file handle: oxy_toolbox_scripts_splide

Tutorial: [Scripts] How to build a Posts Slider using Splide

Headroom

JS file handle: oxy_toolbox_scripts_headroom

---