Getting Started

Shader Grid, a powerful, responsive, and extremely customizable, versatile grid with image(.jpg, jpeg, .png, .webp), seamlessly running on all major browsers and mobile devices, including iPhone, iPad, iOS, Android, MAC, and Windows, elevating your website's audio experience to a whole new level.

It is built using EcmaScript6 using the latest JavaScript and CSS standards. The 3D sphere and particles use Three.js and WebGL shaders running exclusively on the device's GPU.

It is crucial to optimize your images, especially since they are used as textures. Larger image files demand more GPU power to display due to the increased number of pixels. To minimize performance impact, select images that are visually close in size to the grid mesh, also optimize the size using tinypng.com or squoosh.app.

Please note that the mettrix are units so visual aproximation is needed, since the grid runs in 3D space and various aspects like camera position or camera rotation, using pixels is not possible.

Please note that it will not work locally, it has to run on an HTTP or HTTPS protocol.

Installation

After purchasing the plugin, inside the main zip file you will find installable plugin fwdsg.zip.

Installation steps

1. In your WordPress & WooCommerce Admin Dashboard, go to Plugins > Add New.
2. Upload the fwdsg.zip plugin file that you downloaded from CodeCanyon.
3. Click on install now.
4. If successful, click Activate Plugin to activate it, or Return to Plugin Installer.

Update

Uninstall and delete the current installed version, doing this will not remove any of the settings or Galleries, install the new version by following the steps from the installation section above, and if you are using a cache plugin clear the browser cache with it to make sure the old files are not used.

Usage

The plugin is constructed of three sections, the preset manager which is used to modify the grid functionality, the gallery manager wich is used to create Galleries and add manage images/videoss and the CSS editor which is used to update surten CSS aspects of the plugin like the grid font.

Presets

There are six presets included, all with the same initial settings. They are provided so that you can configure the grid differently for each preset if needed.

Frist step is to select one preset that you want to use, just select the preset that you want and if you want to modify some of the preset functionlity just modify the option/options that you want, they are self explanatory, don't forget to update the preset.

Galleries

Next step is to create your own gallery by clicking on the Add new gallery button and give it a name.

After this is done you can add as many images/videoss as you want.

Shortcode

After the preset and gallery are done use the shortcode generator to add the grid in your page, post or custom post.

WooCommerce

Please look into the WordPress & WooCommerce section to understand how to configure the grid.

Grab the shortcode and add it in the product description.

API - Application Programming Interface

This section is for developers that want to use the plugin API. The following lists represent all the public API methods and event listeners that can be used from the grid externally.

You can access the grid instances by their order in the page with the fwdsg name with its order after it, starting from 0. For example if you have 2 instances their names are fwdsg0 and fwdsg1. Here is an example how to use the API in the WordPress & WooCommerce editor or in a code section of your page:

let fwdsgAPI = setInterval(() =>{
if(window['fwdsg0']){
	console.log('SC API ready')
	clearInterval(fwdsgAPI);

	// Register the LIKE event.
	fwdsg0.addEventListener(FWDSG.CLICK, onClick);
}
}, 100);


// Listen for the LIKE event.
function onClick(e){
	console.log(e)
}

<!-- Add a button -->
<button onclick="destroy()">Destory</button>

Methods

Methods are functions that can be called via the API to execute certain actions.

JavaScript methods look like fwdsg0.methodName( /* arguments */ ), please note that fwdsg0 is the grid instance name, if you are using multiple grids don't forget to set the instance unique for each instance like this fwdsg1, fwdsg2, fwdsg3, etc... depending on how many grids are added.

destroy

.destroy():Void

Destory the grid instance and remove it from DOM.

Events

Shader Grid has many events, they are added via the addEventListener method add accessed via the instance name.

The events must be registered when the API is ready.

FWDSG.CLICK

Dispatched when the a grid image is clicked, it also has a parameter associated called e that contains data about the clicked image like, id, src etc...

Notes

Ever since the early days of Adobe Flash, I've envisioned a grid that would let me bend and manipulate pixels at my will. Today, I'm thrilled to say that this dream has finally been fulfilled.

For me this is more than a job, it is my passion, I love to create innovative tools that my clients can benefit from. @Tibi - FWD.

For support and customizations please write to me directly at this email.

WordPress & WooCommerce Documentation

Documentation for the WordPress & WooCommerce version, API and overall implementation.