jQuery knob, put image instead of text

Question

I'm using jQuery Knob and I'm wondering is there any way to put an image inside of knob instead of text, if not are there any other plugins similar to jQuery Knob which have this feature?

Answer 1

The quick answer is yes. The knob will work with an image. All you need to do is assign the class/id for the know to work on.

 <img class='knob' src='http://webtaj.com/images/car-best-sports-cars_41187.jpg'>   

jsFiddle

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>

here's another post asking about the same question: jQuery Knob use a image instead / to cover the value