jQuery Knob use a image instead / to cover the value

Question

do you know if it is possible to replace, cover o insert an image inside the circular progress bar?

I know that the value can be omitted, but no example or tip if can be replaced.

Answer 1

It is possible to insert an image inside the jquery knob using position:absolute for the image and the <div> that jquery knob creates as container of the knob's canvas. Add a higher z-index to this div and the knob will be displayed on top of the image - so you don't have to take care about correct image size and shape. Example Setup:

<input class="knob" type='text' value='100' data-angleOffset="0" 
 data-angleArc="360" data-fgColor="blue" data-displayInput=false />
<img class="inside" src="http://placehold.it/120x120"/>

/* CSS*/
.inside
{
 position:absolute;
 top:50px;
 left:50px;
 z-index:1;
}
.outside
{   
 position:absolute;
 z-index: 2;
}

/* jQuery*/
$(function () {
  $('.knob').knob({});
  $(".knob").parent("div").addClass("outside")    
});

Demo: Image inside jquery knob

Answer 2

The knob itself doesn't have such option but you can always hack in with jQuery, apparently, knob will create an outside DIV to hold the canvas, so you may call something like the following code to insert an IMG tag into that div and use the position (relative/absolute) to manage its appearance. You may play around the knob width and height, with the .knob-image top/left to fit the image inside of the circle perfectly

<style>
    .knob-image {
        position: absolute;
        top: -71px;
        left: 15px;
        width: 70px !important;
        height: 70px !important;
        border-radius: 50%;
    }
</style>
<div class="knob" data-width="100" data-height="100" data-thickness=".3" data-displayInput=false></div>    
<script>
    $(".knob").knob();         
    $(".knob").parent('div').css('position', 'relative').prepend('<img src="abc.jpg" class="knob-image">');        
    $(".knob").val(27).trigger("change"); //set the default value
</script>