Home Using CMS data in jQuery with granim.js
Reply: 1

Using CMS data in jQuery with granim.js

dungey_140
1#
dungey_140 Published in 2018-02-14 12:06:19Z

I'm wanting to use granim.js in a current project, however in the docs it is only possible to hard code the colour values into the script. I would however like to make these colour values selectable from my Wordpress CMS, so I'm wondering how I can then pass these values into the granim script?

Would it be possible to replace the hex codes with a Data attribute, and then output the CMS colour values into the DOM for the jquery to reference?

How would I go about achieving this?

Many thanks.

EXAMPLE JQUERY

var granimInstance = new Granim({
    element: '#canvas-basic',
    name: 'basic-gradient',
    direction: 'left-right',
    opacity: [1, 1],
    isPausedWhenNotInView: true,
    states : {
        "default-state": {
            gradients: [
                ['#AA076B', '#61045F'] // Can we replace these with data attributes from the DOM?
            ]
        }
    }
});

EXAMPLE HTML

<div id="canvas-basic" data-colour-1="#000000" data-colour-2="#FFFFFF">This div to have gradient background</div>
Jinesh
2#
Jinesh Reply to 2018-02-14 13:37:00Z

I think you can implement like this:-

jQuery(document).ready(function()
{

var col1=jQuery('#canvas-basic').attr('data-colour-1');
var col2=jQuery('#canvas-basic').attr('data-colour-2');

var granimInstance = new Granim({
    element: '#canvas-basic',
    name: 'basic-gradient',
    direction: 'left-right',
    opacity: [1, 1],
    isPausedWhenNotInView: true,
    states : {
        "default-state": {
            gradients: [
                [col1, col2] // Can we replace these with data attributes from the DOM?
            ]
        }
    }
});

});
You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.377235 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO