Insert JQuery in a zul file - jquery-plugins

Question

Hello I'm working on a project using ZK. What I need to do is passing a value from a label to a JQuery function to do a countdown.
I need to use this plugin : www.jqueryscript.net/loading/Graphical-Circular-Timer-with-jQuery-CSS3-pietimer.html
I have tried to insert this plugin in zul page but is doesn't seem to work.
I'm kinda of new in JQuery, I didn't know how to pass a value to "timerSeconds" from a label .
Here what I have tried to do so far :
<?link href="http://www.jqueryscript.net/css/top.css" rel="stylesheet" type="text/css"?>
<?link rel="stylesheet" type="text/css" href="pietimer.css"?>
<zk>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.pietimer.js"></script>
<script type="text/javascript" defer="true">
<![CDATA[
jq(function() {
zk('#timer').pietimer({
timerSeconds: 60,// i need to insert a label value instand of 60
color: '#234',
fill: false,
showPercentage: true,
callback: function() {
}
});
});
]]>
</script>
<div id="timer" style="margin-top:100px;"></div>
</zk>
Can you help me please?

Answer 1

The issue is that jq() and zk() are the ZK own scope, but pietimer() is added below another jQuery version, so I guess you may use this to solve it.
zk.afterMount(function () { // run when ZK widgets are ready
$('#timer').pietimer({ // use $ instead of zk or jq
timerSeconds: 60,// i need to insert a label value instand of 60
color: '#234',
fill: false,
showPercentage: true,
callback: function() {
}
});
});