How Can I Put Custom Image In Wheelnav.js

I'm using wheelnav.js plugin of javascript to draw some circular menu as in the image below: The problem is that I can't put an image inside the menu parts and I don't know how t

Solution 1:

UPDATE May 3, 2016:

To insert images into the menu slices, use imgsrc:path/filename. So the code above can be changed to:

var imgWheel = new wheelnav("divId");
imgWheel.createWheel(["imgsrc:img/menu1.png","imgsrc:img/menu2.png","imgsrc:img/menu3.png"]);

Solution 2:

The current version (v1.5.5) doesn't support image, so you must modify the source code.

Change this line: https://github.com/softwaretailoring/wheelnav/blob/v1.5.5/js/dist/wheelnav.js#L841

to this one:

this.navTitle = this.wheelnav.raphael.image(currentTitle.title, sliceInitPath.titlePosX, sliceInitPath.titlePosY, *width*, *height*);

Raphael reference: http://raphaeljs.com/reference.html#Paper.image

After this modification you can use images:

var imgWheel = new wheelnav("divId");
imgWheel.createWheel(["img/menu1.png","img/menu2.png","img/menu3.png"]);

There is an issue about it (https://github.com/softwaretailoring/wheelnav/issues/22), so later wheelnav.js will be able to handle image.

UPDATE: wheelnav.js supports image from v1.6.0