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?

score 3 · Accepted Answer · answered Dec 14 '13 at 11:39

3

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

answered Dec 14 '13 at 11:39

Bob Tate

1,381
9
21

I am trying to use your know and is there any way I can change images. Like i have 9 images and when i slide i can show images? I hope you understand my question. – San Apr 12 '14 at 09:16
I guess the value parameter won't work here, as i can see in your fiddle. Do you have any idea how to fill the outer circle when it has image. – void Apr 10 '15 at 09:17
@San -- Yes, you can change images during the knob, just need to add the change callback. I have updated the fiddle – Bob Tate Apr 11 '15 at 03:57
@void -- Not sure that I am understanding what you are looking for. – Bob Tate Apr 11 '15 at 04:02

score 0 · Answer 2 · answered Oct 01 '17 at 03:14

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

jQuery knob, put image instead of text

2 Answers2